lucide/docs/guide/installation.md

---
title: Installation
description: A guide on how to install Lucide, an open-source icon library, for various platforms and frameworks.
---

# Installation

## Web

Implementation of the Lucide icon library for web applications.

::: code-group

```sh [pnpm]
pnpm add lucide@next
```

```sh [yarn]
yarn add lucide@next
```

```sh [npm]
npm install lucide@next
```

```sh [bun]
bun add lucide@next
```

:::

For more details, see the [documentation](./lucide/index.md).

## React

Implementation of the Lucide icon library for React applications.

::: code-group

```sh [pnpm]
pnpm add lucide-react@next
```

```sh [yarn]
yarn add lucide-react@next
```

```sh [npm]
npm install lucide-react@next
```

```sh [bun]
bun add lucide-react@next
```

:::

For more details, see the [documentation](./react/index.md).
For React Native use the `lucide-react-native` package.

## Vue

Implementation of the Lucide icon library for Vue applications.

::: code-group

```sh [pnpm]
pnpm add @lucide/vue
```

```sh [yarn]
yarn add @lucide/vue
```

```sh [npm]
npm install @lucide/vue
```

```sh [bun]
bun add @lucide/vue
```

:::

For more details, see the [documentation](./vue/index.md).

## Svelte

Implementation of the Lucide icon library for Svelte applications.

::: code-group

```sh [pnpm]
pnpm add @lucide/svelte@next
```

```sh [yarn]
yarn add @lucide/svelte@next
```

```sh [npm]
npm install @lucide/svelte@next
```

```sh [bun]
bun add @lucide/svelte@next
```
:::
> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package.

For more details, see the [documentation](./svelte/index.md).

## Solid

Implementation of the Lucide icon library for Solid applications.

::: code-group

```sh [pnpm]
pnpm add lucide-solid@next
```

```sh [yarn]
yarn add lucide-solid@next
```

```sh [npm]
npm install lucide-solid@next
```

```sh [bun]
bun add lucide-solid@next
```

:::

For more details, see the [documentation](./solid/index.md).

## Angular

Implementation of the Lucide icon library for Angular applications.

::: code-group

```sh [pnpm]
pnpm add @lucide/angular
```

```sh [yarn]
yarn add @lucide/angular
```

```sh [npm]
npm install @lucide/angular
```

```sh [bun]
bun add @lucide/angular
```

:::

For more details, see the [documentation](./angular/index.md).

## Preact

Implementation of the Lucide icon library for preact applications.

::: code-group

```sh [pnpm]
pnpm add lucide-preact@next
```

```sh [yarn]
yarn add lucide-preact@next
```

```sh [npm]
npm install lucide-preact@next
```

```sh [bun]
bun add lucide-preact@next
```


:::

For more details, see the [documentation](./preact/index.md).

## Astro

Implementation of the Lucide icon library for Astro applications.

::: code-group

```sh [pnpm]
pnpm add @lucide/astro@next
```

```sh [yarn]
yarn add @lucide/astro@next
```

```sh [npm]
npm install @lucide/astro@next
```

```sh [bun]
bun add @lucide/astro@next
```

:::

For more details, see the [documentation](./astro/index.md).

## Static usage

Implementation of the Lucide icon library for multiple usages that like to use: SVG files icons, SVG Sprite, Icon Fonts and static SVG strings export in Common JS modules (for NodeJS).

::: code-group

```sh [pnpm]
pnpm add lucide-static@next
```

```sh [yarn]
yarn add lucide-static@next
```

```sh [npm]
npm install lucide-static@next
```

```sh [bun]
bun add lucide-static@next
```

:::

For more details, see the [documentation](./static/index.md).

## Figma

The Lucide Figma plugin.

Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.

![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')