These icons are generated from a webfont and displayed by a pseudo class. The icon classes are applied to a <span> because of its lack of semantic meaning.

Examples

Usage

Rules

  • Icons use the color of the parent element unless specifically defined with a color class
  • Icons should be used consistently throughout the UI to avoid confusing meaning—it‘s best to stick with the initial intent of the icon, which is typically indicated by the icon name

Constraints

  • Not all icons should be used without a label—consider if the icon is critical to understanding content or function, or if it‘s only for visual embellishment
  • Icons that are key to understanding the content or function must be accessible, see the accessibility notes below
  • Icons were created in a 20px x 20px grid with subpixel antialiasing addressed at the default size, scaled icons may have blurry edges when rendered on non-HiDPI displays
  • Icons can only be presented in a single color, if you need multiple colors or something more details consider using SVG for a spot illustration

Principle

  • Icons can be used as a visual shorthand for common actions and controls
  • Icons can also be used as visual anchors and embellishment

Accessibility

  • If icons add meaningful value to the content consider adding additional text with the .sr-only class within the icon <span>. For example, you may have a delete button with the .ico-delete icon where something like this would be appropriate, <span class="ico-delete"><span class="sr-only">Delete</span></span></span>

Class Names

ico-*
Required

Use on a <span> where the * is replaced with the icon‘s class name after the prefix
  • Last updated May 15, 2018
  • Authorable - Yes
  • Core - Icon Font