Awesome
<p align="center"> <a href="https://github.com/lucide-icons/lucide#gh-light-mode-only"> <img src="https://lucide.dev/lucide-logo-repo.svg#gh-light-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480"> </a> <a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only"> <img src="https://lucide.dev/lucide-logo-repo-dark.svg#gh-dark-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480"> </a> </p> <p align="center"> <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a> <a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a> <a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a> <a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a> <a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a> </p>Lucide
Community-run fork of Feather Icons, open for anyone to contribute icons.
It began after growing dissatisfaction with the Feather Icons project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
Why choose Lucide over Feather Icons
- More icons to work with: Lucide already has hundreds of icons more than Feather does.
- Official libraries and integrations with popular frameworks and design tools.
- Well maintained code base.
- Active community, regularly growing and improving the set.
Table of Contents
Usage
At its core, Lucide is a collection of SVG files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. img
, background-image
, inline
, object
, embed
, iframe
). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use Lucide. With the Javascript library you can easily incorporate the icon you want in your webpage.
Web
Implementation of the lucide icon library for web applications.
npm install lucide
or
yarn add lucide
For more details, see the documentation.
React
Implementation of the lucide icon library for react applications.
yarn add lucide-react
or
npm install lucide-react
For more details, see the documentation.
React Native
Implementation of the lucide icon library for React Native applications.
yarn add lucide-react-native
or
npm install lucide-react-native
For more details, see the documentation.
Vue 2
Implementation of the lucide icon library for vue applications.
yarn add lucide-vue
or
npm install lucide-vue
For more details, see the documentation.
Vue 3
Implementation of the lucide icon library for vue applications.
yarn add lucide-vue-next
or
npm install lucide-vue-next
For more details, see the documentation.
Angular
yarn add lucide-angular
or
npm install lucide-angular
For more details, see the documentation.
Preact
Implementation of the lucide icon library for preact applications.
yarn add lucide-preact
or
npm install lucide-preact
For more details, see the documentation.
Static (svg sprite, font, icons ..)
Assets: Font Files SVG Files SVG Sprite
NPM package
yarn add lucide-static
or
npm install lucide-static
Figma
The lucide figma plugin.
Visit Figma community page to install the plugin.
<img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="Figma Lucide Cover">Laravel
Implementation of Lucide icon's using blade-icons
for Laravel based projects.
composer require mallardduck/blade-lucide-icons
For more details, see the documentation.
Svelte
Implementation of the lucide icon library for Svelte applications.
yarn add lucide-svelte
or
npm install lucide-svelte
For more details, see the documentation.
Solid
Implementation of the lucide icon library for solid applications.
yarn add lucide-solid
or
npm install lucide-solid
For more details, see the documentation.
Hyva
Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.
composer require siteation/magento2-hyva-icons-lucide
For more details, see the documentation.
Eleventy
Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.
npm install @grimlink/eleventy-plugin-lucide-icons
For more details, see the documentation.
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Community
Join the community on our Discord server!
License
Lucide is totally free for commercial use and personally use, this software is licensed under the ISC License.
Credits
Thank you to all the people who contributed to Lucide!
<a href="https://github.com/lucide-icons/lucide/graphs/contributors"> <img src="https://opencollective.com/lucide-icons/contributors.svg?width=890" /></a>Sponsors
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss"> <img src="docs/public/vercel.svg" alt="Powered by Vercel" width="200" /> </a><a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
Awesome backer 🍺
<a href="https://www.scipress.io?utm_source=lucide"><img src="docs/public/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>