- Use an icon button when the icon is universally understood.
Icon Button
An icon button uses icons as its primary visual element, representing actions or functions in a compact and visually appealing way.
Dos and Don'ts
- Don't use an icon button if the icon is ambiguous and does not clearly indicate the action. Use a standard Button instead.
Anatomy
- Icon: Icon that visually represents the action.
Variants
Sizes
Outlines the Icon Button sizes that are available, and where they should be used across our products.
| Size | Icon size | Container size | Notes |
|---|---|---|---|
| Large | 28px | 56px | - |
| Medium | 24px | 48px | Medium is the default size of the component and should be used whenever possible. |
| Small | 24px | 40px | - |
| XSmall | 20px | 32px | - |
Hierarchy
Icon buttons should follow a hierarchy of importance with regard to the action that is being committed by the user.
High
The primary icon button should be the single most important button in the hierarchy and therefore the most prominent. There should only be one high-priority Icon Button on the page.
Medium
The secondary and inverse icon buttons are of less importance and should have less prominence.
Low
The outline, ghost, ghost tertiary and ghost inverse Icon Buttons should have the lowest prominence.
Layout
Pairing
When using an Icon Button pairing, the key is to maintain consistency by all being the same type, with a 8px spacing between.
Interactive states
Outlines the atomic level interactive elements for the component.
Overrides
Icon colour override
Overrides are available in design and engineering for Secondary and Tertiary icon buttons which have orange icons. The default icon colour token $content-interactive-brand-solid (orange) can be replaced with $content-interactive-secondary-solid (black).
This can be helpful if you need to use a Secondary or Tertiary icon button but the orange icon doesn’t work with the surrounding UI.
Example
