Iconography
Icons should be used to provide clarity — representing ideas, objects or actions. They quickly guide the user to the right information.
Touch targets
All touch targets for interactive icons need to be 44px or larger. The icon is not required to be at least 44px, padding can be added to a touch target with css to meet the 44px requirement.
Color
Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action which should always be to help guide a user. For more information on color, see theĀ Color guidelines.
Do not use different colors for text and icons.
Alignment
- Vertical list: Icons should appear to the left of their respective labels.
- Horizontal list: Icons should appear above (center aligned with) their respective labels.