Keyline Icons: 580+ SVG Icons for React and shadcn/ui

Keyline Icons is a free icon library for React and shadcn/ui with 585 icons built on a consistent 24×24 grid. The collection comes in stroke, duotone, and fill styles, with React components and SVG files available for each supported icon.

For React projects, you can install the @keyline-icons/react package and import icons as components. shadcn/ui projects can install individual icons through the official registry and keep the source files inside the project. You can also copy SVG or JSX directly from the icon browser when you only need a few icons.

Features

• 2px keylines on a 24×24 grid.
• Native SVG props plus a size prop in React.
• currentColor for CSS and Tailwind color control.
• Individual shadcn registry items stored as local source files.
• Plain SVG output with no IDs or CSS classes.
• Browser-based SVG and JSX copy.
• CLI search and SVG export.
• Figma plugin, Community file, and MCP package.
• MIT license.

Use Cases

• Admin dashboards with icons across sidebars, tables, filters, actions, and status controls.
• Settings screens that use different icon styles for default, active, or emphasized states.
• Shared design systems that need matching icon assets in React and Figma.

How To Use Keyline Icons

Install the React Package

Install the React package for direct component imports.

npm i @keyline-icons/react

Basic React Usage

The main entry point exports stroke icons. Duotone and fill use their own import paths.

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"
export function Toolbar() {
  return (
    <div className="flex items-center gap-4">
      <Check className="size-4" />
      <ArrowUpRight size={20} />
      <Menu className="size-5 text-slate-600" />
      <FolderDuotone className="size-5" />
      <FolderFill className="size-5" />
    </div>
  )
}

Install Individual Icons with shadcn/ui

Add the Keyline registry to an existing components.json file.

{
  "registries": {
    "@keyline": "https://keylineicons.com/r/{name}.json"
  }
}

Stroke icons use the base name. Duotone and fill use a style prefix.

npx shadcn add @keyline/bell
npx shadcn add @keyline/duotone/bell
npx shadcn add @keyline/fill/bell

Search the registry from the terminal when you do not know the exact icon name.

npx shadcn search @keyline

Copy SVG or JSX from the Browser

The Keyline Icons browser lets you browse the collection and copy an icon as SVG or JSX.

The SVG output uses currentColor. CSS color values and Tailwind utilities such as text-slate-500 therefore control icon color directly.

Save SVG Files with the CLI

@keyline-icons/cli searches the collection and writes selected SVG files into a local directory.

npx @keyline-icons/cli search arrow
npx @keyline-icons/cli add circle-arrow-down bell --out src/icons

Stroke, Duotone, and Fill

Stroke contains all icons. Duotone and fill are available when the underlying glyph has a suitable filled region.

React Props and Styling

import { Bell } from "@keyline-icons/react"
import { Bell as BellFill } from "@keyline-icons/react/fill"
export function NotificationIcons() {
  return (
    <div className="flex items-center gap-4">
      <Bell className="size-4 text-slate-500" />
      <Bell
        size={24}
        strokeWidth={1.5}
        className="text-blue-600"
      />
      <BellFill className="size-5 text-red-600" />
    </div>
  )
}

Use Keyline Icons Inside shadcn/ui Components

shadcn/ui Button applies size classes to nested SVG elements. Set an explicit Tailwind size class on the icon when you want to override the Button default.

import { Button } from "@/components/ui/button"
import { Plus } from "@keyline-icons/react"
export function CreateProjectButton() {
  return (
    <Button>
      <Plus className="size-5" />
      New Project
    </Button>
  )
}

Replace Lucide Icons

Keyline and Lucide both use a 24×24 grid, 2px stroke width, and currentColor. Matching export names require only an import change.

- import { Check, Menu } from "lucide-react"
+ import { Check, Menu } from "@keyline-icons/react"

Figma

The Keyline Icons Figma plugin inserts icons from the collection into an open Figma or FigJam file.

The project also publishes a Figma Community file with the icon set available as components.

MCP Support

@keyline-icons/mcp exposes icon search, SVG source, and React import data to MCP clients.

Add the MCP server to Claude Code:

claude mcp add keyline-icons -- npx -y @keyline-icons/mcp

Alternatives and Related Resources

• Searchable, Customizable Icon Picker for shadcn/ui
• Animated Icon Components for React and Next.js – Its Hover
• Lightweight React SVG Icon Library – MX Icons
• CSS Property SVG Icon Components for React – Cascade

FAQs

Q: Do I need React to use Keyline Icons?
A: No. The icon browser provides SVG and JSX output, and the repository contains plain SVG files for each style.

Q: Why is an icon missing from the fill or duotone import?
A: Stroke is the complete collection. Fill and duotone are available only for icons with suitable geometry for those styles.

Q: Why does the size prop not change an icon inside a shadcn/ui Button?
A: Button styles nested SVG elements through CSS. Set the icon size with a Tailwind class such as className="size-5".

Q: Can I use Keyline Icons in commercial projects?
A: Yes. The icons and project code use the MIT license.

Q: Can I replace Lucide icons with Keyline Icons?
A: Matching icon names need an import-source change. Check unmatched names in the Keyline browser and remove any Lucide-specific absoluteStrokeWidth props.