coolicons MCP
An MCP server that finds a coolicons icon by meaning and returns the SVG with the import line, so the agent never guesses names
- 490 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The server starts from an npm package through `npx -y` with your user's rights and pulls the current version
- The agent writes the returned SVG and imports into project files, so review the result in the diff
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/cooliconsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The server starts from an npm package through `npx -y` with your user's rights and pulls the current version
- The agent writes the returned SVG and imports into project files, so review the result in the diff
This is third-party code. Review the repository files before installing.
What it does
The `@coolicons/mcp` MCP server searches coolicons by name and meaning and hands the agent SVG source with a ready import line. The whole set of 1,324 icons, five styles and three corner radii ships inside the package, so no API key or network is needed. It has five tools: `describe_set` shows the set and its naming rules, `search_icons` searches by name or meaning, `list_icons` pages through one category, `get_icon` returns the SVG in the chosen style, and `get_usage` gives the install command and import for React, Vue, SVG or the shadcn/ui registry. Several searches go out in one call when the queries are separated by commas. When a name does not exist, the server returns the closest names, so a typo is fixed in one turn. Matches on only some of the words are marked weak together with the words they miss. Names that clash with JavaScript or browser globals (`map`, `file`) come back with the `Icon` suffix, for example `MapIcon`. The same repository holds the `@coolicons/cli` CLI and a skill with rules for the agent. The skill requires every name to come from the real list: first through MCP, then from the installed package, the `references/icons.md` index or the online index.
Who it is for. Front-end developers on React, Vue or shadcn/ui who ask an agent to add coolicons icons and do not want to fix builds broken by invented names.
Good fit when
- The agent adds icons to the UI, guesses names, and the build fails on a missing import
- The project already runs on `@coolicons/react` or `@coolicons/vue`, and new icons must match the existing style and radius
- You need an icon by meaning, such as "calendar with an event" or "upload", and the exact name is unknown
- Another icon library is being replaced with coolicons, and each icon is mapped by meaning with its name checked
- A shadcn/ui project needs single icons as code inside the repository: `get_usage` returns the registry command
Not a fit when
- You need icons from other sets or thousands of brand logos: the server only knows coolicons, and the catalog lists Better Icons for other sets
- A designer picks icons by eye: the coolicons.cool site and the Figma file are made for browsing
- You need a custom drawing: the server returns finished icons and draws no new ones
- The project uses Svelte, Solid or Angular: there are no ready component packages for them, so use the SVG files from `@coolicons/svg`
Example request
Replace the icons in the Navbar component with coolicons in the fill style with round corners and list the ones that have no matchMCP
- Transport
- stdio
- Authentication
- not required
Limitations
- The server only knows the coolicons set and searches nothing online, so it cannot suggest names from other sets.
- Ready components exist for React and Vue 3; other environments get the SVG files from `@coolicons/svg` and the shadcn/ui registry.
- A result marked as a weak match fits only some words of the query: check the icon by meaning or open the category with `list_icons`.
- A renamed icon keeps its old name only until the next major version, so recheck the imports after updating the package.
How to disable. Remove the server with `claude mcp remove coolicons`, or delete the `coolicons` entry from the MCP configuration of another client. The skill goes away with its folder in the skills directory, and `npm uninstall` removes the `@coolicons/react`, `@coolicons/vue` and `@coolicons/svg` packages.
FAQ
How do I connect coolicons to Claude Code?
Run `claude mcp add coolicons -- npx -y @coolicons/mcp`. No key or network is needed because the set ships inside the package. In another client that speaks MCP over stdio, add a `coolicons` server with the command `npx` and the arguments `-y`, `@coolicons/mcp`.
Why does an agent need an MCP server when the icon package exists?
Models do not know coolicons names from their training data, and a wrong name breaks the build. The server searches the real list and answers a typo with the closest names, so the mistake is fixed in one turn.
What do the styles and corner radii mean?
There are five styles: `line` (strokes), `duocolor`, `duotone`, `fill` and `bulk`, and three radii: `sharp`, `regular` and `round`. The package root gives `line` with `regular` corners, and every other combination is imported separately, for example `@coolicons/react/fill` or `@coolicons/react/bulk/round`.
Why does the server return MapIcon for the icon named map?
The name `Map` is taken in JavaScript and `File` in the browser. Importing an icon with the same name would hide the built-in object, and a check like `value instanceof File` would quietly stop working. Every such icon has a variant with the `Icon` suffix, and the server returns it on its own.
Does coolicons work offline?
Yes. The whole set ships in the `@coolicons/mcp` package, so search and SVG output run with no network and no key. The network is needed only for the first download of the package through `npx`.
Discussion
No questions or reviews yet.
Related
MCP serversAn MCP server for Keyline Icons: the agent finds an icon by name and gets its SVG and a ready React import with no guessing
Search and drop in icons from 150+ Iconify collections as an MCP server, CLI and skill, writing SVG straight into the project
An MCP server and skill for a set of thousands of brand SVG icons: the agent searches and inserts icons with no key
MCP server and CDN of service icons: matches logos to docker-compose.yml and serves SVG, PNG and WEBP
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| coolicons (this card) | no | not required | 490 | |
| Better Icons | no | not required | 1,459 | searches more than 150 Iconify collections and writes the SVG straight into a project file |
| theSVG | yes | not required | 2,955 | a set of thousands of brand SVG logos with no interface icons |
| Dashboard Icons | yes | not required | 9,011 | service logos for dashboards and docker-compose, served as SVG, PNG and WEBP |
README in short
The repository front page opens with the numbers of the set and three reasons to choose it: styles that match an interface, crisp lines on a 24 by 24 grid with a 2 px stroke, and packages for different environments. Next come examples for React, Vue and SVG, tables of styles and props, naming rules and a section on agents with three tools.