Keyline Icons MCP
An MCP server for Keyline Icons: the agent finds an icon by name and gets its SVG and a ready React import with no guessing
- 188 ★ on the repository
- Last commit
Minimal access
Why this level
- The server only returns set data from the package: it writes nothing and makes no network calls
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/keyline-icons-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The server only returns set data from the package: it writes nothing and makes no network calls
This is third-party code. Review the repository files before installing.
What it does
The `@keyline-icons/mcp` package gives the agent a set of 1,692 free MIT icons: 13,536 SVGs in four styles, with rounded or sharp corners, on one 24×24 grid. No network and no API key are needed, the whole set ships inside the package. Four tools: `describe_set` reports the counts, styles and the rule for which icons have which style, and is called first. `search_icons` searches by name and shows available styles, `get_icon` returns the source SVG for a chosen style and corner treatment, `get_react_usage` gives the import line and JSX from `@keyline-icons/react`. Search ranks an exact match above a prefix and a prefix above a word boundary. A typo is found by substring and edit distance: `chekc` leads to `check`. A missing style comes back as an answer rather than an error: `bar-chart` has no fill because it has no enclosed area, and the server says so directly.
Who it is for. Frontend developers on React and shadcn/ui who let an agent place icons and do not want fixes caused by invented names.
Good fit when
- An agent builds a React interface and picks icons for buttons, menus and statuses
- You need an icon in a specific style, such as duotone with sharp corners, and want to know whether it exists
- A project embeds icons as source SVG without depending on the package
- The icon name is unknown and has to be found by meaning: a mail with a tick, an arrow in a square
Not a fit when
- You need icons drawn for your product: the set is general, and the authors sell custom sets separately
- The project is on Vue or Svelte: the server returns React imports, and Iconify and the CLI cover the rest
- You need animated or multicolor graphics: the set is made of stroke, two-tone and filled marks
Example request
Use keyline-icons to pick icons for a settings menu: profile, notifications, billing, sign out. Give me SVG in fill style with sharp corners and React import linesMCP
- Transport
- stdio
- Authentication
- not required
Limitations
- The server returns only the Keyline Icons data. It does not see other icon libraries.
- The import line and JSX target `@keyline-icons/react`. For Vue, Svelte, Solid and web components the set is used through Iconify.
- Not every icon has every style: fill and duotone need an enclosed area, and the server states a missing style plainly.
- Data updates with the package version, and new icons arrive after its release.
How to disable. Run `claude mcp remove keyline-icons`. In other clients delete the keyline-icons entry from the `mcpServers` block. The package is fetched through `npx`, so nothing else needs removing.
FAQ
How do I connect Keyline Icons to Claude Code?
Run `claude mcp add keyline-icons -- npx -y @keyline-icons/mcp`. No key or network needed: the set ships inside the package.
How does the server differ from installing icons through shadcn?
The shadcn registry copies icon files into the project one by one. The server answers the agent's questions: which icon exists, what style it has and which import to write. Both ways work together.
What if I mistype an icon name?
The server finds the nearest: first by substring, then by edit distance and by the leading name segment. `arow` points to the `arrow-*` family.
Which styles do the icons have?
Stroke, two-tone, duotone and fill, each with rounded or sharp corners. Not every icon has every style, and `describe_set` states the rule.
Can I use the icons outside React?
Yes. The set is on Iconify as `keyline-icons` for Vue, Svelte, Solid and web components, and the `@keyline-icons/cli` CLI puts SVGs into a project without a dependency.
Discussion
No questions or reviews yet.
Related
MCP serversAn MCP server that finds a coolicons icon by meaning and returns the SVG with the import line, so the agent never guesses names
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
README in short
The package file explains install with one command for Claude Code and a config block for other clients, then lists four tools. A separate section justifies their design: guessable but not obvious names, a missing style as a real answer and typo-tolerant search. It closes with a link to custom sets.