IconPicker

The mark a thing wears, picked from a set of Lucide icons, as a grid under a label. Every icon's name is its tooltip and its accessible name.

import { IconPicker } from '@basmilius/react-ui';

import { useState } from 'react';
import { Bookmark, Bug, Flag, Heart, Rocket, Star, Tag, Zap } from 'lucide-react';
import { IconPicker } from '@basmilius/react-ui';

const ICONS = { Bookmark, Bug, Flag, Heart, Rocket, Star, Tag, Zap };

export default function IconPickerDemo() {
    const [icon, setIcon] = useState<string | null>('Rocket');

    return <IconPicker className="w-72" icons={ICONS} value={icon} onValueChange={setIcon} onClear={() => setIcon(null)} />;
}

With onClear, a button beside the label clears the icon. Leave it out when the thing falls back to a default icon of its own. The label defaults to the library's "Icon"; give it another name when the same surface also takes a picture, or the two read as one list.

Props

Prop	Type
icons	Readonly<Record<string, LucideIcon>>	Required. Every icon by its name, in the order of the grid.
value	string | null	Required. The name of the picked icon.
onValueChange	(name: string) => void	Required.
onClear	() => void
label	string
disabled	boolean
className	string
ref	Ref<HTMLDivElement>

IconPickerProps is an exported type.