Documentation

MCP server

new

Hosted MCP server for developer icons and SVG logos. Search, fetch SVGs, and get React, Vue, or Svelte code from any MCP client.

The Devicons MCP server gives AI agents direct access to 1,300+ developer, brand, framework, and tooling logos. Agents search by name or tag, fetch the SVG markup, and get the exact import for your framework, so they stop guessing slugs and inventing file paths.

URLhttps://devicons.io/api/mcp
TransportStreamable HTTP (stateless)
AuthenticationNone
AccessRead-only
Discovery/.well-known/mcp.json

Connect your client

Any agent, one command

add-mcp detects the coding agents on your machine (Claude Code, Cursor, VS Code, Codex, and more) and adds the server to each one you pick:

npx add-mcp https://devicons.io/api/mcp -g

-g installs it for every project. Leave it off to write the config into the current project instead. To set up one client by hand, use its section below.

Claude Code

claude mcp add --transport http devicons https://devicons.io/api/mcp

Add --scope user to make it available in every project.

Cursor

Add to .cursor/mcp.json in your project, or to the global Cursor MCP settings:

{
  "mcpServers": {
    "devicons": {
      "url": "https://devicons.io/api/mcp"
    }
  }
}

VS Code

Add to .vscode/mcp.json:

{
  "servers": {
    "devicons": {
      "type": "http",
      "url": "https://devicons.io/api/mcp"
    }
  }
}

Windsurf

Open Windsurf’s MCP settings, view the raw config, and add the same mcpServers entry as Cursor.

Claude Desktop

Open Settings → Connectors → Add custom connector and paste https://devicons.io/api/mcp. Claude Desktop’s JSON config file only runs local servers; to use it, add the local server entry there instead.

Codex CLI

codex mcp add devicons --url https://devicons.io/api/mcp

Any other client

Name devicons, URL https://devicons.io/api/mcp, transport Streamable HTTP, no authentication.

Run it locally

The same tools are available over stdio from the devicons package (Node 20+). The local server reads from the public API:

{
  "mcpServers": {
    "devicons": {
      "command": "npx",
      "args": ["-y", "devicons", "mcp"]
    }
  }
}

Set DEVICONS_API to point it at another deployment.

Tools

ToolInputsReturns
search_iconsquery, optional category, limit (1–50, default 10)Ranked icons with slug, name, tags, page URL, and SVG URL, plus the total match count
get_iconslug, optional framework (react, vue, svelte, html; default react), include_svg (default true)Metadata, every variant’s color and monochrome SVG URL, the primary SVG markup, and an install command plus code
list_categoriesnoneCategories with slug and icon count
get_categoryslug, optional limit (1–200, default 50)The category’s icons, most recognizable first

Every tool is read-only and returns structured content plus the same information as text, so clients that only show text still get the SVG markup and URLs. Slugs are case-insensitive. Unknown slugs come back as tool errors that tell the model which tool to call instead.

Example prompts

  • “Find the logos for our stack (Next.js, Postgres, Redis, Vercel) and add them to components/stack.tsx with @dev.icons/react.”
  • “Put the monochrome GitHub, Discord, and X logos in the footer as inline SVG.”
  • “List every LLM provider logo Devicons has.”

Troubleshooting

  • Opening the URL in a browser shows “method not allowed”. That’s expected: MCP clients POST JSON-RPC to the endpoint. Use one of the setups above.
  • Your client only supports stdio. Use the local server.
  • Behind a firewall. Both the hosted and the local server need outbound HTTPS access to devicons.io.