Mastericons
Sign in
Model Context Protocol

Mastericons in your
AI editor.

Connect Mastericons via MCP and let Claude, Cursor, or Copilot search, copy, and animate 200K+ icons - without leaving your editor.

Get startedView tools

What you can do

Everything you can do on Mastericons - now inside your AI assistant.

Search icons by meaning

Ask for 'a warning icon' or 'something that represents growth' - the AI finds the closest match.

Copy in any format

SVG, JSX, or React with TypeScript - pasted directly into your code without leaving the editor.

Works in Claude, Cursor & Copilot

One config, every major AI coding tool. No per-editor plugins needed.

Animate with one command

Ask for an animated icon and get a production-ready animated SVG back in seconds.

Browse entire libraries

Explore Lucide, Tabler, Phosphor, and 50+ more - pick the right style for your project.

MIT-licensed output

Every icon is open-source. Copy freely into commercial projects without attribution required.

Prerequisites

Make sure you have these ready before installing.

Node.js 18 or higherRequired

Required to run the MCP server. Check your version with node --version.

A compatible AI platformRequired

Claude Desktop, Cursor, VS Code with Copilot, or Windsurf - any MCP-compatible tool works.

A Mastericons accountRequired

A free account is required to authenticate the MCP server and access the full icon catalogue.

Installation

Choose your platform and follow the steps.

1

Open Claude Desktop → Settings → Developer → Edit Config

2

Paste the config below into claude_desktop_config.json

mcp_config.json
{
  "mcpServers": {
    "mastericons": {
      "command": "npx",
      "args": ["-y", "@mastericons/mcp-server"]
    }
  }
}
3

Save the file and restart Claude Desktop

4

Open a new conversation - the Mastericons tool will appear in the toolbar

Available tools

These are the MCP tools the AI can call on your behalf.

Search & Discovery

search_iconsSearch across 200K+ icons by keyword, style, or category. Supports filters for library, icon type (line, filled, duotone, brand), and stroke weight.
query: stringstyle?: "line" | "filled" | "duotone" | "brand"library?: stringlimit?: number
list_librariesReturns all 50+ supported icon libraries with metadata - name, icon count, style, and license.
get_library_iconsBrowse all icons within a specific library. Useful for keeping a consistent style across a project.
library: stringlimit?: numberoffset?: number

Copy & Export

get_iconFetch a single icon by ID. Returns the raw SVG source, metadata, and available copy formats.
id: string
copy_iconGet an icon as ready-to-paste code in your chosen format - raw SVG, self-contained JSX component, or React with TypeScript props.
id: stringformat: "svg" | "jsx" | "react"color?: stringsize?: number
get_icon_urlReturns a direct CDN URL to the icon SVG. Paste it into an <img> tag or reference it from CSS.
id: string

Animation

animate_iconGenerate an animated SVG for any icon using Mastericons' built-in animation presets. Choose from 30+ presets including stroke-draw, morph, heartbeat, motion-blur, and more.
id: stringpreset: stringduration?: numberloop?: booleancolor?: string
list_animation_presetsReturns all available animation presets with names, descriptions, and compatible icon types (line, filled, duotone, brand).

See it in action

A typical session - from prompt to icon in your codebase.

Claude - Mastericons MCP

Best practices

Get the most out of Mastericons MCP with these tips.

Be specific about style

Saying 'a filled heart icon from Phosphor' gets a better result than just 'heart icon'. Name the library or style when you have a preference.

Ask for alternatives

If the first result isn't quite right, ask 'show me 5 more heart icons in a line style'. The AI can iterate across the full catalogue.

Describe context, not shape

'An icon for the notifications bell in our mobile app header' gives the AI enough context to pick the right weight and style automatically.

Request animations by feel

You don't need to know preset names. Say 'animate this with a drawing effect' or 'make it pulse softly' and the AI maps it to the right preset.

Keep icon IDs for later

Ask the AI to log the icon ID when it inserts one. You can reference it later to swap format, resize, or animate without searching again.

Ready to add icons
from inside your editor?

200K+ icons. 30+ animation presets. One config block.

Install nowBrowse icons