Configs2026年4月11日·1 分钟阅读

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.

AI
AI Open Source · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

# React
npm i lucide-react

# Vue
npm i lucide-vue-next

# Svelte
npm i @lucide/svelte
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>
  );
}
介绍

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.

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Socket.IO — Bidirectional Realtime Event-Based Communication

Socket.IO is a library that enables low-latency, bidirectional, event-based communication between a client and server. Built on WebSocket with fallbacks, automatic reconnection, room-based broadcast, and first-class Node.js support.

AI Open Source

axios — Promise-Based HTTP Client for Browser & Node.js

axios is the most popular HTTP client for JavaScript — promise-based, isomorphic (browser + Node), with request/response interceptors, automatic JSON transforms, CSRF protection, and built-in cancellation. Battle-tested since 2014.

AI Open Source

Chakra UI — Accessible Component System for React

Chakra UI is a simple, modular, and accessible component system for building React applications. Every component follows WAI-ARIA guidelines with dark mode support out of the box and a themeable design token system.

AI Open Source
◈首页🔍搜索👤我的