Icons8 MCP server
officialGet access to MCP server SVG and MCP server PNG icons in your vibe-coding projects
What can you do with Icons8 MCP?
- Search icons across 130 styles — Ask for icons by name or description, and the server returns matching SVG/PNG options from the Icons8 catalog.
- Get PNG previews without a key — Request free PNG previews of icons in different styles to compare looks before committing to a final set.
- Retrieve production-ready SVG icons — Use
get_icon_svg(requires API key) to fetch scalable SVG icons that follow text color for clean integration. - Maintain consistent icon style per project — Have the agent save a chosen style to
icons8.jsonso future sessions reuse the same pack automatically. - Replace or add icons across a project — Ask to swap existing icons to a new style or add icons to feature blocks, lists, or navigation with specified sizes.
Documentation
Icons8 MCP server
422,674 SVG and PNG icons in 130 styles, straight into the AI editor you already use
Use for free
Product Hunt
Product of the day
Huge icon packs, up to 40,000 icons in one style
130 styles to choose from
Works with
Claude Code,
Codex,
Cursor,
Windsurf
and other AI coding tools
Replace all icons in the project with trendy ones
or any other style
Add icons to all bullet lists and feature blocks,
process steps, navigation, etc.
Demos made using Icons8 MCP
Emoji style · 36 icons
29 icons, inlined as SVG
10 icons, one outline style
Color style · 27 icons
How to use Icons8 MCP
What you need
- Claude Code, Codex, Cursor, Windsurf, VS Code, or a similar AI coding tool
- Node.js for the plugin route in Claude Code and Codex: the bundled server runs through
npx mcp-remote. The manual configs for Cursor, Windsurf and VS Code speak HTTP directly, so they need nothing to install
Step 1: connect Icons8
Claude Code
Codex
Cursor
Windsurf
VS Code
Other
One line in your terminal installs both the MCP server and the icons8 skill:
claude plugin marketplace add icons8/agent-skills && claude plugin install icons8@icons8
Copy code
Approve the server on first use, then check it with /mcp. That is the whole setup.
Rather stay inside Claude Code? These two do the same thing:
/plugin marketplace add icons8/agent-skills
Copy code
/plugin install icons8@icons8
Copy code
What the icons8 skill adds
- One style per project, saved to
icons8.json. Commit it, and the next session keeps the style instead of picking a new one. - A plain gear for settings, not the brand logo that shares its name.
- Free PNG previews while you iterate, SVG only for the set you approved.
The MCP gives your agent the catalog, the skill gives it the rules. Without it the agent takes the first search result for every label, and that is how one screen ends up with icons from four different styles. Open source under Apache-2.0: github.com/icons8/agent-skills.
Step 2: unlock SVG when you need it
Everything above already works: search, PNG previews, high-res PNG at any size. SVG is the production format, and it needs a key.
The key unlocks a fifth tool, get_icon_svg: real SVG for any style in the catalog, scaling cleanly and following the text color. PNG stays free with a link back to Icons8. Subscribe for $15, then take the ready setup code from the MCP tab of your account: it comes with your key filled in. Or add the key to any config by hand:
{ "mcpServers": { "icons8mcp-svg": { "type": "http", "url": "https://mcp.icons8.com/mcp/", "headers": { "Authorization": "Bearer YOUR_API_KEY" } } } }
Copy code
In Claude Code the same thing is one command:
claude mcp add --transport http icons8mcp-svg https://mcp.icons8.com/mcp/ --header "Authorization: Bearer YOUR_API_KEY"
Copy code
Check that the key is through: run claude mcp list. Five tools means it arrived, and the fifth one is get_icon_svg. Four tools means the header is not reaching the server.
Installed the plugin in Step 1? Then your server is the bundled keyless one, so SVG stays locked no matter what you ask for. Add the keyed server above: the two run side by side, the PNG tools simply appear twice, and you can disable the keyless one in your client.
Step 3: get icons to your project
Ask for what you need. Name a style if you have one in mind, and if you do not, ask to see a few first: PNG previews are free and need no key, so comparing costs nothing.
- “Show me a settings icon in six different Icons8 styles as PNG previews, and tell me what each style is called.”
- “Build a settings screen. Icons from Icons8, Material Outlined, 24px.”
- “Swap every icon in this project to Flat Color and keep the current sizes.”
- “Add icons to the six feature blocks on the landing page, one style, 48px.”
Describing the look works too: “thin outline, no color, 24px”, “flat color for a landing page”, “hand drawn”. The skill saves whichever style your agent picks to icons8.json, so later sessions keep it automatically. All 130 styles are browsable on icons8.com/icons.
Three things worth putting in the prompt
- The style. Name it once, the skill locks it in
icons8.jsonfor the whole project. Ids are style specific, so changing style later means picking every icon again. - The size. Every style was drawn for one size, from 16px glyphs to 64px color scenes. Ask your agent which size the style you picked was drawn for, and use that or double it. A 50px icon shrunk to 16px loses the detail that made it readable.
- The format. PNG previews are free and instant, so iterate on them and ask for SVG once the set is final. SVG needs a key, see Step 2.
Here is the same screen built twice: on the left no style was named, so the agent took the first result for every label. On the right one style was named for the whole screen.
No style named
Icons arrive from four different styles: a brand logo for Settings, a full color avatar in a monochrome sidebar, an emoji for a status.
Material Outlined, 24px
18 icons, one stroke weight, one look. Every icon follows the text color, so dark mode and theming come for free.
Take a look at the live demos for inspiration. If something does not work, see the FAQ.
Frequent questions
What if it says "No API key"?
Subscribe for $15, find the MCP tab in your Icons8 account for setup code. Alternatively, get an API key from the Icons8 developer portal.
How do I keep one icon style across the whole project?
The icons8 skill from Step 1 does this for you: it picks one pack for the whole project and locks it in icons8.json. Commit the file, and the next session, or another agent, keeps the same style. Without the skill, name the style in your first prompt and repeat it whenever you add icons later. Ids are style specific: the same icon has a different id in every style, so changing style later means picking every icon again.
What formats do I get?
SVG (with API key), PNG previews available for all users.
Can I download PNG icons with MCP server for free?
Yes, PNG icon previews are available without API key when you connect to Icons8 MCP server.
What are the license terms for the free version?
All PNG icons downloaded through MCP are free to use if you provide a link back to us, in production too. Check our license here. For assets that scale in a production UI, use SVG with an API key.
Is this open source?
The skill and the plugin are Apache-2.0 on GitHub, and the skills.sh listing passes the Socket, Snyk and Gen Agent Trust Hub security audits. The icons themselves are licensed separately: free with attribution, SVG on the paid plan.
Do I need an API key?
PNG works without a key, SVG downloads require a paid API key, find it in the MCP tab of your account.
I'm requesting SVG but still getting PNG
Run claude mcp list and count the tools. Four means the key is not reaching the server, so check the Authorization header in your config, or copy the ready one from the MCP tab. Five tools and still PNG: name the format in the prompt, and if you installed the plugin, make sure your agent used the keyed server and not the bundled keyless one.
What icon size should I ask for?
The size the style was drawn for: 16px for Simple Small, 24px for Material and Windows 11, 30 to 50px for iOS, 48px and up for color styles. Detail disappears when a large style is used small. Your agent can tell you the size any style was drawn for.
Can I download icons in batches?
Not yet, but this is exactly the feature we are actively working on right now.
Does it work with OpenAI Codex?
Yes. Run codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/, then add the skill with npx skills add icons8/agent-skills --skill icons8. For SVG, point Codex at your key with --bearer-token-env-var, see Step 2.
Need help?
Check our documentation or chat with us.