Skip to main content

Icon

Icons are graphic representations of concepts and actions that help establish context and purpose for other user interface elements.

Code documentation

Web

A searchable list of icons is available on the icon library page.

Anatomy

The icon component is made up of two elements.

  1. Container
  2. Icon
Anatomy diagram numbering two elements of an 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.

Five icon sizes are compared left-to-right: extra small, small, medium, large, and extra large.

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.