# Lucide — Beautiful & Consistent Icon Toolkit

> Lucide is a beautiful and consistent icon toolkit made by the community — a fork of Feather Icons with 1500+ crisp, minimalist SVG icons. First-class React, Vue, Svelte, Solid, Angular, and Web Component libraries.

## Install

Save in your project root:

## Quick Use

```bash
# React
npm i lucide-react

# Vue
npm i lucide-vue-next

# Svelte
npm i @lucide/svelte
```

```tsx
import { Home, User, Settings, Search } from "lucide-react";

function Nav() {
  return (
    <nav>
      <Home size={24} strokeWidth={2} />
      <Search size={24} color="hsl(var(--primary))" />
      <User size={24} className="text-gray-500" />
      <Settings size={24} />
    </nav>
  );
}
```

## Intro

Lucide is a beautiful and consistent icon toolkit made by the community — a fork of Feather Icons that has grown far beyond the original. 1500+ icons, all designed on a 24x24 grid with 2px stroke. The default icon set of shadcn/ui, ChatGPT, Vercel dashboard, and many others.

- **Repo**: https://github.com/lucide-icons/lucide
- **Stars**: 22K+
- **Language**: TypeScript
- **License**: ISC

## What Lucide Does

- **1500+ icons** — consistent minimalist style
- **Customizable** — size, color, strokeWidth via props
- **Tree-shakeable** — only imported icons ship
- **Framework packages** — React, Vue, Svelte, Solid, Angular, Web Components, React Native, Preact, Ember, Astro
- **Icon font** — optional CSS/font version
- **Figma plugin** — drop icons directly into designs
- **SVG source** — use raw SVG files if you prefer

## Architecture

Single source: SVG files on a 24x24 grid. Build pipeline generates framework-specific packages. Each icon is a component that accepts `size`, `color`, `strokeWidth`, and any SVG prop.

## Self-Hosting

Client library — ships in your bundle.

## Key Features

- 1500+ icons
- Consistent 24x24 design grid
- Framework packages for 10+ frameworks
- Tree-shakeable imports
- Customizable stroke, size, color
- Web-optimized SVGs
- Free forever (ISC)
- Active community PRs

## Comparison

| Set | Icons | Style | License | Formats |
|---|---|---|---|---|
| Lucide | 1500+ | Minimalist stroke | ISC | All |
| Heroicons | 300+ | Outline/solid | MIT | React/Vue |
| Phosphor | 1200+ | 6 weights | MIT | All |
| Tabler | 5000+ | Minimalist stroke | MIT | All |
| Feather | 280 | Original | MIT | Svg |
| Radix Icons | 300 | 15x15 | MIT | React |

## 常见问题 FAQ

**Q: Lucide 和 Feather 区别？**
A: Lucide 是 Feather 的社区 fork（原项目维护停滞）。兼容 Feather 的全部图标，并新增 1200+ 个。

**Q: 如何只打包用到的图标？**
A: 用 named imports：`import { Home } from "lucide-react"`。Bundler 自动 tree-shake。

**Q: 能自定义颜色？**
A: 能。传 `color` prop 或用 CSS `currentColor`（默认 stroke="currentColor"）。

## 来源与致谢 Sources

- Docs: https://lucide.dev
- GitHub: https://github.com/lucide-icons/lucide
- License: ISC

---
Source: https://tokrepo.com/en/workflows/4fa5cff1-3580-11f1-9bc6-00163e2b0d79
Author: AI Open Source