Emoji style · 36 icons
Icons8 MCP server
Icons and illustrations in huge one-style packs, straight into the AI editor you already use
What you need
- Claude Code, Codex, Cursor, Windsurf, VS Code, or a similar AI coding tool
- An Icons8 account. Your agent sends you to the browser once to sign in, and there is nothing to copy or paste. A free account covers PNG, SVG comes with a paid plan
- 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 the MCP server and both skills, icons and illustrations:
claude plugin marketplace add icons8/agent-skills && claude plugin install icons8@icons8
Approve the server on first use. Claude Code then marks it Needs authentication: run
/mcp, choose Authenticate, and your browser signs you in to Icons8. If you are already signed in to icons8.com in that browser, there is no form to fill in and the tab just confirms it. That is the whole setup.Rather stay inside Claude Code? These two do the same thing:
/plugin marketplace add icons8/agent-skills
/plugin install icons8@icons8
What the skills add
- One style per project: icons lock to
icons8.json, illustrations toouch.json. Commit them, 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. An empty pot for an empty plant list, not a generic browser window.
- Free previews while you iterate, originals only for the set you approved.
The MCP gives your agent the catalog, the skills give it the rules. Without them the agent takes the first search result for every label, and that is how one screen ends up with icons from four different styles and a hero about nothing in particular. 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 comes with a paid plan.
SVG arrives as its own tools,
get_icon_svg and get_illustration_svg: real SVG for any icon style and for the flat illustration styles, scaling cleanly and following the text color. PNG icons stay free with a link back to Icons8.There is no second setup for it. Subscribe for $15, and the account you signed in with in Step 1 carries the plan. If your agent still hands you PNG, sign in again so it picks up the new plan:
/mcp in Claude Code, codex mcp login icons8mcp in Codex, Connect in Cursor.Set it up with an API key before, or running in CI where nobody can sign in? A key in the
Authorization header still works and skips the browser entirely. The snippet with your key is in the MCP tab of your account.Step 3: get icons and illustrations 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 on any account, 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.”
- “Illustrate the four empty states of this app, one style for all of them.”
- “Add a hero illustration to the landing page, 3D, and match the three feature blocks to it.”
Describing the look works too: “thin outline, no color, 24px”, “flat color for a landing page”, “hand drawn”. The skills save whichever style your agent picks, to
icons8.json for icons and ouch.json for illustrations, so later sessions keep both automatically. All 130 icon styles are on icons8.com/icons, all 345 illustration styles on icons8.com/illustrations.Three things worth putting in the prompt
- The style. Name it once, the skill locks it in for the whole project:
icons8.jsonfor icons,ouch.jsonfor illustrations. Ids are style specific, so changing style later means picking everything 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. Illustrations go the other way: below ~200px a scene turns to mud, so use an icon there.
- The format. PNG previews are free and instant, so iterate on them and ask for SVG once the set is final. SVG comes with a paid plan, see Step 2. 3D illustration styles are PNG only, there is no vector behind them.
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.