Icon Picker

ProNew

A searchable grid of icons you provide, with name and tag search, a result count announcement, two-dimensional arrow-key navigation, a show-more limit for big sets and a popover version.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/icon-picker

Usage

You pass the icons, so the set can be Lucide, Phosphor, your own SVGs or a mix, and only the icons you import are bundled. Store the name string, not the component.

Props

Prop	Type	Default	Description
`icons`	`{ name, icon, tags? }[]`	-	The set. `name` is the value.
`value` / `onChange`	`string \| null` / `(name) => void`	-	The chosen icon.
`columns`	`number`	`8`	Per row; Up and Down move by this.
`pageSize`	`number`	`96`	Shown first; a button adds more.
`label`	`string`	`Icon`	Name of the group and the search field.

Accessibility

A radiogroup of icon buttons with aria-checked; the group has one tab stop (the selected icon or the first). Arrow keys move in two dimensions (Left and Right flip in right-to-left pages), Home and End go to the row ends, Ctrl+Home and Ctrl+End to the first and last icon, Enter or Space chooses.
Every icon has its name as aria-label and tooltip; the SVG is aria-hidden. The selected icon also has a filled background, not only a color change.
The search field is a searchbox with a name; the count ("12 icons", "No icons match.") is a polite live region. Arrow Down in the search field moves into the grid.
The popover version names its trigger with the current icon ("Project icon: heart"), traps focus while open and returns it to the trigger.

Testing

The component ships with a Testing Library test (icon-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/icon-picker

Usage

You pass the icons, so the set can be Lucide, Phosphor, your own SVGs or a mix, and only the icons you import are bundled. Store the name string, not the component.

Props

Prop	Type	Default	Description
`icons`	`{ name, icon, tags? }[]`	-	The set. `name` is the value.
`value` / `onChange`	`string \| null` / `(name) => void`	-	The chosen icon.
`columns`	`number`	`8`	Per row; Up and Down move by this.
`pageSize`	`number`	`96`	Shown first; a button adds more.
`label`	`string`	`Icon`	Name of the group and the search field.

Accessibility

A radiogroup of icon buttons with aria-checked; the group has one tab stop (the selected icon or the first). Arrow keys move in two dimensions (Left and Right flip in right-to-left pages), Home and End go to the row ends, Ctrl+Home and Ctrl+End to the first and last icon, Enter or Space chooses.
Every icon has its name as aria-label and tooltip; the SVG is aria-hidden. The selected icon also has a filled background, not only a color change.
The search field is a searchbox with a name; the count ("12 icons", "No icons match.") is a polite live region. Arrow Down in the search field moves into the grid.
The popover version names its trigger with the current icon ("Project icon: heart"), traps focus while open and returns it to the trigger.

Testing

The component ships with a Testing Library test (icon-picker.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.