Also known as:
Breadcrumb buttonButtonIcon

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
  • Breadcrumb icon buttons use link elements to navigate and must show a destination as text on hover/focus

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.

  • Icon buttons use a button element (not a link element and no role="button"):

    • All 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?

  • If there's any doubt about comprehension, a tooltip must be used on hover/focus of the icon button.

  • 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.

Breadcrumb icon button

A breadcrumb icon button uses a link element instead of a button and navigates to another page.

Interaction guidelines

Icon colorDisabledDefault/InactiveHover/FocusActive/Pressed
Ink30% opacity50% opacity70% opacity100% opacity
White30% opacity50% opacity70% opacity100% opacity
Ocean30% opacity50% opacity70% opacity100% opacity

In CSS, “Default/Inactive” maps to initial style, “Hover/Focus” to :hover and :focus, and “Active/Pressed” to :active.

When to use

  • Default icon button:
    • 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

  • When there's enough space, use a button instead.

See also

External links

Here are some examples of existing design systems or references: