Icons8

The Icons8 MCP Server provides direct access to a library of over 40,000 icons right from your code editor.

You can use natural language prompts to find and insert icons into your projects, either as high-resolution PNGs or scalable SVGs.

Features

🎨 40,000+ icons across multiple styles, including filled, outlined, color, and iOS glyph
📱 Multiple formats – PNG icons for free users, SVG for paid subscribers
🤖 AI-powered search – describe icons in natural language and get relevant results
⚡ Real-time integration – icons load directly into your projects without manual downloads
🔧 Multiple editor support – works with Claude Code, Cursor, Windsurf, VS Code, and other MCP-compatible tools
🆓 Free tier available – PNG icons work without API key, just requires attribution
🎯 Context-aware suggestions – AI understands your project context and suggests appropriate icons

How to Use It

1. The MCP server offers two tiers. The free plan provides high-resolution PNG icons, which is great for testing and quick prototypes. The paid plan gives you an API key to access SVG icons.

Free PNG Configuration:

{
  "mcpServers": {
    "icons8mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.icons8.com/mcp/"
      ]
    }
  }
}

Paid SVG Configuration (API Key Required):

{
  "mcpServers": {
    "icons8mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.icons8.com/mcp/",
        "--header",
        "Authorization:${AUTH_HEADER}"
      ],
      "env": {
        "AUTH_HEADER": "Bearer YOUR_API_KEY"
      }
    }
  }
}

2. Set up your MCP clients.

Claude Code:

```bash
claude mcp add icons8mcp -- \
npx mcp-remote \
"https://mcp.icons8.com/mcp/" \
--header "Authorization: Bearer YOUR_API_KEY"

Cursor:

1. Navigate to Settings -> Cursor Settings.
2. Go to the MCP tab.
3. Click + Add new global MCP server.
4. Paste the appropriate JSON configuration (Free or Paid) and save.

Windsurf:

1. Navigate to Settings -> Windsurf Settings.
2. Find the MCP section.
3. Click Manage plugins + View raw config.
4. Enter the JSON configuration and save.

VS Code:

1. Open Settings (⌘, on macOS).
2. Search for “MCP” and select Edit in settings.json.
3. Add the JSON configuration to your settings.json file.
4. Restart VS Code if the server does not appear in the agent selection tool menu (⌥⌘B).

3. Once configured, you can prompt your AI assistant directly. Try a request like, "create a dashboard with analytics SVG icons in a color style" or "add a user icon to this button." The AI will use the Icons8 MCP server to fetch and insert the icons.

FAQs

Q: What do I do if the server says “No API key”?
A: This message appears when you request SVG icons without a valid API key. You can either stick to PNG icons, which are free, or subscribe to an Icons8 plan to get a key for SVG access.

Q: Can I request specific icon styles?
A: Yes, you can specify styles like “filled,” “outlined,” “color,” “iOS glyph,” or other Icons8 style categories in your requests.

Q: My AI assistant isn’t finding the MCP server after installation.
A: Restart your AI coding tool after adding the MCP server configuration. Check that Node.js is installed and accessible from your terminal.