Lucide Icons
Lucide is one of the most popular open-source icon libraries in the developer ecosystem today. It was forked from Feather Icons in 2020 to address the lack of active maintenance, and has since grown into a thriving community-driven project with over 1,900 carefully crafted icons. Every icon in Lucide is designed on a strict 24x24 grid with a 2px stroke width, ensuring perfect visual consistency across your entire application. Whether you use 5 icons or 500, they will all look like they belong together — something that cannot be said for many competing libraries. The collection is licensed under ISC; review the icon license guide for commercial-use details.
Lucide Icons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 3,947 vector SVG icons |
| License | ISC (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | lucide-react |
| Source Repository | Official GitHub Repository → |
How many icons does Lucide Icons have?
Lucide Icons currently includes 3,947 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Lucide Icons free for commercial use?
Yes, Lucide Icons is distributed under the ISC license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Lucide Icons in React, Next.js, and Vue?
Install the package using npm install lucide-react, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install lucide-react
// React & Next.js App Router usage
import { AArrowDown } from 'lucide-react'
export default function Header() {
return <AArrowDown className="w-5 h-5 text-indigo-500" />
}Lucide Icons FAQ & Technical Guide
Is Lucide Icons free for commercial use?
Yes. Lucide uses the ISC license which is one of the most permissive open source licenses. You can use it in any commercial project without attribution.
Does Lucide Icons work with Next.js App Router?
Yes. Lucide React components are compatible with both the Next.js App Router and Pages Router. They work in both Server Components and Client Components without any configuration.
How do I change the size and color of a Lucide icon?
Use the size prop for dimensions (default 24) and the color prop for color. You can also use the strokeWidth prop to change the thickness. Alternatively, pass a className with Tailwind utilities like h-5 w-5 text-blue-500.
Is Lucide Icons the same as Feather Icons?
Lucide started as a fork of Feather Icons but has since diverged significantly. Feather has 287 icons and is no longer actively maintained. Lucide has 1,900+ icons with active development and a large community.
How big is Lucide in my bundle?
Each icon is approximately 0.5-1kb when tree-shaken. If you import 20 icons, you add roughly 10-20kb to your bundle — negligible for most applications.