Skip to content

Icon Button

Icon buttons render an icon-only action without a visible text label. Use them sparingly where space is constrained and the icon is unambiguous.

Ready to use

Design Develop Accessibility

Icon Buttons are circular interactive elements that display a single icon to trigger an action or represent a state. They’re used when an action can be represented visually — Close, Play, Next — without the need for text. The component is fully responsive and intentionally designed to be used across all viewports, with no alternative versions required.

Anatomy

Section titled “Anatomy”
  1. Container
  2. Icon

When to use it

Section titled “When to use it”

Use Icon Buttons when:

  • The action is simple and universally recognisable (play, pause, close, next, previous).
  • Text would crowd the surface but the meaning of the icon is clear in context.
  • The control sits in regular page chrome and a circular affordance fits the layout.

Avoid Icon Buttons when:

  • A label is needed for clarity — use a standard Button instead.
  • The icon’s meaning is ambiguous and there’s no tooltip to clarify it.
  • The action is play/pause inside a media surface — reach for the Media Button instead.

Properties

Section titled “Properties”

Type

Two visual styles: Filled (solid background, no border) and Outlined (transparent background with a 1px border). Pick filled for emphasis on neutral surfaces, outlined when the button should sit lighter inside a busy layout.

Size

Four sizes — XS (22×22), SM (32×32), MD (40×40), and LG (80×80) — with matching icon glyphs. Choose the smallest size that still clears the 24×24 minimum touch area; LG suits hero or focal controls.

State

Rested, Hover, Active, Focus, and Disabled. Hover and focus styles are intentionally distinct so keyboard users get a clear ring; disabled state mutes both fill and icon.

Contrast

A boolean that flips the colour set for use over dark imagery or high-contrast surfaces. Use the contrast variant when the surrounding scheme calls for inverted foreground colours.

Background

A boolean that toggles the filled background on or off. Turning it off leaves a transparent button that relies on the icon alone — useful in compact toolbars where the fill would feel heavy.

Platform considerations

Section titled “Platform considerations”

Desktop

Pointer accuracy is high, but keep the visible size at MD or above for primary actions so the target stays comfortable to click.

Tablet

Touch is mixed with pointer here. Don’t drop below SM and respect the 44×44 px recommended touch area for any control the user repeats.

Mobile

Mobile is touch-first. Aim for MD or LG for any button the user reaches for repeatedly, and keep generous spacing around adjacent buttons.

Best practices

Section titled “Best practices”

Treat Icon Buttons as glyph-only — readability and a clear accessible name carry all the meaning.

Do

Always provide an ARIA label that names the action (“Close”, “Play video”), keep hover and focus styles visually distinct so keyboard users get clear feedback, and respect the minimum 24×24 px touch area (44×44 recommended).

Don't

Don’t reach for an Icon Button when the icon’s meaning depends on context — pair it with a tooltip or use a standard button instead. Don’t use it for navigation unless the glyph reads unambiguously, and don’t fold focus and hover into one shared state.

Content guidelines

Section titled “Content guidelines”

Icon Buttons are icon-only, so the accessible name does all the work. Write a short verb phrase that describes the action from the user’s perspective — “Close”, “Play video”, “Next slide” — not the icon name. Update the label when the action toggles (an aria-label that says “Play” while the icon is showing “pause” is worse than no label at all). Keep wording consistent across the product so screen-reader users recognise familiar actions.