@versini/ui-icon-picker

A flexible and accessible React icon picker component built with TypeScript and TailwindCSS.

The Icon Picker component provides a searchable grid of icons from @versini/ui-icons. Users can browse, search, and select icons. It supports multiple themes and accessibility features out of the box.

Installation

npm install @versini/ui-icon-picker

Dependencies

This package includes @versini/ui-button and @versini/ui-textinput as runtime dependencies. You also need react (19+) in your project.

Usage

IconPicker

import { IconPicker } from "@versini/ui-icon-picker";

const MyComponent = () => {
  const handleIconChange = (iconName: string) => {
    console.info("Selected icon:", iconName);
  };

  return <IconPicker onChange={handleIconChange} />;
};

IconRenderer

Render a single icon by name:

import { IconRenderer } from "@versini/ui-icon-picker";

const MyComponent = () => {
  return <IconRenderer icon="IconSettings" className="size-6" />;
};

Props

IconPicker

| Prop | Type | Default | Description | | --------------- | ------------------------------------------------ | -------- | ------------------------------------------------- | | onChange | (icon: string) => void | required | Callback fired when an icon is selected. | | className | string | - | Optional class name for the root element. | | textInputMode | "dark" \| "light" \| "system" \| "alt-system" | "dark" | Theme mode for the search input. | | noSearch | boolean | false | If true, the search input is hidden. |

IconRenderer

| Prop | Type | Default | Description | | ------ | -------- | -------- | ------------------------------------------------------------ | | icon | string | required | The name of the icon component to render (e.g. "IconSettings"). | | ...rest | SVGProps | - | Any additional props are passed to the underlying <svg> element. |