IconPicker

Storybook

Go to Story

IconPicker()

function IconPicker(__namedParameters): Element;

Defined in: src/components/IconPicker/IconPicker.tsx:76

Icon picker component with popover interface.

Provides a button trigger that opens a popover containing an IconSearchGrid. Supports both controlled and uncontrolled usage patterns.

Parameters

Parameter	Type
__namedParameters	IconPickerProps

Returns

Element

Examples

// Uncontrolled with default value
<IconPicker
  defaultValue="home"
  onValueChange={(icon) => console.log('Selected:', icon)}
/>

// Controlled component
<IconPicker
  value={selectedIcon}
  onValueChange={setSelectedIcon}
  triggerPlaceholder="Choose an icon"
/>

// Custom trigger
<IconPicker onValueChange={handleSelect}>
  <Button variant="ghost">
    <Plus className="size-4" />
    Add Icon
  </Button>
</IconPicker>

// With custom search and icons
<IconPicker
  icons={brandIcons}
  searchPlaceholder="Search brand icons..."
  columns={6}
  onValueChange={setBrandIcon}
/>