IconPicker

Searchable icon selection popover grid supporting Lucide icons for builder, form customizers, and toolbar triggers.

// Plain markup
import { IconPicker } from "@shavin/ui";

1. Default Select-Style Trigger

import { useState } from "react";
import { IconPicker } from "@shavin/ui";

export function Form() {
  const [icon, setIcon] = useState("sparkles");

  return (
    <div className="w-64">
      <IconPicker value={icon} onChange={setIcon} />
    </div>
  );
}

2. Compact Icon-Button Variant (variant="icon")

import { useState } from "react";
import { IconPicker } from "@shavin/ui";

export function Toolbar() {
  const [icon, setIcon] = useState("settings");

  return (
    <div className="flex items-center gap-3">
      <IconPicker variant="icon" size="sm" value={icon} onChange={setIcon} />
      <IconPicker variant="icon" size="md" value={icon} onChange={setIcon} />
      <IconPicker variant="icon" size="lg" value={icon} onChange={setIcon} />
    </div>
  );
}

3. Custom Component Trigger (children)

import { useState } from "react";
import { IconPicker, Icon, Button } from "@shavin/ui";

export function CustomTriggerDemo() {
  const [icon, setIcon] = useState("heart");

  return (
    <IconPicker value={icon} onChange={setIcon}>
      <Button variant="outline" size="sm" className="gap-2">
        <Icon name={icon} size="sm" color="accent" />
        <span>Change Glyph ({icon})</span>
      </Button>
    </IconPicker>
  );
}

4. Clearable (allowNone)

import { useState } from "react";
import { IconPicker } from "@shavin/ui";

export function OptionalIconField() {
  const [icon, setIcon] = useState("none");

  return (
    <div className="w-64">
      <IconPicker value={icon} onChange={setIcon} allowNone />
    </div>
  );
}

Props

Prop	Type	Default
value*	string	—
onChange*	(v: string) => void	—
children	React.ReactNode	—
variant	"default" \| "icon"	—
size	"sm" \| "md" \| "lg"	—
allowNone	boolean	—
libraries	string[]	—
className	string	—

* required