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 the icon catalog — Ask for icons by label and style from 422,674 SVG/PNG icons across 130 styles.
- Preview icons as free PNGs — Request PNG previews without an API key to compare styles before committing.
- Export SVG for production — Ask for SVG versions of approved icons once an API key is configured.
- Lock one style per project — Have the agent save the chosen style to
icons8.jsonso future sessions keep it. - Restyle existing UI — Ask the agent to swap every icon in the project to a named style while keeping current 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. 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
If you installed the plugin, the keyed server runs alongside the bundled keyless one, so the PNG tools appear twice. That is harmless; if it bothers you, disable the plugin's server and keep your own entry.
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.
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
Get your API key setup in the MCP tab, or explicitly request SVG format.
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 plugin marketplace add icons8/agent-skills, then install icons8 from the plugin browser. The MCP server comes bundled, see Step 1.
Need help?
Check our documentation or chat with us.