Skip to main content

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.

Two icon buttons that are displayed together in a row.

Dos and Don’ts

Do
  • Use it when an icon button on its own can clearly indicate the action.
Don't
  • Don’t use if an icon on its own doesn’t clearly indicate the action, in the case use a standard Button.

Anatomy

Anatomy of an icon button.
  1. Icon: Icon that visually represents the action.

Variations

Primary

Primary variant of an icon button.

Secondary

Secondary variant of an icon button.

Outline

Outline variant of an icon button.

Ghost

Ghost variant of an icon button.

Ghost secondary

Ghost secondary variant of an icon button.

Inverse

Inverse variant of an icon button.

Ghost Inverse

Ghost Inverse variant of an icon button.

Sizes

Outlines the Icon Button sizes that are available, and where they should be used across our products.

SizeIcon sizeContainer sizeNotes
Large28px56px-
Medium24px48pxMedium is the default size of the component and should be used whenever possible.
Small24px40px-
XSmall20px32px-

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.

A single primary icon button

Medium

The secondary and inverse icon buttons are of less importance and should have less prominence.

Primary variant of an icon button.
Inverse variant of an icon button.

Low

The outline, ghost, ghost tertiary and ghost inverse Icon Buttons should have the lowest prominence.

Outline variant of an icon button.
Ghost variant of an icon button.
Ghost secondary variant of an icon button.
Ghost Inverse variant of an icon button.

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.

Two icon buttons that are displayed together in a row.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Default state of an icon button.

Hover

An icon button that is hovered.

Active

An icon button that is active.

Focus

An icon button that is focused.

Disabled

An icon button that is disabled.

Loading

An icon button that is loading.

Example

Outlines the atomic level interactive elements for the component.

A hamburger menu icon button.
A close icon button.
Info and heart icon buttons.

Resources

Stable
Stable
Beta
Stable
Stable
iOS JustUI [UI Kit]
Stable
iOS PIE [SwiftUI]
Stable
Android PIE [Compose & Views]
Stable