MCP server
newHosted 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.
| URL | https://devicons.io/api/mcp |
| Transport | Streamable HTTP (stateless) |
| Authentication | None |
| Access | Read-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
| Tool | Inputs | Returns |
|---|---|---|
search_icons | query, optional category, limit (1–50, default 10) | Ranked icons with slug, name, tags, page URL, and SVG URL, plus the total match count |
get_icon | slug, 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_categories | none | Categories with slug and icon count |
get_category | slug, 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.tsxwith@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.