Icon Button

Icon buttons are buttons without visible text labels by default.

Need to know

Default icon buttons perform actions using action icons without labels.
Use a Primary icon button when it's the most important action to take.
Use a Destructive icon button when the action will result in data loss, cannot be undone, or otherwise have significant consequences.
Breadcrumb icon buttons use link elements to navigate and must show a destination as text on hover/focus.

Visuals

UI Kit

Examples

To keep in mind

A default icon button indicates to a user that they can perform an inline action on this page, such as:

Apply an action to an object, e.g. save, delete, add an item, undo, create a new item.
Trigger a new element to appear on the page e.g. toggle additional information, open a modal.

Other considerations:

Icon buttons use a button element (not a link element and no role="button").
All icon buttons have an aria-label to describe the action to people using assistive technologies, such as screen readers:
- No more than 2 to 3 words long.
- Use verbs first; use only verbs where possible e.g. “Save”.
- Avoid unnecessary words and articles, such as “the” or “a”.
- Use sentence case.
New icons used as icon buttons need to be user tested to test comprehension—can the user identify the action indicated by the icon?
Icons used in icon buttons are, by default, 20px in size (minimum) and can be scaled to larger sizes if it contextually makes sense.
Icon buttons have a minimum touch zone of 48px.
RTL: flip the direction of arrow icons when the user is using a right-to-left language.

Icon buttons with Tooltips

If there's any doubt about comprehension for an Icon Button with no text label, a Tooltip must be used on hover and focus of the Icon Button. Buttons natively receive keyboard focus so there's no need to add a tabindex attribute.

In a Tooltip used to describe the Icon Button's action (the "tool's tip"), use 1 noun or noun phrase to label the action that will occur by activating the button.

Breadcrumb icon button

A breadcrumb icon button is an exceptional case that uses a link element instead of a button because it navigates to another page.

Interaction guidelines

Disabled Icon Buttons use 30% opacity on the component itself (not, for example, the inner icon) as described in the Interaction states guidelines.

When to use and when not to use

When to use

Use an icon button when a user can perform an inline action on this page and there's no room for a default button. Icon buttons are often used when there are 2 or 3 adjacent icons buttons that perform actions on a single item presented in a row.

When not to use

To display icons that do not have actions associated with them, use the Icon component.
To show a Tooltip or Popover on focus and hover without any button action, use an Icon component instead.
Avoid using more than 1 icon button in a table row.
When there's enough space, use a button instead.

External links

Here are some examples of existing design systems or references:

WCAG 2.1 Target Size.