Icon
Figma | Storybook
Overview
Icons are symbols that represent actions and items.
Behaviors
Display only
Selectable icons are buttons. Unlike selectable icons, display-only icons can't be interacted with in any way.
Usage guidelines
General
Use icons that are in our icon library. Icons should be used to increase comprehension, not for decoration. Don't clutter the screen by overusing icons or rely on them alone to communicate.
Content guidelines
Icons should be accompanied by meaningful and complementary text. If there is no visible text displayed next to the icon, an icon must have an aria-label.
Try this
* Add to library
Not this
*
For more guidance on selectable icons, refer to the icon variation of the button component. For all other icon help, refer to the icon guidelines.
Size and style
Icons can be small, medium, or large. Medium icons are 24px and are typically used in menus. Smaller icons can be used in data grids, instructional text, and input fields. Icons shouldn't be smaller than 16px to keep them accessible. Larger icons can be used for wayfinding and emphasis when there is enough space.
Icons should be filled and need to have a contrast ratio of 4:5:1 to be accessible.
Related
Referenced in this section:
Components and patterns that use icons:
Updated 8 days ago