Keyline IconsIcons

About Keyline Icons

Keyline Icons is a free MIT-licensed icon library of more than 1,200 icons, each drawn in eight styles: stroke, two-tone, duotone and fill, in both rounded and sharp versions. Stroke icons use 2px keylines on a 24px grid. Two-tone places the stroke drawing over a soft plate, duotone drops the outline for a grey body with full-strength detail, and fill is solid with the detail knocked out. The sharp family uses butt caps and square corners and is drawn separately, not filtered from the rounded set, so it holds up in strict, angular interfaces. The library is built with shadcn/ui in mind and ships a shadcn registry, a React package (@keyline-icons/react) with per-style entry points and a React Native package. Coverage spans arrows, git, files, charts, AI, science, health, food, weather and transport, with container forms (square and circle) for many icons. Search all Keyline styles here, copy SVG, export JSX or download PNG. Compared with Lucide, Keyline trades size for style depth. Ideal for shadcn/ui apps and design systems that need filled and outline states from one source.

How to use Keyline Icons icons

npm install @keyline-icons/react

import { ArrowUpRight, Check, Menu } from '@keyline-icons/react';
import { Check as CheckFill } from '@keyline-icons/react/fill';

export default function App() {
  return <ArrowUpRight size={20} />;
}

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="keyline-icons:icon-name" width="24"></iconify-icon>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="keyline-icons:icon-name" width={24} />;
}

Keyline Icons version history

Based on the last 10 releases, Keyline Icons typically ships a new version every ~2 days. The latest release, v2.0.0, landed on Oct 18, 2026.

Source: npm registry data for @keyline-icons/react, refreshed weekly.

Compare Keyline Icons with similar icon packs