Lucide Icons

Every Lucide icon, ready to drop into your project

Lucide is the open-source icon set used by shadcn/ui and thousands of web apps: clean, consistent line icons on a 24 px grid, released under the ISC License. Lucideicons puts all 1,903 of them in one fast, searchable place, with each icon's code for React, Vue, Svelte, Angular, Solid, plain HTML and the icon font.

Search matches icon names, Lucide's tags and the icons' old names, so "home" finds House and "trash" finds every delete icon. Each icon page also shows the matching icon in Microsoft's Fluent and Google's Material sets, for when you need the same idea in another design system.

How to use Lucideicons

1. Search. Type a name or an idea — "arrow", "user", "chart", "cart". Press / anywhere to jump to the search box.
2. Preview. Click an icon to open it in the editor. Try any color or a linear or radial gradient to see it next to your design.
3. Copy or download. Copy the icon as SVG, an HTML image, a Vue or React component, a CSS background or a Power Apps formula, or download SVG, PNG (512 px), WEBP or a component file. Each icon's page has the lucide-react import and code for every other framework, plus the icon font class and code point.
4. Collect. Heart the icons you need. Favorites are saved in your browser, and you can download them all at once as a ZIP.

Lucide icons for your framework

Lucide ships an official package for each framework, with every icon as a component: lucide-react, @lucide/vue, @lucide/svelte, @lucide/angular, lucide-solid and lucide-react-native, plus the lucide package for plain JavaScript and lucide-static for SVG files and the icon font. Each icon page here gives the exact component name and import for each one. The Lucide icons list has every icon name A–Z, and categories group them the way Lucide does.

Frequently asked questions

Are Lucide icons free for commercial use?

Yes. Lucide is released under the ISC License, a short permissive license like MIT, and the icons that came from Feather are also MIT licensed. You can use them in commercial and personal projects and modify them. If you redistribute the icons themselves, include the license text. See the license page and the license guide.

What's the difference between Lucide and Feather icons?

Lucide started as a community fork of Feather, which stopped adding icons. Lucide keeps Feather's style and has grown to many times more icons, with official packages for each framework. Feather icons still exist in Lucide, sometimes under new names: search for the old name here to find them.

Is Lucideicons made by the Lucide team?

No. Lucideicons is an independent, free viewer for the open-source icon set. It isn't affiliated with or endorsed by the Lucide project. The icons themselves are the work of Lucide's contributors; the official site is lucide.dev.

How do I change an icon's size, color or stroke width?

Lucide's components take size, color and strokeWidth props (stroke-width in Vue and Svelte). Icons use currentColor, so they also follow the text color. In a plain SVG, change the width, height, stroke and stroke-width attributes on the svg element. The React guide has examples.

Why can't I find an icon by its old name?

Lucide renames icons now and then (home became house, for example) and keeps the old name working as an alias. Search here matches both, and each icon page lists its old names. You can also browse every icon A–Z.

Guides

• How to use Lucide icons in React and Next.js
• Lucide icons in Vue, Svelte, Angular and plain HTML
• Lucide vs Heroicons: which icon set should you use?
• Lucide license: can you use Lucide icons commercially?

Looking for Fluent or Material icons?

Our sister sites do the same for other open-source sets: Fluenticons for Microsoft's Fluent UI System Icons (Windows 11 and Microsoft 365), and Materialicons for Google's Material Symbols.