shadcn/ui

IconMind is a shadcn registry item. A project set up with shadcn/ui gets an Icon component in components/ui/ the same way it gets a button, and no one has to approve it first:

npx shadcn@latest add https://iconmind.dev/r/iconmind.json

That installs @iconmind/react as a dependency and writes components/ui/iconmind.tsx, a thin wrapper that takes the icon by name:

import { Icon } from "@/components/ui/iconmind";

<Icon name="agent-run" />
<Icon name="vector-search" variant="duotone" weight="bold" size={24} />
<Icon name="mcp-server" className="text-muted-foreground" />

What the wrapper does

• name accepts the slug (agent-run) or the component name (AgentRun). Every one of the 5,287 icons is valid; an unknown name renders nothing rather than throwing.
• variant is outline (default) or duotone; weight is thin, regular or bold; size is in pixels and defaults to 20.
• className is merged with cn() like every other shadcn component, so Tailwind colour and spacing utilities apply. The icon inherits currentColor.
• Everything else is spread onto the <svg>, and aria-hidden is set — pass aria-label when the icon carries meaning on its own.

When to import directly instead

The wrapper reaches the icons through the package's index, so it is the right tool for a name decided at runtime — an icon chosen by data, a picker, an assistant's answer. For a name known at build time, importing the component itself lets the bundler drop the rest of the set:

import { AgentRun } from "@iconmind/react";

Both forms share the props, so mixing them is fine. The React docs cover the component API in full.