A simple icon picker component that allows you to pick an icon from a list of lucide icons.
Usage
Import the IconPicker component and use it in your project.
Installation
pnpm dlx shadcn@latest add "https://icon-picker.alan-courtois.fr/r/icon-picker"
Example
Use the IconPicker component in your project.
Controlled
Selected icon: None
Default
Custom Trigger
Custom Icons List
Props
The IconPicker component has the following props:
| 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. |