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)
[![installs](https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json)](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
[![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.

It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) 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

- Lucide already expanded the icon set by 130+ in less than 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)
  * [Preact](#preact)
  * [Static](#static-svg-sprite-font-icons-)
  * [Figma](#figma)
  * [Laravel](#laravel)
  * [Flutter](#flutter)
* [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 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](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/master/packages/lucide-angular#lucide-angular).

### Preact

Implementation of the lucide icon library for preact applications.

```sh
yarn add lucide-preact

# or

npm install lucide-preact
```

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

### Static (svg sprite, font, icons ..)

Assets:
[Font Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
[SVG Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)

NPM package

```sh
yarn add lucide-static

# or

npm install lucide-static
```

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

### Laravel

Implementation of Lucide icon's using `blade-icons` for Laravel based projects.

```sh
composer require mallardduck/blade-lucide-icons
```

For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).

### Flutter

Implementation of Lucide icon library for Flutter applications.

```sh
flutter pub add lucide_icons
```

For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).

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