Icon
Icons are graphic representations of concepts and actions that help establish context and purpose for other user interface elements.
A searchable list of icons is available on the iconography page.
Anatomy
The icon component is made up of two elements.
- Container
- Icon
Variants
Size
The icon component provides five predefined sizes that range from extra small to extra large and are designed to proportionally compliment various content and components. When situations arise where a different icon scale is needed, any or all of the icon sizes can be redefined within a given context via the relevant component tokens.
Extra small
Extra-small icons should only be used in situations when space is particularly tight such as small components or inline with text. Not all icons will maintain their fidelity at this size; use the extra small variant with caution.
Small
Small icons should be used when space is limited or when an icon is needed in a slightly larger container.
Medium
Medium icons are the default icon size and should be used for the majority of the user interface.
Large
Large icons are used in situations such as when you need to highlight a feature, product, or concept. They are best used when there is plenty of surrounding white space. Consider limiting the number of large icons used in a given view.
Extra large
Extra-large icons are used as a focal point within a layout. Limit use to one extra large icon per view.
Component tokens
The following component tokens are available for customizing the icon component.
Sample references including the swatch and computed values currently represent the applied light theme.
The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.