Skip to content

Components · Reference

Icon Input

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

Last updated October 8, 2026

Overview

IconInput is a controlled icon picker for any Iconify 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.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/icon-input

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