Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA searchable icon grid in a popover with two-dimensional arrow-key navigation, names read aloud and the choice shown in the button. Use this when people choose an icon for a folder, tag, channel or card.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it where an icon represents something a person creates: a space, a collection, a custom field, a shortcut. The grid is searched by icon name and navigated like a spreadsheet with the arrow keys.
Do not use it when there are fewer than ten icons. Use a toggle group of icon buttons.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The icon name (controlled). |
defaultValue | string | - | Initial icon name. |
onValueChange | (name: string) => void | - | Runs when an icon is picked. |
icons | Record<string, ComponentType> | 24 lucide icons | Name to component map; pass your own set. |
columns | number | 6 | Icons per row; arrow navigation follows it. |
disabled | boolean | false | Disables the button. |
listbox of options in a visual grid; Left/Right move one icon, Up/Down move by a whole row.calendar); the SVG is decorative.N icons politely as the filter changes.The pattern ships with a Testing Library test (icon-picker-grid.test.tsx) that covers two-dimensional arrow navigation, search filtering, the result count, picking with Enter and the button showing the icon.