Lucide Icons
Beautiful & consistent open-source icons
STATS
OVERVIEW
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,400 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.
Lucide is built from the ground up with modern development workflows in mind. It is fully tree-shakable, meaning your production bundle only includes the icons you actually import. It ships with complete TypeScript definitions, so you get full autocomplete and type safety in VS Code. The library supports React, Vue, Svelte, Angular, and vanilla JavaScript through separate packages.
// VERDICTFor most projects starting in 2026, Lucide Icons is the default recommendation. It hits the sweet spot between icon variety, visual quality, bundle size, and developer experience. The only reason to look elsewhere is if you need filled/duotone variants or a significantly larger icon set.
INSTALLATION
npm install lucide-react
npm install lucide-react // Note: Works with both App Router and Pages Router out of the box. No additional configuration needed.
npm install lucide-vue-next
npm install lucide-svelte
npm install lucide
CODE EXAMPLES
import { Home, Settings, User } from 'lucide-react'
export default function App() {
return (
<div>
<Home size={24} />
<Settings size={24} color="#6366f1" />
<User size={24} strokeWidth={1.5} />
</div>
)
}import { Bell } from 'lucide-react'
export default function Navbar() {
return (
<button className="flex items-center gap-2">
<Bell className="h-5 w-5 text-gray-500" />
<span>Notifications</span>
</button>
)
}// app/page.tsx
import { ArrowRight, Github, Star } from 'lucide-react'
export default function Page() {
return (
<main>
<h1>Welcome</h1>
<a href="/docs">
Get Started <ArrowRight size={16} />
</a>
</main>
)
}