Icons8 MCP server

official

Get 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.json so 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.json for 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.