125 lines
4.1 KiB
Markdown
125 lines
4.1 KiB
Markdown
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
|
||
|
||
# Lucide
|
||
|
||
|
||
[](https://www.npmjs.com/package/lucide)
|
||
[](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)
|
||
* [Angular](#angular)
|
||
* [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).
|
||
|
||
### Angular
|
||
|
||
```sh
|
||
yarn add lucide-angular
|
||
|
||
# or
|
||
|
||
npm install lucide-angular
|
||
```
|
||
|
||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular/projects/lucide-angular#lucide-angular).
|
||
|
||
### Figma
|
||
|
||
The lucide figma plugin.
|
||
|
||
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
|
||
|
||
<img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="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
|
||
|
||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
||
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
||
</a>
|