Lucide

https://lucide.dev/guide/
Admin
Lucide is an open-source icon library providing over 1000 vector (SVG) files and official packages...
Tokens:50,337
Snippets:559
Trust Score:9.6
Update:13 hours ago
Show doc for...
Tokens:
Raw
### Install lucide-static with bun

Source: https://lucide.dev/guide/static/getting-started

Install the lucide-static package using bun.

```sh
bun add lucide-static
```

--------------------------------

### Install @lucide/solid with bun

Source: https://lucide.dev/guide/solid/getting-started

Install the @lucide/solid package for Solid 2 using bun.

```sh
bun add @lucide/solid
```

--------------------------------

### Install lucide-solid with bun

Source: https://lucide.dev/guide/solid/getting-started

Install the lucide-solid package for Solid 1 using bun.

```sh
bun add lucide-solid
```

--------------------------------

### Install @lucide/solid with pnpm

Source: https://lucide.dev/guide/solid/getting-started

Install the @lucide/solid package for Solid 2 using pnpm.

```sh
pnpm add @lucide/solid
```

--------------------------------

### Install @lucide/solid with yarn

Source: https://lucide.dev/guide/solid/getting-started

Install the @lucide/solid package for Solid 2 using yarn.

```sh
yarn add @lucide/solid
```

--------------------------------

### Install lucide-static with npm

Source: https://lucide.dev/guide/static/getting-started

Install the lucide-static package using npm.

```sh
npm install lucide-static
```

--------------------------------

### Install lucide-static with yarn

Source: https://lucide.dev/guide/static/getting-started

Install the lucide-static package using yarn.

```sh
yarn add lucide-static
```

--------------------------------

### Install @lucide/solid with npm

Source: https://lucide.dev/guide/solid/getting-started

Install the @lucide/solid package for Solid 2 using npm.

```sh
npm install @lucide/solid
```

--------------------------------

### Install lucide-static with pnpm

Source: https://lucide.dev/guide/static/getting-started

Install the lucide-static package using pnpm.

```sh
pnpm add lucide-static
```

--------------------------------

### Install lucide-react with npm

Source: https://lucide.dev/guide/react/getting-started

Use npm to install the lucide-react package.

```sh
npm install lucide-react
```

--------------------------------

### CDN usage example

Source: https://lucide.dev/guide/lucide/getting-started

Complete HTML example using Lucide via CDN, with icons and calling lucide.createIcons().

```html
<!DOCTYPE html>
<body>
  <i data-lucide="volume-2" class="my-class"></i>
  <i data-lucide="x"></i>
  <i data-lucide="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>
```

--------------------------------

### Install lucide-solid with yarn

Source: https://lucide.dev/guide/solid/getting-started

Install the lucide-solid package for Solid 1 using yarn.

```sh
yarn add lucide-solid
```

--------------------------------

### Install lucide-solid with pnpm

Source: https://lucide.dev/guide/solid/getting-started

Install the lucide-solid package for Solid 1 using pnpm.

```sh
pnpm add lucide-solid
```

--------------------------------

### Install lucide-react with bun

Source: https://lucide.dev/guide/react/getting-started

Use bun to add the lucide-react package to your project.

```sh
bun add lucide-react
```

--------------------------------

### Install Lucide with bun

Source: https://lucide.dev/guide/lucide/getting-started

Install the Lucide package using the bun package manager.

```sh
bun add lucide
```

--------------------------------

### Install lucide-solid with npm

Source: https://lucide.dev/guide/solid/getting-started

Install the lucide-solid package for Solid 1 using npm.

```sh
npm install lucide-solid
```

--------------------------------

### Install @lucide/svelte with pnpm

Source: https://lucide.dev/guide/svelte/getting-started

Install the Lucide Svelte package using pnpm.

```sh
pnpm install @lucide/svelte
```

--------------------------------

### Install lucide-preact with bun

Source: https://lucide.dev/guide/preact/getting-started

Adds the lucide-preact package to your Preact project using bun.

```sh
bun add lucide-preact
```

--------------------------------

### Install lucide-preact for Preact with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Preact applications using deno.

```sh
deno add lucide-preact
```

--------------------------------

### Install @lucide/astro with bun

Source: https://lucide.dev/guide/astro/getting-started

Use bun to add the Lucide Astro package to your project.

```sh
bun add @lucide/astro
```

--------------------------------

