This MCP server lets you search Keyline Icons and retrieve SVG or React usage for specific icons.
describe_set: summarizes icon count, available styles, and style-coverage rules.
search_icons: finds icons by name/substring, optionally filtered by style and limited in count.
get_icon: returns full SVG source for an exact icon, with style and regular/sharp corner options.
get_react_usage: returns the @keyline-icons/react import line and JSX for an exact icon, with style and corner options.
Returns the import line and JSX for any icon from the @keyline-icons/react packages, including the correct style/corner entry point (e.g. @keyline-icons/react, /duotone, /fill, /sharp, /sharp/fill) and the export name, so an assistant can wire a real icon component into React (and React Native) code.
Provides access to the Keyline Icons set, an icon library drawn for shadcn/ui (1,366 icons across stroke, two-tone, duotone and fill styles, in rounded and sharp corner treatments). Agents can search the set, fetch ready-to-paste SVG source in any style/corner combination, and get React import lines and JSX so icons can be pulled into a shadcn/ui project instead of being guessed or hand-drawn.
1,833 icons, drawn on one 24×24 grid, in four styles and two corner treatments. Built for shadcn/ui, free under MIT.
keylineicons.com to browse and copy.
Style | Icons | What it is |
| 1,833 | The full set. 2px keylines on a 24 grid. |
| 1,833 | The stroke drawing over a flat plate at reduced opacity. |
| 1,833 | No outline: a grey body with the detail in full strength. |
| 1,833 | Solid, with the detail knocked back out of the shape. |
stroke is the drawing every other style starts from, and since 1.0.0 every
name comes in all four. two-tone is what duotone meant until 0.9.0: the
outline kept, a 40% plate under it. duotone now drops the outline and decides
per icon which part is grey and which is black, so the thing that matters reads
first: the check on a badge, the liquid in a flask, the data rather than the
chart's axes. A glyph with nothing to fill, like bar-chart, carries its stroke
drawing in the filled styles, so no import ever comes up empty.
Every drawing in the table comes twice: rounded, with round caps and filleted corners, and sharp, with butt caps and square corners. Same names, same coverage, so 14,664 SVGs in total.
icons/stroke/bell.svg
icons/sharp/stroke/bell.svg
icons/sharp/fill/bell.svgSharp is a drawing of its own rather than a filter over the rounded one. Squaring
a corner moves the ink, and where that changes the silhouette the geometry was
solved again, so both treatments sit side by side in raw/ and the build
converts neither into the other.
Related MCP server: brain-mcp-icon-visual
Copy one from the site. keylineicons.com is the
browser: click any icon to open it, then take it as SVG, JSX, a React import or
an npx line, at whatever style, corners, stroke width and size you have set.
The panel keeps the last three icons you opened, so two candidates can be held
side by side. That is the fastest path and needs no install.
Take the files. icons/<style>/<name>.svg and
icons/sharp/<style>/<name>.svg are plain, normalised SVGs with no wrapper, no
ids and no classes. They are generated, so treat them as build output: to
change one, change the drawing in raw/ and rebuild.
Import them in React. @keyline-icons/react exports one component per
icon, one entry point per style and corner treatment:
npm i @keyline-icons/reactimport { ArrowUpRight, Check, Menu } from "@keyline-icons/react"
import { Folder as FolderDuotone } from "@keyline-icons/react/duotone"
import { Folder as FolderFill } from "@keyline-icons/react/fill"
import { Folder as FolderSharp } from "@keyline-icons/react/sharp"
import { Folder as FolderSharpFill } from "@keyline-icons/react/sharp/fill"
<Check className="size-4" />
<ArrowUpRight size={16} />Every component takes the usual SVGProps plus size, and colours from
currentColor. There is no theme, no context and no provider.
The style entry points are smaller than the stroke one and deliberately so.
Check is three open strokes with nothing to fill, so it exists in
@keyline-icons/react and /sharp and in none of the others; Folder has an
interior and exists in all six. The counts at the top of this file are the same
fact.
components/icons/index.tsx is the same set generated for this repo's own
site, and @/components/icons is the import to use inside it. Both come off
icons/stroke/, so they hold the same drawings; the package is the one to
install anywhere else.
Import them in React Native. @keyline-icons/react-native is the same
components drawn through react-native-svg, with the same entry points and
export names, so shared code changes the package name and nothing else. It
works in Expo, on the web through Expo too.
npm i @keyline-icons/react-native react-native-svgimport { Check } from "@keyline-icons/react-native"
import { Folder } from "@keyline-icons/react-native/duotone"
<Check size={16} color="#2563eb" />A native view has no CSS to inherit from, so colour is a color prop rather
than currentColor.
Own the source with the shadcn CLI. The registry is served by the site, so
adding the set to a project is one entry in components.json:
"registries": {
"@keyline": "https://keylineicons.com/r/{name}.json"
}npx shadcn add @keyline/bell
npx shadcn add @keyline/fill/bell
npx shadcn add @keyline/sharp/fill/bellEach icon arrives as a self-contained component that imports nothing from the package, so it can be renamed, edited or folded into the project's own conventions. Take the package to have the whole set behind one import; take the registry to own a handful of files.
You can also install straight from GitHub, without configuring a registry in
components.json:
npx shadcn@latest add keyline-icons/keyline-icons/bell
npx shadcn@latest add keyline-icons/keyline-icons/fill/bell
npx shadcn@latest add keyline-icons/keyline-icons/sharp/fill/bellThe GitHub registry installs the same self-contained source files and variant paths as the site registry.
Add one at a time from the terminal. @keyline-icons/cli searches the set
and writes SVGs into a project without adding a dependency to it:
npx @keyline-icons/cli search arrow
npx @keyline-icons/cli add circle-arrow-down bell --out src/icons
npx @keyline-icons/cli add bell --style fill --corners sharpGive an agent the set. @keyline-icons/mcp is an MCP server that searches
the set, returns SVG source in any style and corner treatment, and returns the
React import, so an assistant picks a real icon name rather than guessing one:
claude mcp add keyline-icons -- npx -y @keyline-icons/mcpAnything else that speaks MCP over stdio runs the same command; the package's own README has the JSON.
Use them outside React. The whole set is on
Iconify as keyline-icons,
which covers Vue, Svelte, Solid, web components and the Tailwind plugin. Stroke
is the bare name and everything else is a suffix on it:
keyline-icons:bell
keyline-icons:bell-fill
keyline-icons:bell-sharp-duotoneIconify re-imports from this repository, so it carries whatever the last release drew. The install page has the snippet for each framework.
Drop one onto a Figma canvas. The Figma plugin inserts any icon in any style and either corner treatment into the file you already have open, and the Community file is the whole set as components, with style, corners and container as variant properties.
67 icons come in a square- form and 72 in a circle- form, which wrap the
base drawing rather than replacing it:
icons/stroke/arrow-down.svg
icons/fill/square-arrow-down.svg
icons/sharp/duotone/circle-arrow-down.svgA square- or circle- prefix does not always mean a container. circle-half
and square-dashed are shapes in their own right, with no base for them to
contain, so they are filed as regular icons. The rule is that the base has to
exist before the prefix means anything.
Arrows, Chevrons & Carets, Git, Files, Time, Mail, Finance, Commerce, Maps, Home, Media, Charts, Diagrams, Devices, Pointers, Text, Layout, Users, Gender, Emoji, Actions, Controls, Education, AI, Science, Health, Sport, Food & Drink, Art, Tools, Stationery, Shapes, Web, Weather, Transport, Nature and Animals, plus the Square and Circle container groups.
What changed in each release, redraws included, is on the changelog.
raw/<name>/ Figma exports, untouched. The source of truth.
icons/<style>/ Generated SVGs, rounded. Do not hand-edit.
icons/sharp/<style>/ Generated SVGs, sharp. Do not hand-edit.
components/icons/ Generated React components. Do not hand-edit.
pipeline/ The build, the linter and the checks.
app/, components/ The site at keylineicons.com.
packages/ Publishable packages.Node 20.9 or newer, and pnpm.
pnpm install
pnpm dev # the site
pnpm icons:build # raw/ -> icons/
pnpm icons:react # icons/ -> components/icons/ and packages/react/
pnpm icons:lint # geometry and coverage rules
pnpm icons:ci # the icon checks; CI also runs pnpm lint and pnpm buildpipeline/README.md is the real documentation: what the build normalises, every
rule the linter enforces and why, how the Figma check works, and the standard a
new drawing has to meet. Read it before adding an icon. The drawing standard is
not a matter of taste here, it is measured, and the linter will tell you the
number it wanted.
Two checks deliberately sit outside CI. icons:figma needs the Figma file,
which CI does not have. brand:check rasterises through headless Chrome, where
two versions disagree by a pixel on identical input, and a check that cries wolf
gets switched off. Run both locally.
Preline, since August 2026.
The set is free, has no paid tier, and is not getting one. Sponsorship pays for the hours rather than unlocking anything, so every icon added is added for everyone.
Sponsoring on GitHub from $25 a
month puts your name in this section, and from $100 a month on
keylineicons.com as well. lib/sponsors.ts is the
list both read from.
Need icons the set does not have, drawn for your own product? Custom sets are drawn on the same grid and delivered as SVG, a Figma file and a React package. It is a separate paid service: the set stays free, and nothing drawn for a client changes it.
MIT. See LICENSE. Use them in anything, commercial included, without attribution.
The licence covers the icons and the code. It does not grant rights in the name "Keyline Icons".
What this set is: how many icons, which styles, and the rule that decides which icons have which style. Call this first when deciding whether the set covers what you need.
Inputs: no named parameters.
The full SVG source for one icon, ready to paste. Colour comes from currentColor, so it inherits whatever text colour is in scope.
Inputs: name (required), style, corners.
The import line and JSX for one icon from @keyline-icons/react. Each style is its own entry point because they do not cover the same icons, and sharp is one segment further along: @keyline-icons/react/sharp and /sharp/duotone. The export is called the same thing either way.
Inputs: name (required), style, corners.
Find icons by name. Returns matching names and which of the four styles each one has. Names are kebab-case and compounds read base-first, so a mail icon with a tick is mail-check, not check-mail. Search the base word to find a family. Word order does not matter and a component name from another set is accepted as written, so CheckCircle2 finds circle-check. Trust an empty result: it means the set has no such icon.
Inputs: query (required), limit, style.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 4 tools
Each tool has a clearly distinct purpose: search_icons finds icons by name, get_icon retrieves SVG source, get_react_usage retrieves React import/JSX, and describe_set explains the set. No two tools overlap in output or intent, and descriptions make the boundaries explicit.
All tool names follow a consistent verb_noun snake_case pattern: search_icons, get_icon, get_react_usage, describe_set. The verbs are clear and the naming convention is uniform throughout.
With 4 tools, the set is well-scoped for an icon library: discovery, retrieval in two formats, and set description. Each tool earns its place without redundancy or unnecessary bloat.
The core workflows—search, SVG retrieval, React usage, and set overview—are covered. A minor gap exists in browsing or listing all icons (e.g., no list-all or filter-by-style tool), but agents can work around it via search queries.
Search 1,104 UI icons in plain words and get them as SVG or React, in four styles.
Search 24px outline icons by name, tag, or category and get SVG or framework code.
Search and fetch 450,000+ free SVG icons and brand logos from 270+ open-source icon sets.
Icons for agentic development: search & fetch 366,000+ open-source icons as SVG/PNG. No API key.
