Icon Button

UI Components

A button that displays only an icon without visible text, used for common actions where the icon meaning is universally understood.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Icon Button coming soon.

How It Works in Apps/Websites

Icon buttons use recognizable icons instead of text to save space and provide quick access to actions. They're square or circular, containing a single icon. Common examples: close (X), menu (hamburger), settings (gear), share, like (heart), delete (trash). Always include tooltip or aria-label for accessibility.

How AI Interprets This Term

When you say 'icon button', AI expects: a square or circular button (32-48px), containing only an icon centered. May have subtle background or be transparent. Hover state shows background tint or tooltip. Common icons: search (magnifying glass), settings (gear), close (X), menu (hamburger).

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a circular close button with an X icon

Detailed

Design a toolbar with icon buttons: Home, Search, Notifications, Settings, Profile. Each is 40px square, 24px icon size, gray icons (#6b7280), hover background #f3f4f6, active background #e5e7eb. Include tooltip on hover.

Comparative

Show icon button variations: ghost (no background), outlined (border), filled (solid background)

Compare With

Related or contrasting terms to help you understand the differences.

primary button fab link button

Variants & States

Variants

outlined icon buttonfilled icon buttonghost icon buttoncircular icon button

States

defaulthoveractivedisabledtoggled

Usage Guidelines

When to Use

•Toolbars and action bars
•Close/dismiss buttons
•Social actions (like, share)
•When space is limited

When NOT to Use

•Primary actions (use labeled button)
•Unclear icon meaning
•When text clarification is needed