Icon picker

A control for choosing one Lucide icon. The value is the icon’s kebab-case name, such as map or a-arrow-down. The trigger and search field match Input: no border, a wash unless inline, and a lightness shift on hover and focus. A highlighted icon shows the accent dot. The trigger value is Regular and secondary text is Light.

map

Anatomy

<UiIconPickerRoot v-model:value="icon">
  <UiIconPickerTrigger>
    <UiIconPickerValue />
  </UiIconPickerTrigger>
  <UiIconPickerPortal>
    <UiIconPickerPositioner>
      <UiIconPickerPopup>
        <UiIconPickerInput />
        <UiIconPickerClear />
        <UiIconPickerGrid />
        <UiIconPickerEmpty />
      </UiIconPickerPopup>
    </UiIconPickerPositioner>
  </UiIconPickerPortal>
</UiIconPickerRoot>

UiIconPickerGlyph draws a name on its own, outside the picker.

Parts

Root — owns value / open and the Lucide catalog. value is a kebab-case name or null.
Trigger — opens the popup. Arrow Down, Enter, and Space open it. The default slot is the current icon, or a dashed mark when empty.
Value — the current icon, or the word Icon when nothing is selected.
Glyph — the SVG for a name. Safe to use without the rest of the picker.
Portal / Positioner / Popup — a dialog anchored to the trigger. Esc and an outside click close it. No drop-shadow.
Input — filters names. Arrow keys move through the grid. Enter selects.
Clear — sets the value to null. Hidden when nothing is selected.
Grid / Item — the matching icons. The grid only paints the rows in view.
Empty — shown when the filter matches nothing.

Aliases are included in search, and the grid shows the current name.

API reference

Root

Groups the parts. Renders a <div>.

Prop	Type	Default	Description
`defaultValue`	`string \| null`	`null`	Uncontrolled icon name.
`value`	`string \| null`	—	Controlled icon name (`v-model:value`).
`defaultOpen`	`boolean`	`false`	Uncontrolled popup.
`open`	`boolean`	—	Controlled popup (`v-model:open`).
`disabled`	`boolean`	`false`	Ignore interaction. Sets `data-disabled`.

Event	Type	Description
`@update:value`	`(value: string \| null) => void`	The chosen name changed.
`@update:open`	`(open: boolean) => void`	The popup opened or closed.

Trigger

Button that opens the popup. Renders a <button>.

Attribute	Description
`data-popup-open`	Present when the popup is open.
`data-placeholder`	Present when nothing is selected.

Input

Filter field. Renders an <input>.

Prop	Type	Default	Description
`placeholder`	`string`	`Search icons`	Placeholder text.

Glyph

Draws one icon. Renders a <span> containing the SVG. Pass name, or leave it empty inside Root to draw the current value.

Prop	Type	Default	Description
`name`	`string \| null`	current value	Lucide name to draw.

Positioner

Pins the popup to the trigger. Flips above the trigger when there is no room below.

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Gap between the trigger and the popup.