Icon Button

Learn how to use buttons with icons to enhance visual communication and user experience.

With Text

Icon Only

Usage

With Text

import { SearchIcon } from 'lucide-react';
 
// Left icon
<Button>
  <SearchIcon /> Search
</Button>
 
// Right icon
<Button>
  Next <ArrowRight />
</Button>
 
// Both icons
<Button>
  <ArrowLeft /> Navigate <ArrowRight />
</Button>

Icon Only

import { PlusIcon } from 'lucide-react';
 
<Button aria-label="Add item">
  <PlusIcon />
</Button>

Best Practices

1. Icon Usage:

   • Use clear, recognizable icons
   • Maintain consistent icon sizes
   • Ensure icons complement text
   • Use appropriate spacing

2. Accessibility:

   • Add aria-label for icon-only buttons
   • Maintain sufficient touch targets
   • Consider screen reader users
   • Provide tooltips when needed

3. Layout:

   • Align icons properly with text
   • Use consistent spacing
   • Consider button padding
   • Match icon size to text size

4. Context:

   • Use icons that match the action
   • Consider cultural implications
   • Maintain visual hierarchy
   • Use icons purposefully

Icon Libraries

React Button Pro works well with various icon libraries:

• Lucide React
• Heroicons
• React Icons
• Phosphor Icons
• Custom SVG icons

Examples

With Different Variants

<Button variant="outline">
  <EditIcon /> Edit
</Button>
 
<Button variant="ghost">
  <TrashIcon /> Delete
</Button>
 
<Button variant="light">
  <SaveIcon /> Save
</Button>

With Loading State

<Button isLoading>
  <SaveIcon /> Saving...
</Button>

With Custom Icon Styling

<Button>
  <Icon className="w-4 h-4 mr-2" /> Custom Style
</Button>