Iconography

The icon set used in product is called Font Awesome Icons with custom icons added to fit our needs.

Size

Standard icon defaults:

  • xsmall: 12x12
  • small: 16x16
  • medium: 20x20
  • large: 24x24
  • xlarge: 32x32

 

Do
Iconography-DoDont-Size-Do

 

 

Don’t
Iconography-DoDont-Size-Dont-1
Iconography-DoDont-Size-Dont-2

 

 

To ensure readability, use the Fontawesome style “solid” (aka “filled) by default when icons are 24x24 or smaller. Avoid outline style of icons for 24x24 and smaller, except for navigation icons. When icons are 32x32 or larger, outline icons are allowed, ex: empty states.

Do
Iconography-DoDont-Style-Do
Don’t
Iconography-DoDont-Style-Dont

 

Text pairing

When space allows, pair icons with text.

Do
Iconography-DoDont-TextPairing-Do
Don’t
Iconography-DoDont-TextPairing-Dont

 

Color

Colors vary from Deep Purple #252525 or James Brown #868D96 when not interactive, Steel Pulse #9C49EE when interactive, or James Brown #868D96 when disabled. When an icon is paired with text, match the icon color to the text color.

Do
Iconography-DoDont-Color-Do
Don’t
Iconography-DoDont-Color-Dont

 

Grouping icons

Iconography-Example-Grouping

 

Info icon

Use the filled version of the info icon and combine it with our alert color Denim (blue300) #0177B0. On hover / tap, a standard UI tooltip should appear. Use this icon exclusively when applying a UI tooltip to your content.

Iconography-Example-Info

 

Shape layering

In code, we’re able to layer shapes behind or in front of icons. Be sure to check the color contrast to ensure readability. If contrast is low, add a stroke that matches the background color to differentiate the shapes (see “On top” example.)

Iconography-Example-Shape

 

Accessibility

  • When possible, pair icons with text.
  • Ensure alt text matches the specific action. For desktop, reveal alt text on hover with a tooltip.
  • Use the Icon Button component when possible, as it has built in hover, pressed and focus states.
Iconography-Example-Accessibility

 

Native app icons

  • Use FontAwesome by default.
  • Use system icons only if no icon exists in FontAwesome for a particular concept (iOS = SF Pro symbols, for Android = Material symbols)
    • Use system icons in a filled style.
    • It is the designer’s responsibility to identify the system icon to use as a substitute and relay that info to their engineer partner.
Do
Iconography-DoDont-NativeApp-Do
Don’t
Iconography-DoDont-NativeApp-Dont

 

Custom iconography

Why to avoid custom iconography

  • They add weight to an application, potentially slowing load time.
  • They’re harder for engineering to implement and track when compared to fontawesome library.
  • With thousands of icons in our fontawesome library, most common scenarios have been covered.
  • Custom solutions often result in uncommon and complex imagery, which increases comprehension time.

Life of a custom icon

  1. Explore alternatives to custom icon. If none exists, continue these steps.
  2. Create a proposal for the custom icon, including context.
  3. Review proposal for custom icon with design system team.
  4. Creates an svg of the icon in Figma. If it’s a UI icon, create in the style of Fontawesome.
  5. Publish to Designbase if the custom icon can be used in other products. If it’s truly unique, do not add to Designbase.Share SVG with Engineering

Measurements

Consider using the following rules and alignments when extending the icon kit.

Iconography-Specs-Custom