A sleek and customizable icon picker component for React, built with shadcn/ui and Lucide Icons.
- 🎨 Modern and responsive UI
- 🔍 Real-time icon search
- ⚡️ Progressive icon loading
- 🎯 Full Lucide icons support
- 🌗 Dark mode compatible
- 🎛️ Highly customizable
npx shadcn@latest add "https://icon-picker.alan-courtois.fr/r/icon-picker"pnpm dlx shadcn@latest add "https://icon-picker.alan-courtois.fr/r/icon-picker"npx shadcn@latest add "https://icon-picker.alan-courtois.fr/r/icon-picker"bunx shadcn@latest add "https://icon-picker.alan-courtois.fr/r/icon-picker"import { IconPicker } from "@/components/ui/iconPicker";
export default function Home() {
return <IconPicker />;
}| Prop | Type | Default | Description |
|---|---|---|---|
value |
IconName |
- | The controlled value of the selected icon |
defaultValue |
IconName |
- | The default value of the selected icon |
onValueChange |
(value: IconName) => void |
- | Callback invoked when an icon is selected |
open |
boolean |
- | Controlled open state of the picker |
defaultOpen |
boolean |
false |
Default open state of the picker |
onOpenChange |
(open: boolean) => void |
- | Callback invoked when the open state changes |
children |
ReactNode |
- | The trigger element to open the icon picker |
searchable |
boolean |
true |
Whether the icon picker is searchable |
searchPlaceholder |
string |
"Search for an icon..." | The placeholder for the search input |
triggerPlaceholder |
string |
"Select an icon" | The text displayed on the default trigger button when no icon is selected |
iconsList |
IconList |
all lucide icons | The list of icons to display in the picker |
categorized |
boolean |
true |
Display icons in categories and add categories buttons to scroll to the desired category |
modal |
boolean |
false |
Whether the icon picker is being rendered in a modal |
git clone https://github.com/alan-crts/shadcn-iconpicker.gitnpm installnpm run devThe project includes an automated script to update the icons data from the latest Lucide Icons repository. This ensures that the icon picker always has access to the most recent icons and their metadata.
To manually update the icons data, run the generation script:
node script/generate.jsThis script will:
- Clone the latest Lucide Icons repository
- Extract icon names, categories, and tags from the JSON metadata files
- Generate a new
icons-data.tsfile with the updated information - Clean up temporary files
The icons data is automatically updated through GitHub Actions or similar CI/CD workflows. This ensures that:
- The repository stays up-to-date with the latest Lucide Icons
- Installation commands always work with the most recent icon set
- Users get the latest icons without manual intervention
The script is designed to be run in automated environments and will:
- Fetch the latest Lucide Icons repository
- Parse all icon metadata files
- Update the TypeScript data file
- Commit changes if run in a CI environment
- Keep the registry files synchronized with the latest icon data
The script updates the following data for each icon:
- Name: The icon identifier
- Categories: Icon categorization (e.g., "interface", "media", "communication")
- Tags: Searchable tags for better discoverability
This ensures that the icon picker's search functionality and categorization remain accurate and up-to-date with the Lucide Icons library.
MIT © Alan Courtois
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
