Keyline Icons MCP server

Keyline Icons

1,233 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.

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.

Rounded and sharp

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 9,864 SVGs in total.

icons/stroke/bell.svg
icons/sharp/stroke/bell.svg
icons/sharp/fill/bell.svg

Sharp 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.

Using them

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//.svg and icons/sharp//.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/react

import { 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.

Shortened. The full README is on GitHub.