Button Icon - Bellhop Design System

When to use

Use icon buttons for common actions where icons are universally recognized.

Compact Actions

Space-constrained interfaces like toolbars or mobile layouts.

Quick Actions

Edit, delete, share, or other frequent operations.

Icon Recognition

Actions where icons are more recognizable than text labels.

When not to use

For actions that need text labels—use regular buttons
When icon meaning isn't universally clear—add visible label
For primary actions—use full buttons with text
In contexts where accessibility is difficult

Hierarchies

Four visual hierarchies for different emphasis levels.

Primary - High emphasis actions

Secondary - Medium emphasis

Tertiary - Low emphasis

Quaternary - Minimal emphasis

Best Practices

Follow these guidelines when using icon buttons.

Do

Use universally recognized icons
Add tooltips to clarify actions
Use appropriate hierarchy for emphasis
Maintain consistent sizing in toolbars
Provide sufficient touch target size (44x44px minimum)

Don't

Don't use obscure or ambiguous icons
Don't rely solely on color to convey meaning
Don't use without tooltips for less common actions
Don't make buttons too small for touch interaction
Don't use for primary calls-to-action (use text buttons)

Availability

Button Icon is available across all our supported frameworks.

React

Available View in Storybook →

Angular

Available View in Storybook →

Web Components

Available View in Storybook →