Lucide Icons
Lucide Icons
A compact, consistent, free icon set.
An open-source set of thin-stroke icons, usable for the web, React and design.
Overview
Lucide is an open-source icon library developed by the community, providing SVG icons with consistent strokes. At the time of checking, the search tool on the homepage showed more than 1,800 icons, released under the ISC license.
Each icon can be adjusted in color, size and stroke width. The library supports tree-shaking, meaning only the icons actually imported are bundled at build time, making pages lighter.
Lucide has separate packages for many platforms such as plain JavaScript, React, React Native, Vue, Svelte, Solid, Angular, Preact and Astro, so it suits most web and app projects today.
Highlights
Consistent style
Icons follow a strict set of design rules, so they look harmonious side by side.
Flexible customization
Change color, size and stroke width, with an option to keep strokes at a fixed width instead of scaling.
Light and sharp
Icons are optimized SVG, so they stay crisp when scaled.
Tree-shakable
Only the icons you import end up in the build.
Many frameworks supported
Packages for React, Vue, Svelte, Angular, Astro, React Native and static SVG files.
ISC license
Open source with a license that is easy to use for personal and commercial projects.
What it's for
Menus and navigation bars
Use thin-stroke icons for website and admin menus to keep the interface clean and professional.
Action buttons
Adding icons to add, edit, delete and download buttons helps users recognize them quickly.
Mobile apps
Use the React Native package to keep the same icon set across web and app.
Consistent brand design
Adjust color and stroke width to the brand identity so every screen is in sync.
How to use it
- 1
Choose a package for your framework
Determine whether the project uses React, Vue, Svelte or plain JavaScript to pick the right package.
- 2
Install the React package
For a React project, install the lucide-react package.
$npm install lucide-react - 3
Find icons on the homepage
Use the search box on lucide.dev to find icons by English keyword.
- 4
Import and place in the interface
Import only the icons you need by name, then adjust size, color, strokeWidth.
Video guides
Lucide Icons in React / Next.js project with lucide-react
Tutorend
These Icon Libraries Are Made In Heaven
Josef Bender
Real-world example
A small marketing agency in Da Nang is rebuilding a campaign management page for a client. Previously each screen used icons from different sources, so it looked messy. The dev team switches to Lucide, installs the lucide-react package, and standardizes one stroke width and size for all menus, buttons and stat cards. Thanks to tree-shaking, the build contains only the icons actually used.
Tips & notes
Standardize stroke width
Choose one strokeWidth value for the whole project so the interface is consistent.
Import icons individually
Import by specific icon name to take advantage of tree-shaking.
Use the static package when there is no framework
The lucide-static package provides SVG files, sprites and icon fonts for static pages.
FAQ
Is Lucide free?
Yes, Lucide is open source under the ISC license.
Can it be used with Vue or Svelte?
Yes, Lucide has separate packages for Vue, Svelte, Solid, Angular, Preact, Astro and many other platforms.
Can I download SVG files to use in designs?
Yes, the lucide-static package provides icons as SVG files, sprites and icon fonts.
Useful links
Want to apply this in your business?
2dm looks at your workflows, picks the right tools and sets them up with your team. The first call is free.
Same topic
shadcn/ui
4.5
A set of UI components for React and Tailwind CSS: copy the code into your project, then customize it.
Tailwind CSS
4.5
A utility-class CSS framework for building interfaces quickly right in HTML.
Radix UI
4.0
Unstyled React components with keyboard and accessibility handling built in; shadcn/ui is built on top of it.