### Install lucide for Web with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for web applications using deno.

```sh
deno add lucide
```

--------------------------------

### Full HTML Example with JavaScript

Source: https://lucide.dev/guide/static/font

Complete HTML document that includes the icon-home class and references an external JavaScript file.

```html
<!DOCTYPE html>
<html>
  <body>
    <i class="icon-home"></i>

    <script src="index.js"></script>
  </body>
</html>
```

--------------------------------

### Install Lucide with yarn

Source: https://lucide.dev/guide/lucide/getting-started

Install the Lucide package using the yarn package manager.

```sh
yarn add lucide
```

--------------------------------

### Install lucide-react with yarn

Source: https://lucide.dev/guide/react/getting-started

Use yarn to add the lucide-react package to your project.

```sh
yarn add lucide-react
```

--------------------------------

### Install Lucide with pnpm

Source: https://lucide.dev/guide/lucide/getting-started

Install the Lucide package using the pnpm package manager.

```sh
pnpm add lucide
```

--------------------------------

### Install Lucide with npm

Source: https://lucide.dev/guide/lucide/getting-started

Install the Lucide package using the npm package manager.

```sh
npm install lucide
```

--------------------------------

### Install @lucide/astro for Astro with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Astro applications using deno.

```sh
deno add @lucide/astro
```

--------------------------------

### Install @lucide/angular with bun

Source: https://lucide.dev/guide/angular/getting-started

Install the Lucide Angular package using bun. Requires Angular 17+.

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

--------------------------------

### Install lucide-react with pnpm

Source: https://lucide.dev/guide/react/getting-started

Use pnpm to add the lucide-react package to your project.

```sh
pnpm add lucide-react
```

--------------------------------

### Install lucide-preact with pnpm

Source: https://lucide.dev/guide/preact/getting-started

Adds the lucide-preact package to your Preact project using pnpm.

```sh
pnpm add lucide-preact
```

--------------------------------

### Install @lucide/astro with npm

Source: https://lucide.dev/guide/astro/getting-started

Use npm to add the Lucide Astro package to your project.

```sh
npm install @lucide/astro
```

--------------------------------

### Install @lucide/vue for Vue with bun

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Vue applications using bun.

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

--------------------------------

### Install lucide-preact with yarn

Source: https://lucide.dev/guide/preact/getting-started

Adds the lucide-preact package to your Preact project using yarn.

```sh
yarn add lucide-preact
```

--------------------------------

### Install lucide-react and uninstall react-feather

Source: https://lucide.dev/guide/react/migration-from-feather

Run these commands to install lucide-react and remove react-feather from your project.

```sh
npm install lucide-react
npm uninstall react-feather
```

--------------------------------

### Install @lucide/astro with pnpm

Source: https://lucide.dev/guide/astro/getting-started

Use pnpm to add the Lucide Astro package to your project.

```sh
pnpm add @lucide/astro
```

--------------------------------

### Install lucide-react for React with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for React applications using deno.

```sh
deno add lucide-react
```

--------------------------------

### Node.js HTTP server example with Lucide icon

Source: https://lucide.dev/guide/static/js-modules/node

Complete example of an HTTP server that responds with an HTML page containing the MessageSquare icon. The icon is embedded directly into the HTML string. The server listens on 127.0.0.1:3000.

```javascript
import http from 'http';
import { MessageSquare } from 'lucide-static';

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');

  res.end(`
    <!DOCTYPE html>
    <html>
      <body>
        <h1>Lucide Icons</h1>
        <p>This is a Lucide icon ${MessageSquare}</p>

      </body>
    </html>
  `);
});

const hostname = '127.0.0.1';
const port = 3000;

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

--------------------------------

### Install lucide-preact with npm

Source: https://lucide.dev/guide/preact/getting-started

Adds the lucide-preact package to your Preact project using npm.

```sh
npm install lucide-preact
```

--------------------------------

### Install @lucide/vue for Vue with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Vue applications using deno.

```sh
deno add @lucide/vue
```

--------------------------------

### Install @lucide/astro with yarn

Source: https://lucide.dev/guide/astro/getting-started

Use yarn to add the Lucide Astro package to your project.

```sh
yarn add @lucide/astro
```

--------------------------------

### Install @lucide/angular with npm

Source: https://lucide.dev/guide/angular/getting-started

Install the Lucide Angular package using npm. Requires Angular 17+.

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

--------------------------------

### Install @lucide/angular with yarn

Source: https://lucide.dev/guide/angular/getting-started

Install the Lucide Angular package using yarn. Requires Angular 17+.

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

--------------------------------

### Install @lucide/angular with pnpm

Source: https://lucide.dev/guide/angular/getting-started

Install the Lucide Angular package using pnpm. Requires Angular 17+.

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

--------------------------------

### Advanced createIcons options

Source: https://lucide.dev/guide/lucide/getting-started

Full example of createIcons with custom attributes, nameAttr, root, and inTemplates options.

```js
import { createIcons } from 'lucide';

