Button Icon

🧭 When to Use an Icon Button

Use icon buttons when:

• The action is visually intuitive (e.g. search, close, favorite, edit)

• You need a compact control in a toolbar or table

• You’re emphasizing speed and minimalism

• The button is supplemental and doesn’t require a text label

Avoid icon-only buttons when the icon might be ambiguous without explanation—especially in unfamiliar contexts.

💡 Tip: If the icon’s meaning isn’t universally understood, pair it with a tooltip or use a text label instead.

🧩 Types (Visual Style)

Icon buttons mirror the core styles of regular buttons but are stripped down to icon-only or icon-dominant formats:

TypeDescriptionDefaultFilled background with icon—used for primary compact actionsSubtleMinimal background—ideal for low-emphasis actionsOutlineTransparent with border—great for utilitiesTransparentFully background-less, often used inline or in tables

📏 Sizes

• Small – For dense UIs, mobile apps, and tables

• Medium – Standard size for most desktop interfaces

• Large – Use when the icon button is a key feature or CTA (e.g., floating action buttons)

Size tokens ensure icons are centered and padded consistently across all layouts.

🧠 States (Intent/Function)

Like standard buttons, icon buttons can carry semantic meaning:

StateUsageDefaultNeutral actionSuccessIndicates confirmation or positive actionErrorDestructive or warning actionsInformationSecondary guidance or learn more-style interactionsWarningUse for caution, not critical failure

Apply semantic tokens through color or icon choice.

🔁 Interaction States

Icon buttons follow the same interaction logic as standard buttons:

StatePurposeDefaultNormal state, ready for interactionHoverBackground or icon color changes for feedbackFocusKeyboard-accessible state, always visible and WCAG compliantDisabledButton is present but not interactable or focusable (optional: aria-disabled)

♿ Accessibility Considerations

🔍 Design Accessibility

• Contrast: Ensure icons meet WCAG color contrast requirements (especially against transparent or subtle backgrounds).

• Tooltip pairing: For ambiguous icons, always provide a tooltip with a description on hover/focus.

• Size: Minimum touch target size should be 44x44px, even if the visual icon is smaller.

🧑‍💻 Code Accessibility (if implemented)

• Use aria-label or aria-labelledby to describe the icon’s function if no text is present.

• Prefer <button> elements with an <svg> or <img> inside.

• Add role="button" and tabindex="0" only if you're forced to use non-semantic elements (not recommended).

📌 Best Practices

• Don’t use too many icon buttons in a row—this can create confusion.

• If an icon button launches a destructive or irreversible action, consider using a confirmation dialog.

• For mobile and touch interfaces, always prioritize touch target size over visual elegance.