Lucide Logo

# Lucide ![NPM](https://img.shields.io/npm/l/lucide) [![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide) [![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts) ## What is Lucide? Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons. Started after growing disaffection of the moderation of the [Feather Icons](https://github.com/feathericons/feather) project, with over 300+ open issues and over 100+ open PRs, this project is no longer maintained. The owner of the project stopped merging icons and want to keep the project like it now is. Hundreds of developers/designer wasted their time trying to contribute, what a shame. We're trying to expanding the icon set as much as possible while keeping it nice-looking, we do it as a community of devs and designers, join us! ### Why choose Lucide over Feather Icons - Lucide already expended the icon set by 130+ in less then a year, so more icons to work with. - Well maintained code base. - Active community. ## Table of Contents * [Installation](#installation) * [Package managers](#package-managers) * [CDN](#cdn) * [Usage](#usage) * [Web](#web) * [React](#react) * [Vue](#vue) * [Figma](#figma) * [Contributing](#contributing) * [Community](#community) * [License](#license) ## Usage At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather 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](https://svgontheweb.com/#implementation) 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. ```sh npm install lucide #or yarn add lucide ``` For more details, see the [documentation](https://github.com/lucide-icons/lucide/blob/master/packages/lucide-react/README.md). ### React Implementation of the lucide icon library for react applications. ```sh yarn add lucide-react # or npm install lucide-react ``` For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react). ### Vue Implementation of the lucide icon library for vue applications. ```sh yarn add lucide-vue # or npm install lucide-vue ``` For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue). ### Figma The lucide figma plugin. Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin. Figma Lucide Cover ## Contributing For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md). Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md) ## Community Join the community on our [Discord](https://discord.gg/EH6nSts) server! ## License Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE). ## Sponsors Powered by Vercel