- Use it when an icon button on its own can clearly indicate the action.
Icon Button
An icon button uses icons as its primary visual element, representing actions or functions in a compact and visually appealing way.
Overview
The purpose of icon buttons is to offer a visually engaging and efficient way for users to interact with various functions or actions within an interface. They allow for clear and concise communication of functionality, particularly in situations where text may be less practical or necessary.
Icon buttons feature simple and recognizable icons that represent a specific action or functionality. They are often used in toolbars, navigation menus, or interactive elements where space is limited or a visual representation is more intuitive than text.
Dos and Don’ts
- Don’t use if an icon on its own doesn’t clearly indicate the action, in the case use a standard Button.
Anatomy
- Icon: Icon that visually represents the action.
Variations
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 a Icon Button pairing, the key is to maintain consistency by all be the same type, with a 8px spacing between.
Interactive states
Outlines the atomic level interactive elements for the component.
Example
Outlines the atomic level interactive elements for the component.
Resources
| Available | |
| Available | |
| Beta | |
| Available | |
| Available | |
 iOS JustUI [UI Kit] | Available |
 iOS PIE [SwiftUI] | Available |
 Android [XML views] | Alpha |
 Android [Jetpack compose] | Available |
