Shadcn Icon Button

A button component that displays only an icon, providing a compact and visually clean way to trigger actions without text labels.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function IconButtonDemo() {
  return (
    <Button size="icon" variant="default">
      <Star className="h-4 w-4" />
    </Button>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add button

Usage

import { Button } from "@/components/ui/button"

<Button size="icon" variant="default">
  <Star className="h-4 w-4" />
</Button>

Examples

Icon Button Colors

Icon buttons with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different actions and provide visual feedback.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function IconButtonColors() {
  return (
    <div className="flex gap-4">
      <Button size="icon" variant="default">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="secondary">
        <Star className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="bg-blue-500 text-white hover:bg-blue-600 focus-visible:ring-blue-500/20"
      >
        <Star className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="bg-green-500 text-white hover:bg-green-600 focus-visible:ring-green-500/20"
      >
        <Star className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="bg-yellow-500 text-white hover:bg-yellow-600 focus-visible:ring-yellow-500/20"
      >
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="destructive">
        <Star className="h-4 w-4" />
      </Button>
    </div>
  )
}

Icon Button Sizes

Icon buttons in different sizes (extra small, small, medium, large, extra large) to accommodate various layout requirements and provide flexibility in design.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function IconButtonSizes() {
  return (
    <div className="flex items-end gap-4">
      <Button size="icon" className="h-6 w-6">
        <Star className="h-3.5 w-3.5" />
      </Button>
      <Button size="icon" className="h-8 w-8">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" className="h-10 w-10">
        <Star className="h-5 w-5" />
      </Button>
      <Button size="icon" className="h-12 w-12">
        <Star className="h-6 w-6" />
      </Button>
    </div>
  )
}

Icon Button Variants

Icon buttons with different visual styles including ghost, outline, solid, and gradient variants, allowing you to choose the appearance that best fits your design system.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function IconButtonVariants() {
  return (
    <div className="flex gap-4">
      <Button size="icon" variant="ghost">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="outline">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="default">
        <Star className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 focus-visible:ring-blue-500/20"
      >
        <Star className="h-4 w-4" />
      </Button>
    </div>
  )
}

Rounded Icon Button

Circular icon buttons with rounded-full styling that create a more modern and visually appealing appearance, perfect for floating action buttons and modern UI designs.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function RoundedIconButton() {
  return (
    <div className="flex gap-4">
      <Button size="icon" variant="ghost" className="rounded-full">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="outline" className="rounded-full">
        <Star className="h-4 w-4" />
      </Button>
      <Button size="icon" variant="default" className="rounded-full">
        <Star className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="rounded-full bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 focus-visible:ring-blue-500/20"
      >
        <Star className="h-4 w-4" />
      </Button>
    </div>
  )
}

Custom Icon Button

Icon buttons with custom colors and styling that match specific brand guidelines or design requirements, demonstrating how to customize the appearance for social media icons and branded elements.

import { Dribbble, Facebook, Github } from "lucide-react"

import { Button } from "@/components/ui/button"

export function CustomIconButton() {
  return (
    <div className="flex gap-4">
      <Button
        size="icon"
        className="border-[#24292e] bg-[#24292e] text-white hover:bg-[#24292e]/90 hover:brightness-110 focus-visible:ring-[#24292e]/20"
      >
        <Github className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="border-[#ea4c89] bg-[#ea4c89] text-white hover:bg-[#ea4c89]/90 hover:brightness-110 focus-visible:ring-[#ea4c89]/20"
      >
        <Dribbble className="h-4 w-4" />
      </Button>
      <Button
        size="icon"
        className="border-[#1877F2] bg-[#1877F2] text-white hover:bg-[#1877F2]/90 hover:brightness-110 focus-visible:ring-[#1877F2]/20"
      >
        <Facebook className="h-4 w-4" />
      </Button>
    </div>
  )
}

Icon Button as Link

Icon buttons that function as links using the asChild prop, allowing you to create icon buttons that navigate to different pages or sections while maintaining button-like styling.

import { Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export function IconButtonAsLink() {
  return (
    <div className="flex gap-4">
      <Button size="icon" variant="ghost" asChild>
        <a href="#">
          <Star className="h-4 w-4" />
        </a>
      </Button>
      <Button size="icon" variant="outline" asChild>
        <a href="#">
          <Star className="h-4 w-4" />
        </a>
      </Button>
      <Button size="icon" variant="default" asChild>
        <a href="#">
          <Star className="h-4 w-4" />
        </a>
      </Button>
      <Button
        size="icon"
        className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 focus-visible:ring-blue-500/20"
        asChild
      >
        <a href="#">
          <Star className="h-4 w-4" />
        </a>
      </Button>
    </div>
  )
}

Props

The icon button component is built using the Button component with size="icon" and accepts the following props:

Button (Icon Button)

Prop	Type	Default	Description
`size`	`"icon"`	-	Set to "icon" to create a square icon button
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	The visual style variant of the button
`className`	`string`	-	Additional CSS classes to apply to the button
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the button
`asChild`	`boolean`	`false`	When true, merges props with the child element (useful for links)
`onClick`	`(event: React.MouseEvent<HTMLButtonElement>) => void`	-	Event handler called when the button is clicked
`children`	`ReactNode`	-	The icon element to display inside the button

Accessibility

The icon button component follows accessibility best practices:

Supports keyboard navigation (Enter and Space keys)
Works with screen readers through proper ARIA attributes
Focus states are clearly visible for keyboard users
Disabled state is properly communicated to assistive technologies
When used as a link, maintains proper link semantics

Best Practices

Use icon buttons for actions that are clearly understood through their icons
Provide tooltips or aria-labels for icon-only buttons to improve accessibility
Use consistent icon sizes within your design system
Consider using rounded-full buttons for floating action buttons
Use appropriate color variants to indicate different action types
Ensure sufficient contrast between icon and background colors
Test keyboard navigation and screen reader compatibility
Use asChild prop when you need the button to function as a link

The icon button component provides a clean and accessible way to create compact action buttons. It's ideal for toolbars, navigation menus, action panels, and any interface where space is limited or where icons are more intuitive than text labels.

Gallery Image

On This Page

Installation Usage Examples Icon Button Colors Icon Button Sizes Icon Button Variants Rounded Icon Button Custom Icon Button Icon Button as Link Props Button (Icon Button)Accessibility Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.