IconPicker
A compound component for selecting icons from Lucide React with search, preview, and optimized rendering.
Installation
CLI
Dependencies
This component requires the following npm packages:
Registry Dependencies
This component also requires: button, dialog, input, utils
Usage
IconPicker is a compound component for selecting icons from the Lucide React icon library. It provides a searchable dialog interface with real-time preview and optimized rendering for large icon lists.
The component uses a compound component pattern, allowing you to customize the trigger, content, and preview independently. It supports both controlled and uncontrolled usage patterns.
Examples
Controlled State
Control both the icon value and dialog open state for more advanced use cases.
With Custom Color
Set a custom background color for the icon preview in the dialog.
Custom Trigger
Use any element as a trigger by wrapping it with IconPickerTrigger.
API Reference
IconPicker Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The controlled value of the selected icon name (kebab-case). |
defaultValue | string | "folder-kanban" | The default value of the selected icon name. |
onValueChange | (value: string) => void | - | Callback fired when the icon selection changes. |
open | boolean | - | The controlled open state of the dialog. |
defaultOpen | boolean | false | The default open state of the dialog. |
onOpenChange | (open: boolean) => void | - | Callback fired when the dialog open state changes. |
color | string | - | Background color for the icon preview (CSS color value). |
disabled | boolean | - | Whether the icon picker is disabled. |
children* | ReactNode | - | The trigger element and dialog content. |
IconPickerTrigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | The trigger element (usually a Button). |
...props | DialogTriggerProps | - | All DialogTrigger props are supported. Note: asChild is always set to true internally. |
IconPickerContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Select Icon" | The title of the dialog. |
description | string | "Choose any icon from Lucide." | The description text shown in the dialog header. |
IconPickerPreview Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 24 | The size of the preview icon in pixels. |