An AI agent
Claude Code, Codex, Cursor, Windsurf, VS Code, or anything else that speaks MCP
Icons8 MCP server brings icons and illustrations to your AI agent
Icons and illustrations we draw ourselves. Your agent picks one pack and stays in it, so the tenth screen still looks like the first
claude plugin marketplace add icons8/agent-skills &&claude plugin install icons8@icons8New to AI agents? Start with the guide · 5 minutes, no coding
What your agent puts on the page
Name a style once and it holds when an AI agent designs the page: every icon, every illustration, every state comes out of the same pack. Each icon pack is free as PNG or paid SVG
Icons
One pack per project. The deepest goes past 13,000 icons, so a project can grow without leaving it
Illustrations
For the sections that would otherwise be another row of cards: hero art, empty states, onboarding, 404
Animated illustrations
Some styles move too: your agent ships them as video with a transparent background
Ten skills come with the server
The server hands your agent the catalog. The skills tell it what to do with it, and they start on their own once a screen is built. All ten install with the plugin, free on every plan, open source under Apache-2.0. Wondering why you need both? See how skills differ from an MCP server
icons8-design
The front door: routes a request to the skill that owns the answer
icons8
Picks icons from one pack and keeps the whole project in it
ouch
Adds illustrations in one art style instead of a random picture each time
asset-check
Catches emoji used as icons, sections with no picture and dead image links
ux-check
Finds the states nobody drew: empty, loading, error, and no keyboard path
ux-writing
Rewrites buttons and error messages so they say what happens next
ui-polish
Straightens alignment, radii, contrast and focus rings
motion
Decides what deserves to move, then picks the duration and the curve
design-tokens
Sets up colors, spacing and dark mode, then catches them drifting apart
illustration-animator
Turns still SVG illustrations into looped animations: Lottie, GIF and MP4
Set up the Icons8 MCP server
Three things to know, then pick your agent
An Icons8 account
Your agent opens a browser tab once and signs you in. Nothing to copy or paste
Node.js, only for npx
Cursor, Windsurf and other agents add the skills with npx. The plugins need nothing
Each tab sets up the server and all ten skills
claude plugin marketplace add icons8/agent-skills &&claude plugin install icons8@icons8Approve the server on first use. Claude Code marks it Needs authentication: run /mcp, choose Authenticate, and your browser signs you in. If you are already signed in to icons8.com in that browser, the tab just confirms it. Rather stay inside Claude Code? Run /plugin marketplace add icons8/agent-skills, then /plugin install icons8@icons8.
Built with Icons8 MCP
Six pages an agent built in one session, each one open to look at. The same setup works from a Figma file, for mobile app design and next to other design tools
Then it checks what the agent built
The skills run after the build, without being asked. Every finding comes with the line it sits on and the replacement already in place
| Severity | Skill | Location | Finding | Fix |
|---|---|---|---|---|
| Block | ux-check | Dialog.tsx:61 | The close control is a div. Keyboard cannot reach it, screen readers do not announce it | Button with a label and a focus ring |
| Block | asset-check | Hero.tsx:24 | An emoji stands in for the icon next to the headline | Rocket, Material Outlined 24px, from the pack this project already uses |
| Warn | asset-check | Features.tsx:8 | Three cards with icons and no picture in the whole section | Illustration in the locked style, dropped in |
| Warn | ui-polish | Card.module.css:12 | Secondary text sits at 2.9:1 on white | Text token at 4.8:1, same shade family |
| Note | motion | Toast.tsx:15 | 600ms ease-in-out on a toast that appears and leaves | 200ms, cubic-bezier(0.2, 0, 0, 1), off under reduced motion |
Pricing
A free account searches everything and downloads PNG with a link back to Icons8. Any plan below adds SVG
Recently shipped
0.6.015 Oct 2026
The illustration-animator skill: still SVG illustrations become looped animations, exported as Lottie, GIF and MP4
0.5.25 Oct 2026
Cursor can list the plugin in its marketplace and install it with the skills and the Icons8 server
0.5.030 Sep 2026
Animated icons: the server finds icons that move and serves them as Lottie, GIF or APNG, and the skill says when motion belongs
Frequent questions
Not any more. Clients that speak OAuth send you to the browser once and keep the token themselves, and the account you sign in with decides what you get: PNG on a free account, SVG on a paid plan. A key is still the way in for a client without OAuth and for CI, where nobody is at the browser. It lives in the MCP tab of your account.
That is the server asking who you are, and it takes one browser tab:
/mcp in Claude Code, codex mcp login icons8mcp in Codex, the Connect button in Cursor. A free account is enough to search and to download PNG. For SVG, subscribe and sign in again so your agent picks up the plan.Claude Code, Codex and VS Code install it as a plugin, with the server and all ten skills in one step. Cursor and Windsurf take the server as a config and the skills through
npx. Any other client that reaches a remote MCP server over HTTP works too, and a stdio-only client connects through mcp-remote. Set up has a tab for each.The server gives your agent the catalog, the skills give it the rules. Without them the agent takes the first search result for every label, and one screen ends up with icons from four different styles. With them it picks one pack for the project, previews on free PNG before fetching SVG, and checks the screen once it is built.
The icons8 and ouch skills do it for you: they pick one icon pack and one illustration style and save both to
icons8.json. Commit the file, and the next session, or another agent, keeps the same styles. Without the skills, name the style in your first prompt and repeat it whenever you add icons later. Ids are style specific, so changing style later means picking every icon again.PNG on any account, at any size. SVG on a paid plan, for every icon style and for the flat illustration styles. 3D illustrations are PNG only, there is no vector behind them. Animated illustrations come as video with a transparent background.
Yes. The same server carries Ouch! illustrations: ask for a hero image, empty states, onboarding or a 404 page and name a style, the same way you name an icon style. The ouch skill keeps the whole project to one style, and in styles that move it can ship the animated version.
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.
Ask for SVG by name in the prompt first: agents default to the free PNG. If it still comes back as PNG, the plan is not reaching the server. Sign in again so your agent picks up a fresh token (
/mcp, codex mcp login icons8mcp, or Connect in Cursor), and check that the account you signed in with is the one holding the subscription. If you connect with a key, check that the Authorization header matches the one in the MCP tab.Yes, and there is nothing to change. A key in the
Authorization header keeps working the way it always did. Sign-in is for connections that carry no key: those now ask who you are instead of quietly dropping to the free tier.Yes, with a link back to Icons8. That covers commercial projects too. For assets that scale in a production UI, use SVG on a paid plan. Check our license for the details. Comparing with Flaticon? See what Flaticon and Magnific offer.
The ten skills 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 and illustrations are licensed separately: free with a link back, SVG on a paid plan.
Not yet. We are working on it right now.
Chat with us, and include the agent you use and what it answered.