Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

MCP

get_icon

Get icons for your framework: an import when the set has a package, or a component to drop in. Pass several names to add them at once.

Group
Icons
Inputs
librarycode?framework?name?names?packageManager?
Access
Read-only

When to use it

  • After search_icons, to add the icons it found: several at once with names.
  • For a set without a package, as a component in the project's framework, or plain SVG.

Inputs

InputType
librarystring

Its set, from search_icons: lucide.

code?boolean

A component, even from a set with a package.

framework?"react" | "vue" | "svelte" | "solid" | "angular" | "preact" | "svg"

Default react.

Type
"react" | "vue" | "svelte" | "solid" | "angular" | "preact" | "svg"
name?string

Its name in the set: arrow-right. Or names.

names?string[]

Several from one set: one import or command.

packageManager?"npm" | "pnpm" | "yarn" | "bun"

From the lockfile. Default npm.

Type
"npm" | "pnpm" | "yarn" | "bun"

Example prompts

Name the server, so the agent doesn't answer from memory:

Prompts
use shadcnio to add Lucide's calendar icon to my Svelte app
use shadcnio to give me the GitHub logo as an SVG

Call and response

Asked “Add the sidebar's icons”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call
get_icon({ library: "lucide", names: ["house", "settings", "log-out"] })
Response
{
  "import": "import { HouseIcon, SettingsIcon, LogOutIcon } from \"lucide-react\";",
  "package": "lucide-react",
  "framework": "react",
  "icons": [
    {
      "name": "house",
      "export": "HouseIcon",
      "usage": "<HouseIcon />"
    },
    {
      "name": "settings",
      "export": "SettingsIcon",
      "usage": "<SettingsIcon />"
    },
    "… 1 more"
  ],
  "library": "lucide"
}

Call it by hand

Your MCP client sends this for you. To try the tool without one, post the call yourself; the server answers in server-sent events, the result on the data: line.

Terminal
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

What your agent reads

The server's description of get_icon, one of the Icons tools. Your agent reads it to decide when to call the tool:

tools/listget_icon.description
Icons for your framework: from a set with a package (Lucide, Tabler, Radix, Heroicons, Phosphor), the import; otherwise a component (React: one CLI command). names for several.

Next

FAQ

Why do I get an import instead of a file?

The import, from the set's package: import { HouseIcon } from "lucide-react". Most shadcn projects have lucide-react already, so nothing is added. Without the package, install it, or pass code: true for a standalone component.

Where does an icon component get saved?

For React, one shadcn CLI command adds it to components/icons. Any other framework gets file: the path to save code at.

Can I add several icons in one call?

Pass names: one import line for them all, or one CLI command. A name the set doesn't have fails the call, with the ones it missed.

What are an icon's variants?

The icon's other styles in the same library, by name: pass one to get_icon for it.