Components

Icon Input

An Iconify-backed icon picker with virtualized search, live preview, and localized empty states.

Install

Add this registry item to your app with shadcn.

bash

bunx --bun shadcn@latest add https://krakstack.net/r/icon-input.json

Overview

IconInput is a controlled icon picker for any [Iconify](https://icon-sets.iconify.design/) collection. It uses VirtualizedCombobox to search and render large result sets efficiently, and returns the selected icon name without its collection prefix. Search results are loaded through an Effect Atom and HttpClient.

Usage

tsx

import { useState } from "react";
import { IconInput } from "@/components/ui/icon-input";

const [icon, setIcon] = useState("circle-help");

<IconInput value={icon} onValueChange={setIcon} />

Pass collection to use another Iconify collection.

Dependencies

Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies

Preview

Icon Input

Search the Lucide Iconify collection and select an icon.

circle-help