<IconPicker value={iconName} onValueChange={setIconName} />The value is a Phosphor export name like "FirstAidKitIcon", which is what
Icon renders. The grid caps at 120 swatches — the full set is
around 1,500 and is not virtualised — so the rest is reached by searching.
API
| Prop | Type | Default | |
|---|---|---|---|
clearLabel | string | "Clear selection" | |
closeOnSelect | boolean | true | Keep the popover open after a pick, for rapid-compare flows. |
defaultValue | PhosphorIconName | (string & {}) | null | null | Initial selection for uncontrolled usage. |
emptyLabel | string | "No icons found" | |
loading | boolean | — | Show a leading spinner and mark the button aria-busy, disabling
interaction while an async action is in flight (e.g. a form submit). |
moreLabel | ((count: number) => string) | — | |
name | string | — | When set, renders a hidden input so plain form posts include the icon. |
onValueChange | ((name: string | null) => void) | — | |
placeholder | string | "Select an icon" | |
searchPlaceholder | string | "Search icons…" | |
shape | "default" | "pill" | — | pill forces a fully rounded button; default follows the theme's
--radius, so it changes with the brand. |
size | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | — | Height and horizontal padding. The icon-* set is square, for a button
whose entire content is one icon — give those an aria-label. |
value | PhosphorIconName | (string & {}) | null | — | Controlled selection; omit to let the picker manage its own state. |
variant | "brand" | "default" | "destructive" | "ghost" | "highlight" | "link" | "outline" | "primary" | "secondary" | — | Weight of the action. default is the one thing the page exists for, at
most one per view; secondary an equal-weight alternative; outline
for toolbars and anything that repeats in a row; ghost inside dense
surfaces; destructive for what cannot be undone; link for an action
that reads as navigation. |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
className | string | ((state: ButtonState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
focusableWhenDisabled | boolean | — | Whether the button should be focusable when disabled. |
nativeButton | boolean | — | Whether the component renders a native <button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>). |
render | ComponentRenderFn<HTMLProps, ButtonState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: icon-picker/components/icon-picker.tsx.