Overview
IconPicker provides a searchable, categorized interface for selecting Font Awesome icons. Uses react-window for smooth virtualized rendering of large icon sets.
Key Features
- Search across 200+ curated Font Awesome icons
- Category tabs for organized browsing
- Virtualized grid for smooth scrolling performance
- Recent icons stored locally for quick access
Examples
Interactive Demo
Click the icon button to open the picker. Search or browse categories to find icons.
Selected Icon
faRocket
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Current icon name (e.g., faRocket) |
onChange | (icon: string) => void | required | Callback when icon is selected |
showRecent | boolean | true | Show recently used icons section |
disabled | boolean | false | Disable icon picker interactions |
Usage
import { IconPicker } from '@/ui/components';
// Basic usage
const [icon, setIcon] = useState('faRocket');
<IconPicker
value={icon}
onChange={setIcon}
/>
// Without recent icons
<IconPicker
value={icon}
onChange={setIcon}
showRecent={false}
/>
// Disabled state
<IconPicker
value={icon}
onChange={setIcon}
disabled
/>