Inspector Icon

About this component

Settings row that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.

Usage

The import and the props worth knowing about, in one place.

import { InspectorIcon } from "@/components/beste/component/inspector-icon";
import { HeartIcon, SparklesIcon, StarIcon } from "lucide-react";

const icons = [
  { name: "sparkles", icon: SparklesIcon },
  { name: "star", icon: StarIcon },
  { name: "heart", icon: HeartIcon, label: "Favourite" }, // label is what search and the tooltip use
];

<InspectorIcon label="Icon" icons={icons} defaultValue="star" />

<InspectorIcon
  label="Badge icon"
  icons={icons}
  value={iconName}
  onValueChange={setIconName}
  onOpenChange={(open) => console.log("palette open:", open)}
  clearable                 // adds a "Remove Icon" button at the foot of the palette
  columns={6}               // icons per row in the palette, 8 by default
  searchable                // on by default past sixteen icons
  emptyMessage="Nothing matches"
  tone="outline"            // "muted" (default) | "outline" | "ghost"
  size="sm"                 // "sm" | "default" | "lg"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`label`*	`string`	—	Label rendered on the left, inside the row.
`icon`	`LucideIcon`	—	Optional leading icon shown before the label.
`icons`	`InspectorIconChoice[]`	—	The icons on offer. Passing the set rather than importing one keeps this component out of the business of bundling an icon library — hand it the subset that belongs to whatever is being edited.
`value`	`string`	—	Controlled selection, by `name`. Pair it with `onValueChange`.
`defaultValue`	`string`	—	Initial selection in uncontrolled mode.
`onValueChange`	`(name: string) => void`	—
`onOpenChange`	`(open: boolean) => void`	—	Fires when the palette opens or closes.
`clearable`	`boolean`	—	Offer a clear button once something is selected.
`searchable`	`boolean`	—	Show the search field. Defaults to on once there are more than sixteen icons.
`columns`	`number`	`8`	Icons per row in the palette.
`emptyMessage`	`string`	—	Message shown when nothing matches the search.
`disabled`	`boolean`	—	Block interaction and dim the row.
`tone`	`"muted" \| "outline" \| "ghost"`	`"muted"`	Surface treatment: filled (default), hairline outline, or bare until hover.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Row height preset.
`className`	`string`	—
`aria-label`	`string`	—	Accessible name. Falls back to `label`.

More Inspector components

View all Inspector