Icon Button

Forms
Component

Buttons optimized for icon-only interactions. Uses the Button component with icon size variants for consistent styling and accessibility.

Built With

1 component

This block uses the following UI components from the design system:

Button

Preview

Icon buttons in different sizes

Variants

Icon buttons with different style variants

Sizes

Three icon button sizes available

icon-sm (32px)
icon (36px)
icon-lg (44px)

Common Use Cases

Typical icon button patterns

Toolbar actions

Close / Dismiss

Dismissible content

Navigation

Page 1 of 10

Header actions

Social actions

Disabled State

Disabled icon buttons

Props

Icon button uses Button component props with icon sizes

PropTypeDefaultDescription
size*'icon-sm' | 'icon' | 'icon-lg'—Icon button size variant
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link''primary'Button style variant
disabledbooleanfalseDisable the button
aria-label*string—Accessible label (required for icon-only buttons)
asChildbooleanfalseRender as child component

Size Reference

Icon button dimensions

// Button variants config
size: {
  'icon-sm': ['size-8', '[&_svg]:size-4'],   // 32x32px, 16px icon
  'icon':    ['size-9', '[&_svg]:size-4'],   // 36x36px, 16px icon
  'icon-lg': ['size-11', '[&_svg]:size-5'],  // 44x44px, 20px icon
}

Usage

Import and implementation example

import { Button } from '@/components/ui/button'
import { Plus, Edit, Trash2 } from 'lucide-react'

export default function Example() {
  return (
    <>
      {/* Basic icon button */}
      <Button size="icon" variant="inverse" aria-label="Add item">
        <Plus />
      </Button>

      {/* Different sizes */}
      <Button size="icon-sm" aria-label="Small">
        <Edit />
      </Button>
      <Button size="icon-lg" aria-label="Large">
        <Edit />
      </Button>

      {/* Destructive action */}
      <Button size="icon" variant="destructive" aria-label="Delete">
        <Trash2 />
      </Button>

      {/* As a link */}
      <Button size="icon" variant="ghost" asChild aria-label="Settings">
        <Link href="/settings">
          <Settings />
        </Link>
      </Button>
    </>
  )
}

Features

Built-in functionality

  • Three sizes: Small (32px), medium (36px), and large (44px)
  • All variants: Works with all Button variants
  • Square aspect: Perfect circle/square shape
  • Auto icon sizing: Icons automatically sized via CSS
  • Focus ring: Clear focus indicator for keyboard navigation
  • Polymorphic: Can render as link with asChild prop
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

aria-label is REQUIRED for icon-only buttonsSupports aria-pressed for toggle buttonsaria-disabled indicates disabled state

Keyboard Navigation

KeyAction
TabFocus the button
Enter / SpaceActivate the button

Notes

  • Always provide aria-label describing the action
  • Do not rely on icon alone to convey meaning
  • Consider using tooltip for additional context
  • Focus ring meets WCAG 2.4.7 requirements

Related Components

ButtonToggleDropdown MenuTooltip