get_icon

get_icon resolves one icon to a full RegistryItem plus an install command with your token embedded. It's the retrieval counterpart to search_icons.

When to use

• The agent has a specific (library, name) pair (from search_icons or from the user).
• You want the React component source, not just the SVG.
• You want an install command that lands the icon at components/icons/{library}-{name}.tsx.

How it works

1. Calls getIconRegistry(library, name) from services/registry.ts.

2. getIconRegistry queries services/icons-db.ts#getIcon, which fetches the row from Postgres with fields body, width, height, strokeWidth.

3. The SVG body is cleaned:

   • <g> wrappers stripped.
   • fill="", stroke="", stroke-width, stroke-linecap, stroke-linejoin attributes stripped (so the generated component can drive them via props).

4. A React component is generated inline with props for size, color, strokeWidth, and className:

   export function ArrowRightIcon({
     size = 24,
     color = "currentColor",
     strokeWidth = 2,
     className,
     ...props
   }: React.SVGProps<SVGSVGElement> & { size?: number; color?: string; strokeWidth?: number }) {
     return <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} ...>{cleanedBody}</svg>
   }

5. The tool wraps the result in a RegistryItem shape with name {library}-{name}, then appends an install field built from the user's token.

Source: lib/mcp/tools.ts#get_icon + services/registry.ts#getIconRegistry + services/icons-db.ts#getIcon.

Arguments

Response

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lucide-arrow-right",
  "type": "registry:ui",
  "title": "ArrowRight Icon",
  "author": "lucide",
  "description": "ArrowRight icon from lucide",
  "homepage": "https://www.shadcn.io/icons/lucide",
  "files": [
    {
      "type": "registry:ui",
      "path": "lucide-arrow-right.tsx",
      "content": "import * as React from \"react\";\n\nexport function ArrowRightIcon({ ... }) { return <svg ...>...</svg>; }\n",
      "target": "components/icons/lucide-arrow-right.tsx"
    }
  ],
  "dependencies": [],
  "registryDependencies": [],
  "install": "npx shadcn@latest add \"https://www.shadcn.io/r/lucide-arrow-right.json?token=<your-token>\""
}

For an unknown icon (wrong library or wrong name):

{
  "content": [{ "type": "text", "text": "Icon not found: lucide-arrow-nope" }],
  "isError": true
}

Example prompts

use shadcnio to add a Lucide arrow-right icon to my button component

use shadcnio to fetch the github brand icon from simple-icons and install it

use shadcnio and show me the source of heroicons magnifying-glass

Manual invocation

curl -s -X POST "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN" \
  -H "content-type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "get_icon",
      "arguments": { "library": "lucide", "name": "arrow-right" }
    }
  }' | jq '.result.content[0].text | fromjson | .install' -r

Tips + gotchas

• The generated component drives size/color/strokeWidth via props — that's why the raw SVG attributes are stripped. If you want the original attributes, fetch the row from the icons DB directly (not via MCP).
• Icon slug format for install — {library}-{name} is the name on the RegistryItem and the slug in the install URL. Don't construct it yourself; use the one in the response.
• All icons are free (not Pro-gated). Even non-Pro users could fetch icons — except MCP itself is Pro-gated, so in practice only Pro users reach this tool. The /r/{library}-{name}.json endpoint serves icons to any valid-token holder.
• No dependencies, no registryDependencies — the generated component is self-contained (just React). Drop-in compatible.
• Install target — components/icons/{library}-{name}.tsx. Different libraries land side-by-side in the same folder.