Lucide
Community-driven icon set with consistent strokes, available as SVG or web fonts.
Open the official app on lucide.dev
This tool is hosted by its maintainers. Click below to open lucide.dev in a new tab — it's their official demo.
Browse design tools →What's next with Lucide?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Lucide?
Lucide is an open-source icon toolkit designed to provide developers and designers with a collection of scalable, consistent, and customizable vector icons. Built as a community-led fork of Feather Icons, it offers over 1,500 icons optimized for use in web applications. The project addresses the need for lightweight, framework-agnostic icons that maintain visual consistency across different UI components. Developers working with React, Vue, or Svelte frameworks commonly use Lucide to enhance user interfaces without bloating code. Its tree-shakable architecture ensures minimal bundle sizes, while its active community ensures continuous updates and improvements. The tool solves the problem of inconsistent icon styling, limited customization, and framework-specific dependencies by offering a unified, extensible icon system.
How it works
Lucide is a community-driven icon library that provides scalable vector graphics (SVG) icons optimized for web development. It serves as a replacement for Feather Icons, offering a larger collection of icons with stricter design rules for consistency. The primary purpose of Lucide is to enable developers to integrate high-quality, customizable icons into their applications without relying on third-party services. Its focus on lightweight design and framework compatibility makes it ideal for modern web projects. Lucide supports customization of color, stroke width, and size, allowing icons to align with specific UI themes. It includes framework-native bindings for React, Vue, and Svelte, enabling integration. The tree-shakable structure ensures only used icons are imported, reducing bundle sizes.
How to use it
- 1Install Lucide via npm, yarn, or pnpm. 2. Import specific icons or use the default icon set. 3. Customize color, size, and stroke width via props. 4. Integrate icons into HTML, React components, or framework-specific templates. Practical tips: Use the `@lucide/react` package for React projects, or `@lucide/svelte` for Svelte. For customization, pass props like `color='red'` or `stroke-width='2'` to override default settings.
What it can do
- icon set
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/lucide-icons/lucide
- license: ISC — free to use
- privacy: Self-hosted — you control your data
Limitations
- Limited icon variety compared to commercial icon libraries like Flaticon
- Requires manual customization for advanced styling beyond basic props
- Dependent on community contributions for new icon additions
- Potential compatibility issues with older framework versions
- No built-in icon search functionality in the core library
Understanding the result
Community-driven icon set with consistent strokes, available as SVG or web fonts.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (lucide-icons/lucide)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with lucide-icons/lucide. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
- ISC License
Upstream project
Frequently asked
How does Lucide ensure icon consistency across frameworks?
Lucide maintains consistency through strict design guidelines enforced by its community. Icons follow uniform stroke widths, spacing, and proportions. Framework-specific bindings (React, Vue, Svelte) preserve these design rules while adapting to each framework's component model. The ISC license also ensures standardized implementation across projects.
How does tree shaking work in Lucide?
Tree shaking in Lucide is achieved through its modular architecture. Each icon is exported as a separate component, allowing bundlers like Webpack or Vite to eliminate unused icons during the build process. This reduces final bundle size without sacrificing functionality, as only the required icons are included in the output.
How do I customize an icon's color and size?
To customize an icon, pass props to the icon component. For example, in React: `<Icon name='settings' color='blue' size={24} stroke-width='2' />`. The `color` prop overrides the default stroke color, `size` adjusts the icon's dimensions, and `stroke-width` modifies the line thickness. These props work across all supported frameworks.
How does Lucide compare to Feather Icons?
Lucide is a community-driven fork of Feather Icons, offering a larger icon set (1,500+ vs. Feather's 200+) and stricter design consistency. While both use similar SVG architecture, Lucide's active development and open contribution model provide faster updates. Feather remains simpler for minimal use cases, but Lucide is better for complex projects requiring extensive icon coverage.
What should I do if an icon is missing or not rendering?
First, verify the icon name matches exactly (case-sensitive) and is available in the Lucide repository. Check for typos in the import statement or component usage. If the icon is missing, it may not be included in the default export—try importing it explicitly. For framework-specific issues, consult the project's GitHub issues page or community forums for troubleshooting.