Size
Standard icon defaults:
- xsmall: 12x12
- small: 16x16
- medium: 20x20
- large: 24x24
- xlarge: 32x32
Do
Don’t
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.
Text pairing
When space allows, pair icons with text.
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.
Grouping icons
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.
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.)
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.
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.
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
- Explore alternatives to custom icon. If none exists, continue these steps.
- Create a proposal for the custom icon, including context.
- Review proposal for custom icon with design system team.
- Creates an svg of the icon in Figma. If it’s a UI icon, create in the style of Fontawesome.
- 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.