createIcons({
  attrs: {
    class: ['my-custom-class', 'icon'],
    'stroke-width': 1,
    stroke: '#333'
  },
  nameAttr: 'data-lucide', // attribute for the icon name.
  root: element, // DOM element to replace icons in.
  inTemplates: true // Also replace icons inside <template> tags.
});
```

--------------------------------

### Install @lucide/vue for Vue with npm

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Vue applications using npm.

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

--------------------------------

### Install @lucide/angular for Angular with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Angular applications using deno.

```sh
deno add @lucide/angular
```

--------------------------------

### Example of icon name resolution for LucideSquareCheck

Source: https://lucide.dev/guide/angular/advanced/icon-provider

Shows that registering LucideSquareCheck makes it available as 'square-check'.

```html
<svg lucideIcon="square-check"></svg>
```

--------------------------------

### Install @lucide/vue for Vue with pnpm

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Vue applications using pnpm.

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

--------------------------------

### Install @lucide/vue for Vue with yarn

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Vue applications using yarn.

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

--------------------------------

### Resizing with Tailwind

Source: https://lucide.dev/guide/lucide/basics/sizing

Use Tailwind's size-* utilities to adjust icon size. This example imports createIcons and PartyPopper from lucide and initializes the icon.

```javascript
import { createIcons, PartyPopper } from 'lucide/dist/cjs/lucide';
import "./styles.css";

createIcons({
  icons: {
    PartyPopper,
  }
});
```

--------------------------------

### Install @lucide/svelte for Svelte with bun

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Svelte applications using bun. Note: @lucide/svelte is only for Svelte 5; for Svelte 4 use lucide-svelte.

```sh
bun add @lucide/svelte
```

--------------------------------

### Install @lucide/svelte for Svelte with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Svelte applications using deno. Note: @lucide/svelte is only for Svelte 5; for Svelte 4 use lucide-svelte.

```sh
deno add @lucide/svelte
```

--------------------------------

### Install @lucide/svelte for Svelte with pnpm

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Svelte applications using pnpm. Note: @lucide/svelte is only for Svelte 5; for Svelte 4 use lucide-svelte.

```sh
pnpm add @lucide/svelte
```

--------------------------------

### Install @lucide/svelte for Svelte with npm

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Svelte applications using npm. Note: @lucide/svelte is only for Svelte 5; for Svelte 4 use lucide-svelte.

```sh
npm install @lucide/svelte
```

--------------------------------

### Using LucideIcon in Svelte 4

Source: https://lucide.dev/guide/svelte/advanced/typescript

Example for Svelte 4 using ComponentType<Icon> from lucide-svelte to type icon components. Imports Home, Library, Cog, and Icon from 'lucide-svelte', and ComponentType from 'svelte'.

```svelte
<script lang="ts">
  import { Home, Library, Cog, type Icon } from 'lucide-svelte';
  import type { ComponentType } from 'svelte';

  type MenuItem = {
    name: string;
    href: string;
    icon: ComponentType<Icon>;
  };

  const menuItems: MenuItem[] = [
    {
      name: 'Home',
      href: '/',
      icon: Home
    },
    {
      name: 'Blog',
      href: '/blog',
      icon: Library
    },
    {
      name: 'Projects',
      href: '/projects',
      icon: Cog
    }
  ];
</script>

