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
aria-labelto describe the action to people using assistive technologies, such as screen readers:
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.
A breadcrumb icon button uses a link element instead of a button and navigates to another page.
|Ink||30% opacity||50% opacity||70% opacity||100% opacity|
|White||30% opacity||50% opacity||70% opacity||100% opacity|
|Ocean||30% opacity||50% opacity||70% opacity||100% opacity|
In CSS, “Default/Inactive” maps to
initial style, “Hover/Focus” to
:focus, and “Active/Pressed” to
Here are some examples of existing design systems or references: