Icons8 MCP server
About
Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects
Details
- Author
- Unknown
- Categories
- Developer Tools, Other, Design
Jump to
- Search icons— Ask for icons by keyword and style, with PNG previews, using the catalog exposed by the MCP server.
- Get SVG icons— Request production-ready SVG for any icon in a chosen style viaget_icon_svg(requires an API key).
- Maintain style consistency— Have the assistant save a project's icon style toicons8.jsonso future sessions reuse it automatically.
- Replace icons in bulk— Instruct the assistant to swap all icons in a project to a different style, preserving sizes.
- Add icons to UI blocks— Ask for icons to be inserted into feature blocks or bullet lists at a specified pixel size.
422,674 SVG and PNG icons in 130 styles, straight into the AI editor you already use
Huge icon packs, up to 40,000 icons in one style
Replace all icons in the project with trendy ones
Add icons to all bullet lists and feature blocks,
- Claude Code,Codex,Cursor,Windsurf, VS Code, or a similar AI coding tool
- Node.jsfor the plugin route in Claude Code and Codex: the bundled server runs throughnpx mcp-remote. The manual configs for Cursor, Windsurf and VS Code speak HTTP directly, so they need nothing to install
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
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
- One style per project, saved toicons8.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.
Everything above already works: search, PNG previews, high-res PNG at any size. SVG is the production format, and it needs a key.
{ "mcpServers": { "icons8mcp-svg": { "type": "http", "url": "https://mcp.icons8.com/mcp/", "headers": { "Authorization": "Bearer YOUR_API_KEY" } } } }
In Claude Code the same thing is one command:
claude mcp add --transport http icons8mcp-svghttps://mcp.icons8.com/mcp/--header "Authorization: Bearer YOUR_API_KEY"
Check that the key is through: runclaude mcp list. Five tools means it arrived, and the fifth one isget_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.
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 toicons8.json, so later sessions keep it automatically. All 130 styles are browsable onicons8.com/icons.
Three things worth putting in the prompt
- The style.Name it once, the skill locks it inicons8.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, seeStep 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 thelive demosfor inspiration. If something does not work, see theFAQ.
How do I keep one icon style across the whole project?
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.
The skill and the plugin are Apache-2.0 onGitHub, and theskills.sh listingpasses the Socket, Snyk and Gen Agent Trust Hub security audits. The icons themselves are licensed separately: free with attribution, SVG on the paid plan.
PNG works without a key, SVG downloads require apaid API key, find it in theMCP tabof your account.
I'm requesting SVG but still getting PNG
Runclaude mcp listand count the tools. Four means the key is not reaching the server, so check theAuthorizationheader in your config, or copy the ready one from theMCP 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.
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.
Not yet, but this is exactly the feature we are actively working on right now.
Yes. Runcodex mcp add icons8mcp --url https://mcp.icons8.com/mcp/, then add the skill withnpx skills add icons8/agent-skills --skill icons8. For SVG, point Codex at your key with--bearer-token-env-var, seeStep 2.
Check ourdocumentationorchat with us.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform
745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.
Create, validate, and render diagrams from D2 (Declarative Diagramming) code into SVG and PNG formats.
Extract and download usable website favicons and return direct icon URLs and metadata through an MCP server.
Renders Mermaid diagram syntax to PNG or SVG images with configurable themes and backgrounds.
Quickly retrieve SVGs using the Iconify API, with no external data files required.
A MCP server that exposes SVGR functionality to convert SVG content into React components
Provides access to the Lucide icon library for use in LLM and agentic applications.
Search open SVG icon packs and fetch exact SVG markup from coding agents through MCP.
Render chart images from JSON configs with six themes, ten marks, PNG/SVG output.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
