IconPicker
Choose and search icons from the default palette or a custom set.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Controlled selected icon name. |
defaultValue | string | null | null | Initial uncontrolled selection. |
onChange | (name: string | null, option: IconPickerOption | null) => void | — | Called with the selected ID and resolved option. |
icons | IconPickerOption[] | DEFAULT_ICON_OPTIONS | Palette to choose from. Spread DEFAULT_ICON_OPTIONS in to extend rather than replace. |
filter | (option: IconPickerOption, query: string) => boolean | — | Replaces the built-in name/label/keyword substring match. |
color | ColorToken | string | "fg" | Color applied to the trigger's and the grid's icons. |
placeholder | string | "Search icons…" | Search input placeholder. |
emptyMessage | string | "No icons found" | Shown when a search matches nothing. |
clearable | boolean | true | Lets the trigger clear back to no icon. |
flat | boolean | false | Hides the sticky section headers and renders one flat grid. |
disabled | boolean | — | Prevents interaction. |
size | "sm" | "md" | "md" | Trigger size. |
align | "start" | "end" | "start" | Popover alignment. |
IconPickerOption
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Stable identifier used by value and onChange. |
icon | IconComponent | — | A Tabler/Lucide-style icon or your own SVG component. |
label | string | name | Shown in the panel's name readout and matched by search. |
keywords | string[] | — | Extra terms matched by search, beyond name/label. |
category | string | — | Section heading for the icon. Options without a section appear in one unlabeled group. |
Specimens
Basic
The default palette: DEFAULT_ICON_OPTIONS, ~60 general-purpose glyphs in ten sections (Files, Labels, Media, Development, Business, …). Search filters by label, id, keywords and section name; arrow keys move a cell or a row at a time, and the footer names whichever glyph is under the cursor.
Custom icons
Pass icons to swap in your own set. Each option is { name, icon, label?, keywords?, category? }; icon takes a Tabler component, a Lucide component, or your own SVG, the same as every other icon prop in Onset. Spread DEFAULT_ICON_OPTIONS in first to extend the built-ins instead of replacing them, and give the additions their own category so they land in their own section rather than in the unlabeled one at the top.
Flat grid
flat drops the section headers. Use it for a short palette, where the headers cost more vertical space than the grouping buys back.
Folder/tag organizer
A typical use: an icon on a tag or folder row, sized down and not clearable since the row always needs one.
Import
import { IconPicker, DEFAULT_ICON_OPTIONS } from "@solarius/onset";