Lucide Icons

Q: How do I use Lucide icons in React?

Install the package with npm install lucide-react, then import icons as components. Every Lucide page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

What Lucide is

Lucide began as a fork of Feather Icons when Feather's release cadence slowed and community pull requests began to pile up. Rather than let the project stall, contributors created Lucide with an explicit commitment to community governance and regular releases. It has since grown well past its parent: 1,979 icons against Feather's 286.

Every Lucide icon is drawn on a 24×24 grid with a default 2px stroke, rounded caps and joins, and no fill. That consistency is the library's main selling point — icons from different contributors still look like they belong in the same interface. The set covers the full range of product UI needs: navigation, files, media, commerce, communication, devices, and development.

IconStash indexes the complete Lucide Icons collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.

React

npm install lucide-react

The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any Lucide icon on IconStash and the Code tab shows that icon's exact import statement and JSX.

Plain SVG and other frameworks

You do not have to install anything. Every Lucide page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.

IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.

Good fit

SaaS dashboards, developer tools, documentation sites, and any product that wants a calm, neutral, geometric icon language. Lucide is particularly strong in dense interfaces because its uniform stroke weight stays legible at 16px and 20px.

Consider alternatives

If you need multiple weights from one library, Phosphor offers six. If you need filled icons, IconPark Solid or Material Design Icons are better choices, since Lucide is outline-only.

Licensing

ISC. Functionally equivalent to MIT for practical purposes — commercial use, modification, and redistribution are all permitted with no attribution requirement. This makes Lucide safe for client work and proprietary products where CC BY libraries like Solar Icons would require credit.

Library	Icons	Style	License
Lucide Icons	1,979	Outline	ISC
Feather Icons	286	Outline	MIT
Tabler Icons	6,324	Outline	MIT
Heroicons	1,297	Outline & solid	MIT
Phosphor Icons	9,198	Six weights	MIT

Navigation & Maps

Map Globe A Arrow Down

Communication & Messaging

Bell Mail Phone Share

Files & Documents

Folder File Book Paperclip

Media & Photography

Image Video Music Camera

Media icons Communication icons Commerce icons Navigation icons Files icons Editing icons Devices icons Development icons Security icons Health icons Weather icons Transport icons Social icons Time icons Data icons Interface icons

What is Lucide Icons?

Lucide began as a fork of Feather Icons when Feather's release cadence slowed and community pull requests began to pile up. Rather than let the project stall, contributors created Lucide with an explicit commitment to community governance and regular releases. It has since grown well past its parent: 1,979 icons against Feather's 286.

Is Lucide Icons free for commercial use?

Yes. Lucide Icons is released under the ISC license, a permissive license functionally equivalent to MIT. Commercial use, modification, and distribution are all permitted with no attribution requirement, making it safe for client work, commercial SaaS, and proprietary products.

How do I use Lucide icons in React?

Install the package with npm install lucide-react, then import icons as components. Every Lucide page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.

Can I download Lucide icons as PNG?

Yes. Open any Lucide icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.

What stroke width do Lucide icons use?

Lucide icons default to a 2px stroke on a 24×24 grid. Because the icons are vector-based you can adjust stroke weight freely — IconStash lets you set any stroke width from 0.1 to 3 and preview the result live before exporting. Thinner strokes around 1.5px suit dense interfaces; heavier strokes work better for large display sizes.

How is Lucide different from Feather Icons?

Lucide started as a fork of Feather after Feather's development slowed. Lucide keeps Feather's minimal 24×24 outline aesthetic but has grown to 1,979 icons versus Feather's 286, adds new icons far more frequently, and maintains an official React package. If you need breadth, choose Lucide; if you want the smallest possible set, Feather still works.

Feather Icons Tabler Icons Heroicons Phosphor Icons Fluent UI Icons Material Symbols Material Symbols Light Material Design Icons