Using icons

Consistently using iconography and pairing with our other foundations like typography can greatly improve usability, recognition, and perception. These guidelines outline how we craft, interact with, and use iconography.

Overview

Icons should be utilized to enhance user experience by providing intuitive visual cues, aiding in navigation, and improving usability, especially for commonly understood actions or concepts. They shouldn't be overused or substituted for clear text in scenarios where it might cause ambiguity or confusion. Icons should be avoided when they introduce unnecessary complexity or ambiguity, especially if they don't clearly represent associated actions or concepts, hinder accessibility for text-dependent users, or carry meanings that may vary across different cultural or demographic contexts, potentially leading to misunderstandings or user frustration.

Grid

Iconography should be used when it enhances the user experience by providing intuitive visual cues, aiding in navigation, and improving usability, especially for commonly understood actions or concepts. However, it shouldn't be used excessively or in place of clear text when it risks ambiguity or confusion, particularly for complex or less familiar functionalities where text labels may be more informative.

Pixel grid

Icons should be aligned to the pixel grid to avoid aliasing and maintain sharpness across screen sizes and densities.

Lines that are not snapped to the pixel grid will be appear gray. A line that slightly enters a pixel will create a “fuzzy” appearance. This is especially noticeable on devices with lower pixel densities.

When creating an icon, always check the grid and conduct a pixel preview to view how it would appear on low-density screens.

Keylines

Keylines are available as a starting point for designers contributing icons to the system. These keylines guide the placement of common shapes to maintain consistency between icons.

Start by aligning to the keylines, then go outside of the keylines when necessary to make an icon clearer.

Icons and text

Size relationship

For visual hierarchy, proper icon and text sizes should be maintained when placing these elements together on a single line. In most cases, a single line of text will be placed next to 16px and 24px icons as these icon sizes are most common within our badging system.

Caption and body text may be used next to 16px icons, while subtitle 2 and subtitle 1 text may be used with 24px icons.

Space between

Icons and text should be aligned to the vertical centers for this treatment. Use 6px of spacing between 16px icons and text and 8px between 24px icons and text.

Color

Default

Icons are monochromatic by default. The majority will use our primary foreground color token unless in a disabled state within a button.

Paired with text

If an icon is paired with a label or body of text, the icon will match the color of the text.

Semantic

Icons that convey semantic meaning, like attention, information, or confirmation, can use semantic colors over primary or secondary backgrounds. If the icon is over a background container using a semantic color, the icon will use an inverse color scheme instead.

Fills

Some icons have an outlined and a filled version. The filled versions are used to indicate a selected state or to increase their prominence within a hierarchy.

Alignment

Icons can be aligned center or top with a body of text. The alignment depends on the height and density of the paired content. Icons align center for text that spans 1-2 lines and align top for 3 or more lines.

Best practices

Culture and demographics

Do use icons that are either universally understood across countries, or are specific to a country’s currency or culture.

Don’t use icons that fail to align with cultural representation or norms. Be mindful that icons may portray different meanings across cultures.

Scaling

Do align icons to the pixel grid at their provided size and use them at 100%.

Don’t scale icons to arbitrary sizes. This leads to aliasing and mismatched stroke widths. Contact the design system team if an icon needs a new size.