lucide/README.md

<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>

# 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 2](#vue-2)
  * [Vue 3](#vue-3)
  * [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/tree/master/packages/lucide#lucide).

### 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 2

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).

### Vue 3

Implementation of the lucide icon library for vue applications.

```sh
yarn add lucide-vue-next

# or

npm install lucide-vue-next
```

For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next).

### 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#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>