{#each menuItems as item}
  {@const Icon = item.icon}
  <a href={item.href}>
    <Icon />
    <span>{item.name}</span>
  </a>
{/each}
```

--------------------------------

### Install lucide-solid for Solid with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for Solid applications using deno. Note: @lucide/solid is for Solid 2, for Solid 1 use lucide-solid. Solid 2 is still a release candidate.

```sh
deno add lucide-solid
```

--------------------------------

### Import and create icons with Lucide

Source: https://lucide.dev/guide/lucide/getting-started

Two ways to use createIcons: importing all icons (caution: bundles everything) or importing only the needed icons (recommended).

```js
import { createIcons, icons } from 'lucide';

// Caution, this will import all the icons and bundle them.
createIcons({ icons });

// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';

createIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});
```

--------------------------------

### After: Use provideLucideConfig() to set size

Source: https://lucide.dev/guide/angular/migration

New approach using @lucide/angular. Provides configuration via provideLucideConfig() in the providers array. Place it in AppModule.providers, bootstrapApplication providers, feature module providers, or component providers for standalone components.

```TypeScript
import { provideLucideConfig } from '@lucide/angular';

providers: [
  provideLucideConfig({ size: 12 }),
]
```

--------------------------------

### Import and use Camera from lucide-solid

Source: https://lucide.dev/guide/solid/getting-started

Import the Camera icon as a Solid component and render it. Only imported icons are included in the final bundle due to tree-shaking.

```jsx
import { Camera } from 'lucide-solid';

// Usage
const App = () => {
  return <Camera />;
};

export default App;
```

--------------------------------

### App.js - Filled star rating example

Source: https://lucide.dev/guide/preact/advanced/filled-icons

Example component using Star and StarHalf icons with fill and strokeWidth props to create a star rating. The first row shows five empty stars, the second row shows a partially filled rating. Requires importing lucide-preact and a CSS file.

```jsx
import { Star, StarHalf } from "lucide-preact";
import { h } from "preact";
import "./icon.css";

function App() {
  return (
    <div className="app">
      <div className="star-rating">
        <div className="stars">
          { Array.from({ length: 5 }, () => (
              <Star fill="#111" strokeWidth={0} />
          ))}
        </div>
        <div className="stars rating">
          <Star fill="yellow" strokeWidth={0} />
          <Star fill="yellow" strokeWidth={0} />
          <StarHalf fill="yellow" strokeWidth={0} />
        </div>
      </div>
    </div>
  );
}

export default App;
```

--------------------------------

### Install lucide-static for static usage with deno

Source: https://lucide.dev/guide/installation

Adds the Lucide icon library for static usage (SVG files, SVG Sprite, Icon Fonts, and static SVG strings in Common JS modules) using deno.

```sh
deno add lucide-static
```

--------------------------------

### Import Camera from @lucide/solid

Source: https://lucide.dev/guide/solid/getting-started

Import the Camera icon from the @lucide/solid package for Solid 2. The import specifier differs from lucide-solid.

```jsx
import { Camera } from '@lucide/solid';
```

--------------------------------

### Before: Standalone app config with LucideAngularModule.pick()

Source: https://lucide.dev/guide/angular/migration

Shows the old way of registering icons in a standalone Angular application using importProvidersFrom(LucideAngularModule.pick()). Replace with provideLucideIcons().

```typescript
import { ApplicationConfig } from '@angular/core';
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })),
  ]
};
```

--------------------------------

### Import and render Lucide Lab icons with Icon component

Source: https://lucide.dev/guide/astro/advanced/with-lucide-lab

Import the Icon component from @lucide/astro and icons from @lucide/lab. Pass the iconNode prop to render each icon, with optional props like color.

```astro
---
import { Icon } from '@lucide/astro';
import { burger, sausage } from '@lucide/lab';
---

<Icon iconNode={burger} />
<Icon iconNode={sausage} color="red"/>

```

--------------------------------

### Register icons with provideLucideIcons in app.config.ts

Source: https://lucide.dev/guide/angular/advanced/icon-provider

Use provideLucideIcons in your application providers to register built-in icons. This example registers LucideSquareCheck and LucideCircleAlert.

```ts
import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons, LucideSquareCheck, LucideCircleAlert } from '@lucide/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideIcons(
      LucideSquareCheck,
      LucideCircleAlert,
    ),
  ],
};
```

--------------------------------

### Resizing with Tailwind

Source: https://lucide.dev/guide/svelte/basics/sizing

Use Tailwind's `size-*` utilities to adjust the icon size. The example applies the `size-24` class to set the size.

```svelte
<script>
import PartyPopper from "@lucide/svelte/icons/party-popper";
</script>

