Iconography
An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data.
Working with icons
Use icons infrequently
If you’re questioning an icon’s use, it probably doesn’t need to be used at all.
Avoid using icons solely for decoration or visual interest.
This detracts from their intention elsewhere. Consider the surrounding context of icons too; if icons are cluttered and not spaced well, it can lead to visual noise and confusion.
Do
Use a single icon for clarity.
Don‘t
Too many icons in UI create visual noise.Use established icons
Icons that have been used for a long time worldwide have a higher chance of being recognized and understood quickly. Don’t reinvent an icon that’s already been accepted as the convention.
Do
Use an internationally recognized icon whenever possible.Pair icons with text
As a general rule, icons should be used in combination with meaningful text to support users progressing through the product in an accessible manner.
Do
Pair text and icons for clarity.Don‘t
Icons without labels can be unclear.Designing with type
Variants
Our icons have variations to work within a given context. There will be a line version, which can be accompanied by a filled version. Use the line version of our icon in most cases as they are visually balanced, so more than one can be used when close together.
Often, a filled version can be used to represent an action or command that has been carried out, such as using a filled star when a post has been “favorited“. You can use color to further reinforce this interaction and change.
Sizes
There are seven icon sizes in our design system:
- 11px
- 12px
- 14px
- 16px
- 18px
- 20px
- 24px
Colors
Our icons are available to use as a single color. For components containing confirmations, alerts, information, and acknowledgments, follow the guidelines associated with the component and use case.
Using icons with a text label and color will enhance the usability and accessibility for all users.
View the colors in the icon component.
Accessibility
There are very few widely recognized icons, so whenever possible, use a label or supporting text to ensure the icon’s meaning is understood. If an icon is used without a visible label, an aria-label must be used for the icon.
However, don’t use aria-labels if you are rendering the icon with a visible text label to prevent accessibility label duplication. Find out more about writing meaningful text in our accessibility guidelines.
Combining unfamiliar icons with text could confuse users depending on how they recognize the supporting icon, so make sure the icon and text label are coupled. To help enhance usability further, ensure the icon color has at least a Web Content Accessibility Guidelines (WCAG) 2.1 AA standard color contrast ratio.
Design resources
Icon Library
- We use FontAwesome Pro (FA) for most of our icon needs. If needed, the design team can create a custom icon.
- We support:
- Version 6.5.1
- Light, regular, solid, thin and brand styles