<PartyPopper class="size-24" />
```

--------------------------------

### Adjust icon size with size prop

Source: https://lucide.dev/guide/react/basics/sizing

Use the size prop on an icon component to set its dimensions. In this example, the Landmark icon is rendered at 64px.

```jsx
import { Landmark } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Landmark size={64} />
    </div>
  );
}

export default App;
```

--------------------------------

### Adjust stroke width with strokeWidth prop

Source: https://lucide.dev/guide/lucide/basics/stroke-width

Example HTML that sets the stroke-width attribute to 1 on a folder-lock icon. The default stroke width is 2px.

```html
<!doctype html>
<html>
  <body>
    <i
      data-lucide="folder-lock"
      stroke-width="1"
    ></i>

    <script src="index.js"></script>
  </body>
</html>
```

--------------------------------

### Adjust icon size with size prop

Source: https://lucide.dev/guide/vue/basics/sizing

Use the size prop on the icon component to set its dimensions. In this example, the Landmark icon is rendered at 64 pixels.

```Vue
<script setup>
import { Landmark } from "@lucide/vue"
</script>

<template>
  <Landmark :size="64" />
</template>
```

--------------------------------

### Create multiple icons in a shadow DOM with createIcons

Source: https://lucide.dev/guide/lucide/advanced/shadow-dom

Use the createIcons function to render multiple Lucide icons within a shadow DOM. The example imports TreePalm, Volleyball, Waves, and createIcons from 'lucide/dist/cjs/lucide', creates a shadow root, sets up an icon wrapper with data-lucide attributes, and calls createIcons with the root option set to the shadow root.

```javascript
import "./styles.css";
import { TreePalm, Volleyball, Waves, createIcons } from 'lucide/dist/cjs/lucide';

const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ mode: 'open' });

const iconWrapper = document.createElement('div');
iconWrapper.innerHTML = `
<i data-lucide="tree-palm"></i>
<i data-lucide="volleyball"></i>
<i data-lucide="waves"></i>
`;
shadowRoot.appendChild(iconWrapper);

createIcons({
  root: shadowRoot,
  icons: {
    TreePalm,
    Volleyball,
    Waves,
  }
})
```

--------------------------------

### Adjust icon size with size prop

Source: https://lucide.dev/guide/solid/basics/sizing

Use the size prop on an icon component to set its dimensions. The example sets the Landmark icon to 64 pixels.

```tsx
import Landmark from 'lucide-solid/icons/landmark';

function App() {
  return (
    <div class="app">
      <Landmark size={64} />
    </div>
  );
}

export default App;
```

--------------------------------

### Dynamic icons: before and after

Source: https://lucide.dev/guide/angular/migration

Shows the legacy `<lucide-icon [name]>` and the new `<svg [lucideIcon]>` for icons that vary at runtime.

```html
<lucide-icon [name]="item.icon"></lucide-icon>
```

```html
<svg [lucideIcon]="item.icon"></svg>
```

--------------------------------

### Using LucideIcon for menu items

Source: https://lucide.dev/guide/astro/advanced/typescript

Demonstrates using the LucideIcon type to type an array of menu items with icon components. Imports House, Library, Cog, and Icon as IconType, defines a MenuItem type, and renders a list of links with icons.

```astro
---
import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';

type MenuItem = {
  name: string;
  href: string;
  icon: typeof IconType;
};

const menuItems: MenuItem[] = [
  {
    name: 'Home',
    href: '/',
    icon: House,
  },
  {
    name: 'Blog',
    href: '/blog',
    icon: Library,
  },
  {
    name: 'Projects',
    href: '/projects',
    icon: Cog,
  },
];
---

{
  menuItems.map((item) => (
    <a href={item.href}>
      <item.icon />
      <span>{item.name}</span>
    </a>
  ))
}
```

--------------------------------

### Adjust icon size with the size prop

Source: https://lucide.dev/guide/astro/basics/sizing

Use the `size` prop on an icon component to set its dimensions. In this example, the Landmark icon is rendered at 64 pixels.

```astro
---
import Landmark from '@lucide/astro/icons/landmark';
---

<Landmark size={64} />
```

--------------------------------

### Adjust icon size with the size prop

Source: https://lucide.dev/guide/svelte/basics/sizing

Use the `size` prop on a Lucide Svelte icon component to set its dimensions. The example sets the size to 64 pixels.

```svelte
<script>
import Landmark from '@lucide/svelte/icons/landmark';
</script>

<Landmark size={64} />
```
Tokens:
Raw