a-arrow-down

a-arrow-up

a-large-small

accessibility

activity

air-vent

airplay

alarm-clock

alarm-clock-check

alarm-clock-minus

alarm-clock-off

alarm-clock-plus

alarm-smoke

album

align-center-horizontal

align-center-vertical

align-end-horizontal

align-end-vertical

align-horizontal-distribute-center

align-horizontal-distribute-end

align-horizontal-distribute-start

align-horizontal-justify-center

align-horizontal-justify-end

align-horizontal-justify-start

align-horizontal-space-around

align-horizontal-space-between

align-start-horizontal

align-start-vertical

align-vertical-distribute-center

align-vertical-distribute-end

align-vertical-distribute-start

align-vertical-justify-center

align-vertical-justify-end

align-vertical-justify-start

align-vertical-space-around

align-vertical-space-between

ambulance

ampersand

ampersands

amphora

anchor

angry

annoyed

antenna

anvil

aperture

app-window

app-window-mac

apple

archive

archive-restore

archive-x

armchair

arrow-big-down

arrow-big-down-dash

arrow-big-left

arrow-big-left-dash

arrow-big-right

arrow-big-right-dash

arrow-big-up

arrow-big-up-dash

arrow-down

arrow-down-0-1

arrow-down-1-0

arrow-down-a-z

arrow-down-from-line

arrow-down-left

arrow-down-narrow-wide

arrow-down-right

arrow-down-to-dot

arrow-down-to-line

arrow-down-up

arrow-down-wide-narrow

arrow-down-z-a

arrow-left

arrow-left-from-line

arrow-left-right

arrow-left-to-line

arrow-right

arrow-right-from-line

arrow-right-left

arrow-right-to-line

arrow-up

arrow-up-0-1

arrow-up-1-0

arrow-up-a-z

arrow-up-down

arrow-up-from-dot

arrow-up-from-line

arrow-up-left

arrow-up-narrow-wide

arrow-up-right

arrow-up-to-line

arrow-up-wide-narrow

arrow-up-z-a

arrows-up-from-line

asterisk

at-sign

atom

audio-lines

audio-waveform

award

axe

axis-3d

baby

backpack

badge

badge-alert

badge-cent

badge-check

badge-dollar-sign

badge-euro

badge-indian-rupee

badge-info

badge-japanese-yen

badge-minus

badge-percent

badge-plus

badge-pound-sterling

badge-question-mark


# Contribution Guide

👍🎉 First off, thanks for taking the time to contribute! 🎉👍

The following is a set of guidelines for contributing to Lucide. Feel free to propose changes to this document in a pull request.

## Pull Requests

Feel free to open a pull-request to contribute to this project.

**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)

Guidelines for pull requests:

  * **Make your commit messages as descriptive as possible.** Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
  * **Document your pull request**. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
  * **Make sure the target of your pull request is the relevant branch**. Most of bug fixes or new feature should go to the `main` branch.
  * **Include only related work**. If your pull request has unrelated commits, it won't be accepted.

### Contributing Icons

We love contributions of new icons from the community! If you want to contribute new icons, please follow the guidelines below.

#### Guidelines

Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.

Read it here: [ICON_GUIDELINES](https://lucide.dev/contribute/icon-design-guide).

#### Lucide Studio

For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.

#### Editor guides

Here you can find instructions on how to implement the guidelines with different vector graphics editors:

##### [Adobe Illustrator Guide](https://lucide.dev/contribute/illustrator-guide)

You can also [download an Adobe Illustrator template](https://lucide.dev/templates/illustrator_template.ai).

##### [Inkscape Guide](https://lucide.dev/contribute/inkscape-guide)

##### [Figma Guide](https://lucide.dev/contribute/figma-guide)

##### [Affinity Designer Guide](https://lucide.dev/contribute/affinity-designer-guide)

#### Submitting Multiple Icons

If you want to submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keeps the thread clean and scoped. So don't submit multiple icons in one PR that have nothing to do with each other. So for example don't create one PR with icons: `arrow-up`, `bicycle`, `arrow-down`. Separate them into two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.

## Icon Requests

Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.

If the icon has not already been requested, [create an icon request issue](https://github.com/lucide-icons/lucide/issues/new?assignees=&labels=%F0%9F%99%8C+icon+request&projects=&template=01_icon_request.yml) and add as much information as possible.

### Icon Requests from Feather

If you are a designer who wants to contribute to Lucide but you don't know what icons to work on, then have a look at the Requests from Feather. All open, unfinished and valid requests can be found in [Feather Icon Requests](https://github.com/lucide-icons/lucide/issues/119).

## Development

You will need minimum version of [Nodejs 16.4+](https://nodejs.org) For package management you will need [PNPM](https://pnpm.io/installation). For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).

After cloning the project you need to run:

sh

    pnpm install # Install dependencies, including the workspace packages

### Packages -> PNPM Workspaces

To distribute different packages we use [PNPM workspaces](https://pnpm.io/workspaces). Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces).

The configured directory for workspaces is the [packages](https://github.com/lucide-icons/lucide/tree/main/packages) directory, located in the root directory. There you will find all the current packages from lucide. There are more workspaces defined, see [`pnpm-workspace.yaml`](https://github.com/lucide-icons/lucide/blob/main/pnpm-workspace.yaml).

> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and uses pub for publishing.

### Generated Code

For icons we use one single source of truth the icons svgs located in the icons directory. To distribute icons to the packages we generate code including: icon files with svg paths, index files with imports, and types files. Depending on the use case other necessary code will be generated.

The commands for generating this code you will read in the next chapter.

### Commonly used scripts

#### Building

The build script includes multiple subcommands to: clean the dist directory, generate icon files, generate types files, and build/transpile code for each build format.

sh

    pnpm [package-name] build

    #example:

    pnpm lucide-react build

#### Testing

Run unit tests with jest for each package to make sure all the package apis still works as expected.

sh

    pnpm [package-name] test

    #example:

    pnpm lucide-vue test

Recommended to run the test watcher when making changes.

sh

    pnpm [package-name] test:watch

    #example:

    pnpm lucide-preact test:watch

### Unit Testing

When adding new features to for example the icon component for a framework. It is required to have this covered with some unit tests.

### Local Testing

To test changes in a local project, you can use `yarn link`, `npm link`, `bun link` or `pnpm link` to link the package. Before you do this make sure you've built the package first.

sh

    # in packages/lucide-react

    npm run build &&
    npm link

    # in your local project

    npm link lucide-react

## Project Structure

Root directories

sh

    lucide
    ├── docs
    │   ├── guide
    ├── icons
    ├── packages
    └── scripts

### Docs

The lucide.dev website is using [vitepress](https://vitepress.dev/) to generate the static website. The markdown files are located in the docs directory.

#### Running the Docs Website Locally

To test the docs website locally, follow these steps:

  1. **Navigate to the docs directory**

sh

    cd docs

  2. **Start the Local Development Server**

sh

      pnpm run docs:dev

  3. **Open the Website Locally**

Vitepress should open with the following format:

VitePress dev server is running at:

  * **Local**: `http://localhost:3000/`
  * **Network**: `http://192.168.x.x:3000/`

### Guides

Detailed documentation about: installation, guides, packages, design guides etc.

### Icons

All the icons of Lucide in SVG format. These will be used as source for all the packages and other distributions for the Lucide icons.

### Packages

Includes all the (npm) packages of lucide.

### Scripts

Includes useful scripts to automate certain jobs. Big part of the scripts is the template generation, for example it generates icon components for all the packages. These scripts are usually executed from the "scripts" section in the package.json.

## Documentation

The documentation files are located in the [docs](https://github.com/lucide-icons/lucide/tree/main/docs) directory. All these markdown files will be loaded in the build of the lucide.dev website.

Feel free to write, adjust or add new markdown files to improve our documentation.

## Support

If you need any help or have problems with you contribution. Please don't hesitate to contact the Lucide Community, you can find us on [Github](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).

## Credits

Thank you to all the people who already contributed to Lucide!

[](https://github.com/lucide-icons/lucide/graphs/contributors)


# Lucide React Native

React Native components for Lucide icons that work seamlessly across iOS and Android platforms. Built on top of react-native-svg, each icon renders as a native SVG component, providing consistent visual appearance and performance across mobile devices.

**What you can accomplish:**

  * Use icons as React Native components with platform-consistent rendering
  * Build cross-platform mobile apps with scalable vector icons
  * Create responsive interfaces that adapt to different screen densities
  * Integrate with React Native's styling system and animation libraries
  * Maintain consistent icon appearance across iOS and Android platforms

## Installation

First, ensure that you have `react-native-svg` (version between 12 and 15) installed. Then, install the package:

pnpmyarnnpmbun

sh

    pnpm add lucide-react-native

sh

    yarn add lucide-react-native

sh

    npm install lucide-react-native

sh

    bun add lucide-react-native

## How to use

Each icon can be imported as a React component.

### Example

Additional props can be passed to adjust the icon:

jsx

    import { Camera } from 'lucide-react-native';

    // Usage
    const App = () => {
      return <Camera color="red" size={48} />;
    };

    export default App;

## Props

name| type| default
---|---|---
`size`|  _number_|  24
`color`|  _string_|  currentColor
`strokeWidth`|  _number_|  2
`absoluteStrokeWidth`|  _boolean_|  false

### Applying props

To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements.

jsx

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

## With Lucide Lab or custom icons

[Lucide Lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.

They can be used by using the `Icon` component. All props like regular Lucide icons can be passed to adjust the icon appearance.

### Using the `Icon` component

This creates a single icon based on the iconNode passed and renders a Lucide icon component.

jsx

    import { Icon } from 'lucide-react-native';
    import { coconut } from '@lucide/lab';

    const App = () => (
      <Icon iconNode={coconut} />
    );

## One generic icon component

It is possible to create one generic icon component to load icons, but it is not recommended.

WARNING

The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.

### Icon Component Example

tsx

    import * as icons from 'lucide-react-native/icons';

    interface IconProps {
      name: keyof typeof icons;
      color?: string;
      size?: number;

    const Icon = ({ name, color, size }: IconProps) => {
      const LucideIcon = icons[name];

      return <LucideIcon color={color} size={size} />;
    };

    export default Icon;

#### Using the Icon Component

tsx

    import Icon from './Icon';

    const App = () => {
      return <Icon name="House" />;
    };

    export default App;


# Lucide for Vanilla JavaScript

The core Lucide package for vanilla JavaScript applications. This package allows you to easily add scalable vector icons to any web project without framework dependencies. Perfect for static websites, legacy applications, or when you need lightweight icon integration with maximum browser compatibility.

**What you can accomplish:**

  * Add icons to HTML using simple data attributes
  * Dynamically create and insert SVG icons with JavaScript
  * Customize icon appearance with CSS classes and inline styles
  * Tree-shake unused icons to keep bundle sizes minimal
  * Use icons in Vanilla JS with HTML

Lucide is designed to be lightweight and easy to use, making it an excellent choice for projects that require icons without the overhead of a full framework integration.

## Overview

[Getting startedLearn how to get started with Lucide.](https://lucide.dev/guide/lucide/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/lucide/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/lucide/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/lucide/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/lucide/basics/stroke-width)

### Advanced

[Global stylingApply options and styles globally](https://lucide.dev/guide/lucide/advanced/global-styling)[Shadow DOMAll exported types and how to use them](https://lucide.dev/guide/lucide/advanced/shadow-dom)[Template elementUsing content template element with lucide](https://lucide.dev/guide/lucide/advanced/content-template-element)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/lucide/advanced/accessibility)[With Lucide LabUsing lucide-lab with lucide](https://lucide.dev/guide/lucide/advanced/with-lucide-lab)[Filled iconsUsing filled icons in lucide](https://lucide.dev/guide/lucide/advanced/filled-icons)

### Resources

[Accessibility in depthAccessibility best practices](https://lucide.dev/guide/accessibility)


# Lucide for React

Lucide provides a React component library for using icons in your applications. Each icon is available as a standalone component that renders an optimized inline SVG.

List of features:

  * **Easy to use** – Import icons and use them directly in JSX.
  * **Customizable** – Adjust size, color, stroke width, and other properties via props.
  * **Tree-shakable** – Only the icons you import are included in your final bundle.
  * **TypeScript support** – Fully typed components for a better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide for React.](https://lucide.dev/guide/react/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/react/migration)[Migration from React FeatherLearn how to migrate from `react-feather` to `lucide-react`](https://lucide.dev/guide/react/migration-from-feather)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/react/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/react/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/react/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/react/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/react/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/react/advanced/global-styling)[With Lucide LabUsing lucide-lab with lucide-react](https://lucide.dev/guide/react/advanced/with-lucide-lab)[Filled iconsUsing filled icons in lucide-react](https://lucide.dev/guide/react/advanced/filled-icons)[Aliased NamesUsing aliased icon names](https://lucide.dev/guide/react/advanced/aliased-names)[Combining iconsCombine multiple icons into one](https://lucide.dev/guide/react/advanced/combining-icons)[Dynamic icon componentDynamically import icons as needed](https://lucide.dev/guide/react/advanced/dynamic-icon-component)

### Resources

[Accessibility in depthAccessibility best practices](https://lucide.dev/guide/accessibility)[VSCodeVSCode and Lucide](https://lucide.dev/guide/vscode)


# Lucide for Solid

Lucide provides a Solid icon component library that makes it easy to integrate icons into your Solid applications. Each icon is available as a standalone Solid component, allowing for seamless integration and customization.

List of features:

  * **Easy to Use**: Import icons as Solid components and use them directly in your Solid components with JSX.
  * **Customizable**: Adjust size, color, and other properties via props.
  * **Tree-shakable**: Only the icons you use are included in your final bundle
  * **TypeScript Support**: Fully typed components for better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide.](https://lucide.dev/guide/solid/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/solid/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/solid/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/solid/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/solid/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/solid/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/solid/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/solid/advanced/global-styling)[With Lucide LabUsing lucide-lab with lucide-solid](https://lucide.dev/guide/solid/advanced/with-lucide-lab)[Filled iconsUsing filled icons in lucide-solid](https://lucide.dev/guide/solid/advanced/filled-icons)[Aliased NamesUsing aliased icon names](https://lucide.dev/guide/solid/advanced/aliased-names)

### Resources

[Accessibility in depthAccessibility best practices](https://lucide.dev/guide/accessibility)[VSCodeVSCode and Lucide](https://lucide.dev/guide/vscode)


# Lucide for Svelte

Lucide provides a Svelte icon component library that makes it easy to integrate icons into your Svelte applications. Each icon is available as a standalone Svelte component, allowing for seamless integration and customization.

List of features:

  * **Easy to Use**: Import icons as Svelte components and use them directly in your Svelte components with JSX.
  * **Customizable**: Adjust size, color, and other properties via props and global context.
  * **Tree-shakable**: Only the icons you use are included in your final bundle
  * **TypeScript Support**: Fully typed components for better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide for Svelte.](https://lucide.dev/guide/svelte/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/svelte/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/svelte/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/svelte/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/svelte/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/svelte/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/svelte/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/svelte/advanced/global-styling)[With Lucide LabUsing lucide-lab with @lucide/svelte](https://lucide.dev/guide/svelte/advanced/with-lucide-lab)[Filled iconsUsing filled icons in @lucide/svelte](https://lucide.dev/guide/svelte/advanced/filled-icons)[Combining iconsCombine multiple icons into one](https://lucide.dev/guide/svelte/advanced/combining-icons)


# Lucide for Vue

Lucide provides a Vue icon component library that makes it easy to integrate icons into your Vue applications. Each icon is available as a standalone Vue component, allowing for seamless integration and customization.

List of features:

  * **Easy to Use**: Import icons as Vue components and use them directly in your Vue components with JSX.
  * **Customizable**: Adjust size, color, and other properties via props.
  * **Tree-shakable**: Only the icons you use are included in your final bundle
  * **TypeScript Support**: Fully typed components for better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide for Vue.](https://lucide.dev/guide/vue/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/vue/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/vue/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/vue/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/vue/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/vue/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/vue/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/vue/advanced/global-styling)[With Lucide LabUsing lucide-lab with @lucide/vue](https://lucide.dev/guide/vue/advanced/with-lucide-lab)[Filled iconsUsing filled icons in @lucide/vue](https://lucide.dev/guide/vue/advanced/filled-icons)[Aliased NamesUsing aliased icon names](https://lucide.dev/guide/vue/advanced/aliased-names)[Combining iconsCombine multiple icons into one](https://lucide.dev/guide/vue/advanced/combining-icons)


# `@lucide/angular`

WARNING

This documentation is for `@lucide/angular`.

To learn about our legacy package for Angular, please refer to [`lucide-angular`](https://lucide.dev/guide/packages/lucide-angular).

A standalone, signal-based, zoneless implementation of Lucide icons for Angular.

**What you can accomplish:**

  * Use icons as standalone Angular components with full dependency injection support
  * Configure icons globally through modern Angular providers
  * Integrate with Angular's reactive forms and data binding
  * Build scalable applications with tree-shaken icons and lazy loading support

## Prerequisites

This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.

## Installation

pnpmyarnnpmbun

sh

    pnpm add @lucide/angular

sh

    yarn add @lucide/angular

sh

    npm install @lucide/angular

sh

    bun add @lucide/angular

## How to use

### Standalone icons

Every icon can be imported as a ready-to-use standalone component:

html

    <svg lucideFileText></svg>

ts

    import { Component } from '@angular/core';
    import { LucideFileText } from '@lucide/angular';

    @Component({
      selector: 'app-foobar',
      templateUrl: './foobar.html',
      imports: [LucideFileText],
    })
    export class Foobar { }

TIP

Standalone icon components use the selector `svg[lucide{PascalCaseIconName}]`.

This ensures minimal bloating of the DOM and the ability to directly manipulate all attributes of the resulting SVG element.

### Dynamic icon component

You may also use the dynamic `LucideIcon` component to dynamically render icons.

#### With tree-shaken imports

You may pass imported icons directly to the component:

html

    @for (item of items) {
      <a navbarItem [routerLink]="item.routerLink">
        <svg [lucideIcon]="item.icon"></svg>
        {{ item.title }}
      </a>

ts

    import { Component } from '@angular/core';
    import { LucideIcon, LucideHouse, LucideUsersRound } from '@lucide/angular';
    import { NavbarItem, NavbarItemModel } from './navbar-item';

    @Component({
      selector: 'app-navbar',
      templateUrl: './navbar.html',
      imports: [LucideIcon, NavbarItem],
    })
    export class Navbar {
      readonly items: NavbarItemModel[] = [
          title: 'Home',
          icon: LucideHouse,
          routerLink: [''],
        },
          title: 'Users',
          icon: LucideUsersRound,
          routerLink: ['admin/users'],
        },
      ];

#### With icons provided via dependency injection

Alternatively, the component also accepts string inputs.

To use icons this way, first, you have to provide icons via `provideLucideIcons`:

app.config.tsfoobar.htmlfoobar.ts

ts

    import { ApplicationConfig } from '@angular/core';
    import { provideLucideIcons, LucideCircleCheck, LucideCircleX } from '@lucide/angular';

    export const appConfig: ApplicationConfig = {
      providers: [
        // ...
        provideLucideIcons(
          LucideCircleCheck,
          LucideCircleX,
        ),
    };

html

    <svg lucideIcon="circle-check"></svg>

ts

    import { Component } from '@angular/core';
    import { LucideIcon } from '@lucide/angular';

    @Component({
      selector: 'app-foobar',
      templateUrl: './template-url',
      imports: [LucideIcon],
    })
    export class Foobar { }

TIP

For optimal bundle size, provide icons at the highest appropriate level in your application.

Providing all icons at the root level may increase your initial bundle size, while providing them at feature module level enables better code splitting.

WARNING

While you may provide your icons at any level of the dependency injection tree, be aware that [Angular's DI system is hierarchical](https://angular.dev/guide/di/defining-dependency-providers#injector-hierarchy-in-angular): `LucideIcon` will only have access to the icons provided closest to it in the tree.

## Accessible labels

You can use the `title` input property to set the [accessible name element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title) on the SVG:

html

    <svg lucideIcon="house" title="Go to dashboard"></svg>

This will result in the following output:

html

    <svg class="lucide lucide-house" ...>
      <title>Go to dashboard</title>
      <!-- SVG paths -->
    </svg>

## Props

You can pass additional props to adjust the icon appearance.

name| type| default
---|---|---
`size`|  _number_|  24
`color`|  _string_|  currentColor
`strokeWidth`|  _number_|  2
`absoluteStrokeWidth`|  _boolean_|  false

html

    <svg lucideHouse size="48" color="red" strokeWidth="1"></svg>

## Global configuration

You can use `provideLucideConfig` to configure the default property values as defined above:

ts

    import { ApplicationConfig } from '@angular/core';
    import { provideLucideConfig } from '@lucide/angular';

    export const appConfig: ApplicationConfig = {
      providers: [
        // ...
        provideLucideConfig({
          strokeWidth: 1.5
        }),
    };

## Styling via CSS

Icons can also be styled by using custom CSS classes:

html

    <svg lucideHousePlus class="my-icon"></svg>

css

    svg.my-icon {
        width: 12px;
        height: 12px;
        stroke-width: 3;

## With Lucide lab or custom icons

[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.

While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:

html

    <!-- Directly as LucideIconData: -->
    <svg [lucideIcon]="CoconutIcon"></svg>

    <!-- As a provided icon by name: -->
    <svg lucideIcon="coconut"></svg>

ts

    import { provideLucideIcons } from '@lucide/angular';
    import { coconut } from '@lucide/lab';

    @Component({
      templateUrl: './foobar.html',
      // For using by name via provider:
      providers: [provideLucideIcons({ coconut })],
      imports: [LucideIcon]
    })
    export class Foobar {
      // For passing directly as LucideIconData:
      readonly CoconutIcon = coconut;

## Troubleshooting

### The icon is not being displayed

If using per-icon-components:

  1. Ensure that the icon component is being imported, if using per-icon-components
  2. Check that the icon name matches exactly (case-sensitive)

If using the dynamic component:

  1. Ensure the icon is provided via `provideLucideIcons()` if using string names
  2. Verify the icon is imported from `@lucide/angular` and not the legacy package

### TypeScript errors?

Make sure you're importing from `@lucide/angular` and not `lucide-angular`.

### Icons render with wrong defaults

Ensure `provideLucideConfig()` is used at the right level.

## Migration guide

Migrating from `lucide-angular`? Read our [comprehensive migration guide](https://github.com/lucide-icons/lucide/blob/main/packages/angular/MIGRATION.md).


# Brand Logos Statement

Our official stance on including brand logos in Lucide

## TL;DR

Lucide **does not accept** brand logos, and we do not plan to add them in the future.

This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.

If you need brand logos, we recommend [Simple Icons](https://simpleicons.org/), which provides an extensive, legally safer collection of brand marks.

## 1. Historical Context

This is not a new debate — other icon sets have gone through the same discussion:

  * **Material Design Icons** [deprecated all brand icons](https://github.com/Templarian/MaterialDesign/issues/6602) because they didn't fit the style, didn't work well in one color, and often looked out of place in a 24×24px grid.
  * **Feather Icons** [came to the same conclusion](https://github.com/feathericons/feather/issues/763): brand logos have their own style, and forcing them into another inevitably leads to aesthetic compromises.
  * **Lucide** learned from these examples — we'd rather focus on making a consistent set of non-brand icons that all work together.

## 2. Legal Considerations

Most brand logos:

  * Are **protected by trademark or copyright**.
  * Have **strict rules** for how they can be used (colors, spacing, proportions, etc.).
  * **Don't allow modification** — but we'd have to change them to fit Lucide's style.

This means adding them could:

  1. Break copyright or trademark law.
  2. Make both you and the Lucide project legally responsible.
  3. Force us to review every new request one by one for legal issues — something we simply can't do.

> **Note:** Simple Icons avoids this by keeping logos exactly as the brand provides them — though even they sometimes face [legal challenges](https://github.com/simple-icons/simple-icons/issues/11236).

## 3. Design & Consistency

Lucide is all about **visual consistency**.

Adding brand logos would:

  * Break [our own design rules](https://lucide.dev/guide/design/icon-design-guide#icon-design-principles) for shapes, proportions, and stroke.
  * Mix two fundamentally different categories of graphics (pictograms vs. corporate logos).
  * Create a library where a subset of icons will always look "out of place".

If the logos are not in Lucide's style, why include them in Lucide at all? Better to use them from a dedicated brand icon source.

## 4. Maintenance Burden

Even with our current **"no brand icon requests"** policy, people still request them regularly.

Having any brand icons in the set:

  * Makes people think we might add more in the future.
  * Leads to repeated requests and the same conversations over and over.
  * Wastes maintainer time redirecting people to the same explanation.

Removing them entirely solves this problem.

## 5. Recommended Alternatives

If you need brand icons, try:

  * [Simple Icons](https://simpleicons.org/): offers a huge range of brands, in consistent SVG format, using a 24×24 viewBox, the same as ours.
  * Official brand asset pages: most major companies provide downloadable SVGs.

You can use these alongside Lucide without bloating our core library.

## Final Words

Lucide is an **icon** set, not a **logo** set.

Logos belong in dedicated logo resources.

We're focusing on what Lucide does best: providing a clean, cohesive, and legally safe collection of open-source icons.


# Lucide License

ISC License

Copyright (c) 2026 Lucide Icons and Contributors

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

The following Lucide icons are derived from the Feather project:

airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out

The MIT License (MIT) (for the icons listed above)

Copyright (c) 2013-present Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


# What is Lucide?

Lucide is an open-source icon library that provides 1600+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](https://lucide.dev/packages).

## Available Icons

Lucide contains icons with different variants and states, allowing users to choose the most suitable icon for their needs. And if a desired icon isn't available yet, users can open a design request, and the Lucide community contributors will help provide new icons. With more icons to choose from, users have more options to work with in their projects.

### Complete Set of Icons

As new applications with specific features arise, Lucide aims to provide a complete set of icons for every project. The community follows a set of design rules when designing new icons. These rules maintain standards for the icons, such as recognizability, consistency in style, and readability at all sizes. While creativity is valued in new icons, recognizable design conventions are important to ensure that the icons are easily identifiable by users.

## Code Optimization

In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.

## Accessibility

Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.

However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](https://lucide.dev/guide/accessibility).

## Official Packages

Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).

## Community

If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).


# Icon Design Guide

Guidelines and best practices for designing icons for the Lucide icon library.

## Icon Design Principles

Here are rules that should be followed to keep quality and consistency when making icons for Lucide.

### 1. Icons must be designed on a **24 by 24 pixels** canvas.

### 2. Icons must have at least **1 pixel padding** within the canvas.

### 3. Icons must have a **stroke width of 2 pixels**.

### 4. Icons must use **round joins**.

### 5. Icons must use **round caps**.

### 6. Icons must use **centered strokes**.

### 7. Shapes (such as rectangles) must have a **border radius of**

#### A. **2 pixels** if they are at least 8 pixels in size

#### B. **1 pixel** if they are smaller than 8 pixels in size

### 8. Distinct elements must have **2 pixels of spacing between each other**

### 9. Icons should have a similar optical volume to `circle` and `square`.

**Tip:** place your icon next to the circle or square icon and blur them both; your icon should not feel much darker than the base shape.

### 10. Icons should be visually centered by their center of gravity.

**Tip:** place your icon both above/below and next to the square or circle icon and check if it feels off center. Symmetrical icons should always be aligned to the center.

### 11. Icons should have similar visual density and level of detail.

**Tip:** try to make abstractions to dense elements. Blur your icon, and when blurred it should not feel overly dark.

### 12. Continuous curves should join smoothly.

**Tip:** make sure to use arcs or quadratic curves. When using cubic curves control points should have mirrored angles for smooth curves.

### 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.

**Tip:** whenever possible align elements and arc centers to the grid.

### 14. Icons should share common shapes

You should try to create consistent groups and variants, reuse and try to create uniformity. Consistency inside groups and variants has a lower priority than the rules above.

**Example:** All `-off` icons should look the same unless it for example violates the optical volume rule.

**Tip:** Try to not move the base shape to enable better use in a toggle context.

## Naming conventions

  1. Icon names use lower kebab case.
For example: `arrow-up` instead of `Arrow Up`.

  2. Icon names use International English names, as opposed to local variants.
For example: `color` instead of `colour`.

  3. Icons should be named for what they depict rather than their use case or what they represent.
For example: `floppy-disk` instead of `save` and `circle-slash` rather than `ban`.

  4. Icons that are part of a group are named `<group>-<variant>`.
For example: `badge-plus` is based on `badge`.

  5. Icon names for alternate icons should represent what makes the alternate unique instead of being numbered.
For example: `send-horizontal` instead of `send-2`.

  6. Names containing numerals are not allowed, unless the number itself is represented in the icon.
For example: `arrow-down-0-to-1` contains both numerals.

  7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.
For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.

  8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).
For example: if the `pencil` is either in front of, above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.

  9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.
For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.

## Code Conventions

Before an icon is added to the library, we like to have readable and optimized SVG code.

### Global Attributes

For each icon these attributes are applied, corresponding to the above rules.

xml

    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      <!-- SVGElements -->
    </svg>

### Minify paths

The code of paths can sometimes get quite large. To reduce file size we like to minify the code. We recommend to use [Lucide Studio](https://studio.lucide.dev/) to tidy paths to 3 points of precision.

### Allowed elements

SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.
In practice only the following elements and attributes are allowed:

  * `<path d>`
  * `<line x1 x2>`
  * `<polygon points>`
  * `<polyline points>`
  * `<circle cx cy r>`
  * `<ellipse cx cy rx ry>`
  * `<rect x y width height rx>`

This also means that no transforms, filters, fills or explicit strokes are allowed.

Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.

## JSON metadata descriptor

Each icon added must also come with a matching JSON file listing tags and categories for the icon. Please use the following template:

json

      "$schema": "../icon.schema.json",
      "contributors": [
        "github-username",
        "another-github-username"
      ],
      "tags": [
        "foo",
        "bar"
      ],
      "categories": [
        "devices"


# Packages

A Lucide icon library package for web and javascript applications.

A Lucide icon library package for React applications.

A Lucide icon library package for Vue applications.

A Lucide icon library package for Svelte applications.

A Lucide icon library package for Solid applications.

A Lucide icon library package for React Native applications.

A Lucide icon library package for Angular applications.

Our legacy Angular package with a module based API.

A Lucide icon library package for Preact applications.

A Lucide icon library package for Astro applications.

Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.

## Third-party packages

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

Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.

Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.

Using this module, Nuxt projects can incorporate Lucide icons. It is fully configurable and supports auto imports and tree-shaking.

A library providing https://lucide.dev icons to lustre.

A library providing https://lucide.dev icons to Flutter.

Implementation of the Lucide icon library for Slint.

Implementation of Lucide icons for Go's html/template package.

Ruby on Rails views helper method for rendering Lucide icons.

Implementation of Lucide icons in Web Components custom elements.

Lucide icon picker custom field for Strapi.


# Contributor Covenant Code of Conduct

This Code of Conduct outlines our expectations for participant behavior as well as the consequences for unacceptable behavior within our community. We are committed to providing a welcoming, safe, and inclusive environment for all members of our community.

## Our Pledge

We pledge to make our community welcoming, safe, and equitable for all.

We are committed to fostering an environment that respects and promotes the dignity, rights, and contributions of all individuals, regardless of characteristics including race, ethnicity, caste, color, age, physical characteristics, neurodiversity, disability, sex or gender, gender identity or expression, sexual orientation, language, philosophy or religion, national or social origin, socio-economic position, level of education, or other status. The same privileges of participation are extended to everyone who participates in good faith and in accordance with this Covenant.

## Encouraged Behaviors

While acknowledging differences in social norms, we all strive to meet our community's expectations for positive behavior. We also understand that our words and actions may be interpreted differently than we intend based on culture, background, or native language.

With these considerations in mind, we agree to behave mindfully toward each other and act in ways that center our shared values, including:

  1. Respecting the **purpose of our community**, our activities, and our ways of gathering.
  2. Engaging **kindly and honestly** with others.
  3. Respecting **different viewpoints** and experiences.
  4. **Taking responsibility** for our actions and contributions.
  5. Gracefully giving and accepting **constructive feedback**.
  6. Committing to **repairing harm** when it occurs.
  7. Behaving in other ways that promote and sustain the **well-being of our community**.

## Restricted Behaviors

We agree to restrict the following behaviors in our community. Instances, threats, and promotion of these behaviors are violations of this Code of Conduct.

  1. **Harassment.** Violating explicitly expressed boundaries or engaging in unnecessary personal attention after any clear request to stop.
  2. **Character attacks.** Making insulting, demeaning, or pejorative comments directed at a community member or group of people.
  3. **Stereotyping or discrimination.** Characterizing anyone’s personality or behavior on the basis of immutable identities or traits.
  4. **Sexualization.** Behaving in a way that would generally be considered inappropriately intimate in the context or purpose of the community.
  5. **Violating confidentiality**. Sharing or acting on someone's personal or private information without their permission.
  6. **Endangerment.** Causing, encouraging, or threatening violence or other harm toward any person or group.
  7. Behaving in other ways that **threaten the well-being** of our community.

### Other Restrictions

  1. **Misleading identity.** Impersonating someone else for any reason, or pretending to be someone else to evade enforcement actions.
  2. **Failing to credit sources.** Not properly crediting the sources of content you contribute.
  3. **Promotional materials**. Sharing marketing or other commercial content in a way that is outside the norms of the community.
  4. **Irresponsible communication.** Failing to responsibly present content which includes, links or describes any other restricted behaviors.

## Reporting an Issue

Tensions can occur between community members even when they are trying their best to collaborate. Not every conflict represents a code of conduct violation, and this Code of Conduct reinforces encouraged behaviors and norms that can help avoid conflicts and minimize harm.

When an incident does occur, it is important to report it promptly. To report a possible violation, email: [info@lucide.dev](mailto:info@lucide.dev)

Community Moderators take reports of violations seriously and will make every effort to respond in a timely manner. They will investigate all reports of code of conduct violations, reviewing messages, logs, and recordings, or interviewing witnesses and other participants. Community Moderators will keep investigation and enforcement actions as transparent as possible while prioritizing safety and confidentiality. In order to honor these values, enforcement actions are carried out in private with the involved parties, but communicating to the whole community may be part of a mutually agreed upon resolution.

## Addressing and Repairing Harm

If an investigation by the Community Moderators finds that this Code of Conduct has been violated, the following enforcement ladder may be used to determine how best to repair harm, based on the incident's impact on the individuals involved and the community as a whole. Depending on the severity of a violation, lower rungs on the ladder may be skipped.

  1. Warning
     1. Event: A violation involving a single incident or series of incidents.
     2. Consequence: A private, written warning from the Community Moderators.
     3. Repair: Examples of repair include a private written apology, acknowledgement of responsibility, and seeking clarification on expectations.
  2. Temporarily Limited Activities
     1. Event: A repeated incidence of a violation that previously resulted in a warning, or the first incidence of a more serious violation.
     2. Consequence: A private, written warning with a time-limited cooldown period designed to underscore the seriousness of the situation and give the community members involved time to process the incident. The cooldown period may be limited to particular communication channels or interactions with particular community members.
     3. Repair: Examples of repair may include making an apology, using the cooldown period to reflect on actions and impact, and being thoughtful about re-entering community spaces after the period is over.
  3. Temporary Suspension
     1. Event: A pattern of repeated violation which the Community Moderators have tried to address with warnings, or a single serious violation.
     2. Consequence: A private written warning with conditions for return from suspension. In general, temporary suspensions give the person being suspended time to reflect upon their behavior and possible corrective actions.
     3. Repair: Examples of repair include respecting the spirit of the suspension, meeting the specified conditions for return, and being thoughtful about how to reintegrate with the community when the suspension is lifted.
  4. Permanent Ban
     1. Event: A pattern of repeated code of conduct violations that other steps on the ladder have failed to resolve, or a violation so serious that the Community Moderators determine there is no way to keep the community safe with this person as a member.
     2. Consequence: Access to all community spaces, tools, and communication channels is removed. In general, permanent bans should be rarely used, should have strong reasoning behind them, and should only be resorted to if working through other remedies has failed to change the behavior.
     3. Repair: There is no possible repair in cases of this severity.

This enforcement ladder is intended as a guideline. It does not limit the ability of Community Managers to use their discretion and judgment, in keeping with the best interests of our community.

## Scope

This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public or other spaces. Examples of representing our community include using an official email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.

## Attribution

This Code of Conduct is adapted from the Contributor Covenant, version 3.0, permanently available at <https://www.contributor-covenant.org/version/3/0/>.

Contributor Covenant is stewarded by the Organization for Ethical Source and licensed under CC BY-SA 4.0. To view a copy of this license, visit <https://creativecommons.org/licenses/by-sa/4.0/>

For answers to common questions about Contributor Covenant, see the FAQ at <https://www.contributor-covenant.org/faq>. Translations are provided at <https://www.contributor-covenant.org/translations>. Additional enforcement and community guideline resources can be found at <https://www.contributor-covenant.org/resources>. The enforcement ladder was inspired by the work of [Mozilla’s code of conduct team](https://github.com/mozilla/inclusion).


# Lucide for Astro

Astro components for Lucide icons that work perfectly with Astro's island architecture and multi-framework support. Each icon is an Astro component that renders as an inline SVG, providing excellent performance for static sites and server-side rendering scenarios.

List of features:

  * **Easy to Use**: Import icons as Astro components and use them directly in your Astro application.
  * **Customizable**: Adjust size, color, and other properties via props.
  * **Tree-shakable**: Integrate seamlessly with Astro's component islands and partial hydration
  * **TypeScript Support**: Fully typed components for better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide for Astro.](https://lucide.dev/guide/astro/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide Astro.](https://lucide.dev/guide/astro/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/astro/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/astro/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/astro/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/astro/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/astro/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/astro/advanced/global-styling)[With Lucide LabUsing lucide-lab with @lucide/astro](https://lucide.dev/guide/astro/advanced/with-lucide-lab)


# Lucide for Preact

Lucide provides a Preact icon component library that makes it easy to integrate icons into your Preact applications. Each icon is available as a standalone Preact component, allowing for seamless integration and customization.

List of features:

  * **Easy to Use**: Import icons as Preact components and use them directly in your Preact components with JSX.
  * **Customizable**: Adjust size, color, and other properties via props.
  * **Tree-shakable**: Only the icons you use are included in your final bundle
  * **TypeScript Support**: Fully typed components for better developer experience.

## Overview

[Getting startedLearn how to get started with Lucide for PReact.](https://lucide.dev/guide/preact/getting-started)[Migration from v0Learn how to migrate from v0 to v1 of Lucide.](https://lucide.dev/guide/preact/migration)

### Basics

[ColorAdjust the color of your icons](https://lucide.dev/guide/preact/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/preact/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/preact/basics/stroke-width)

### Advanced

[TypescriptAll exported types and how to use them](https://lucide.dev/guide/preact/advanced/typescript)[AccessibilityMaking your icons accessible](https://lucide.dev/guide/preact/advanced/accessibility)[Global stylingApply global styles to all icons](https://lucide.dev/guide/preact/advanced/global-styling)[With Lucide LabUsing lucide-lab with lucide-preact](https://lucide.dev/guide/preact/advanced/with-lucide-lab)[Filled iconsUsing filled icons in lucide-preact](https://lucide.dev/guide/preact/advanced/filled-icons)[Aliased NamesUsing aliased icon names](https://lucide.dev/guide/preact/advanced/aliased-names)[Combining iconsCombine multiple icons into one](https://lucide.dev/guide/preact/advanced/combining-icons)

### Resources

[Accessibility in depthAccessibility best practices](https://lucide.dev/guide/accessibility)[VSCodeVSCode and Lucide](https://lucide.dev/guide/vscode)


# Used by

[](https://vercel.com)

[](https://developer.mozilla.org/)

[](https://supabase.com)

[](https://obsidian.md)

[](https://nuxt.com/)

[](https://opencollective.com)

[](https://super.so)

[](https://noodle.run/)

# Used in

[](https://ui.shadcn.com/)

[](https://tamagui.dev/)

[](https://reflex.dev)


# Lucide Version 1

After years of work and dedication, Lucide Version 1 has been officially **released**!. This milestone marks a significant achievement in our journey to provide a comprehensive and versatile icon library for developers and designers alike.

It's been quite a ride — especially over the past year. Lucide has grown to over 30 million downloads per week and is used by million of projects worldwide. This release is a testament to the hard work of our community and contributors who have helped shape Lucide into what it is today.

Thank you to everyone who has supported us along the way. We couldn't have done this without you!

## What's New in Version 1? TLDR;

  * Removed brand icons, see our [brand logo statement](https://lucide.dev/brand-logo-statement) for more details.
  * Improved documentation, guides per framework.
  * Improved accessibility, `aria-hidden` is now set by default on icons.
  * Removed UMD build, only ESM and CJS now (exception for the [`lucide`](https://lucide.dev/guide/lucide/) package).
  * Package rename from `lucide-vue-next` to `@lucide/vue`.
  * A modern, standalone implementation for Angular, `@lucide/angular`
  * Support for context providers in React, Vue, Svelte, and Solid.
  * Stable code points for Lucide font.
  * Support for shadow DOM in the `lucide` package.
  * Many bug fixes and improvements.

## Upgrading to Version 1

See our guides:

[Lucide for Vanilla JavaScript Migration](https://lucide.dev/guide/lucide/migration)[Lucide for React Migration](https://lucide.dev/guide/react/migration)[Lucide for Vue Migration](https://lucide.dev/guide/vue/migration)[Lucide for Svelte Migration](https://lucide.dev/guide/svelte/migration)[Lucide for Solid Migration](https://lucide.dev/guide/solid/migration)[Lucide for Angular Migration](https://lucide.dev/guide/angular/migration)[Lucide for Preact Migration](https://lucide.dev/guide/preact/migration)[Lucide for Astro Migration](https://lucide.dev/guide/astro/migration)[Lucide for Static Migration](https://lucide.dev/guide/static/migration)

## Removed All Brand Icons

As part of our commitment to maintaining a sustainable and legally compliant icon library, we have made the decision to remove all brand icons from Lucide Version 1. This change is in response to increasing legal pressures and the complexities associated with trademarked brand icons. See our [brand logo statement](https://lucide.dev/brand-logo-statement) for more details.

We understand that brand icons are important to many of our users, and we want to assure you that this decision was not made lightly. Our primary goal is to ensure that Lucide remains a reliable and legally sound resource for the community.

For users who still require brand icons, we recommend [Simple Icons](https://simpleicons.org/), which provides an extensive, legally safer collection of brand logos.

## Improved documentation, guides per framework

We have revamped our documentation to provide clearer, more comprehensive guides tailored to each supported framework. Whether you're using React, Vue, Svelte, Solid, Angular, Astro or Vanilla JavaScript, you'll find: step-by-step instructions, code examples and best practices to help you integrate Lucide seamlessly into your projects.

Also, a `llms.txt` is now available for LLMs to use.

## Improved accessibility

We have improved the accessibility of our icons by setting `aria-hidden` to `true` by default. This change ensures that screen readers will ignore icons that are purely decorative, improving the overall accessibility of your applications. If you need to make an icon accessible, you can provide an appropriate `aria-label` or add a `title` attribute to the icon element.

See our [accessibility in-depth guide](https://lucide.dev/guide/accessibility) for more details and best practices on making your icons accessible.

## Removed UMD build, only ESM and CJS now

To streamline our build process and focus on modern JavaScript module formats, we have removed the UMD build from Lucide Version 1. We now only support ESM (ECMAScript Modules) and CJS (CommonJS) formats. This results in a 32.3% size reduction (11.4 MB → 1 MB gzipped) for `lucide-react`, with more than 25 million weekly downloads, this is a huge saving for the ecosystem.

## Package rename from `lucide-vue-next` to `@lucide/vue`

`lucide-vue-next` is now renamed to `@lucide/vue` to get rid of the "next" suffix, which was only meant to indicate that it was the next version of the Vue package. This change is part of our effort to simplify our package naming and make it more consistent across all frameworks.

## Support for context providers

We have added support for context providers in React, Vue, Svelte, and Solid. This allows you to set default properties for all icons within a specific context, making it easier to manage icon styles and behavior across your application.

We have always recommended using CSS, but with this it was not possible to set properties like `size` or `color` on specific icons, as CSS would override them. With this new feature, you can now easily set default properties for all icons within a specific context, without having to manually define them on each icon.

ReactVueSvelteSolidAngularPreactReact Native

tsx

    import { LucideProvider, Home } from 'lucide-react';

    const App = () => (
      <LucideProvider
        color="red"
        size={48}
        strokeWidth={2}
        <Home />
      </LucideProvider>
    );

ts

    import { setLucideProps } from '@lucide/vue';

    setLucideProps({
      size: 32,
      color: '#4f46e5',
      strokeWidth: 1.5,
    });

ts

    import { setLucideProps } from '@lucide/svelte';

    setLucideProps({
      size: 32,
      color: '#4f46e5',
      strokeWidth: 1.5,
    });

tsx

    import { LucideProvider, Home } from 'lucide-solid';

    const App = () => (
      <LucideProvider
        color="red"
        size={48}
        strokeWidth={2}
        <Home />
      </LucideProvider>
    );

ts

    import { ApplicationConfig } from '@angular/core';
    import { provideLucideConfig } from '@lucide/angular';

    export const appConfig: ApplicationConfig = {
      providers: [
        provideLucideConfig({
          size: 32,
          color: '#4f46e5',
          strokeWidth: 1.5,
        }),
    };

tsx

    import { LucideProvider, Home } from 'lucide-preact';

    const App = () => (
      <LucideProvider
        color="red"
        size={48}
        strokeWidth={2}
        <Home />
      </LucideProvider>
    );

tsx

    import { LucideProvider, Home } from 'lucide-react-native';

    const App = () => (
      <LucideProvider
        color="red"
        size={48}
        strokeWidth={2}
        <Home />
      </LucideProvider>
    );

## Stable code points for Lucide font

We have assigned stable code points for the Lucide font, each icon has a fixed code point that will not change in future releases. This ensures that if you are using the Lucide font in your projects, you can rely on the code points to remain consistent, even as we continue to add new icons and make improvements to the library.

## Support for shadow DOM in Lucide package

Lucide package supports shadow DOM, allowing you to use Lucide icons in web components and other contexts where shadow DOM is used. This ensures that your icons will render correctly and maintain their styles, even when used within a shadow DOM.


# Illustrator Template Guide

This Guide explains how to properly use the Adobe Illustrator Template for Lucide.

> Attention: Even though it is unlikely the template can be outdated or not 100% correct. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack.

## General Workflow

The Illustrator template is created following guidelines from the [Icon Design Guide](https://lucide.dev/contribute/icon-design-guide).

**Workflow:**

  1. Download and open the [Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/illustrator_template.ai).

  2. You can now remove the content from the example logo layer ("Draw") and start creating.

  3. Verify that you follow the [Icon Design Guidelines](https://lucide.dev/contribute/icon-design-guide).

  4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unnecessary layers (especially "Padding" and "Grid").

  5. Export the file with the export menu under: `Export > Export As..` then save the file as SVG. Select the following options in the SVG Options dialog:

After that, double check that the [code conventions and SVG global attributes](https://lucide.dev/contribute/icon-design-guide#code-conventions) are correct.

  7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).


# Affinity Designer Template Guide

This guide describes how to use the Affinity Designer template for Lucide.

## General Workflow

> Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open `Preferences > User Interface`. Under `Decimal Places for Unit Types`, uncheck `Show Lines in points`.

  1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate).

  2. Follow the [Icon Design Principles](https://lucide.dev/contribute/icon-design-guide) while you use the template (to ensure integrity with the Lucide icon pack).

  3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_ , _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.

  4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).


# Inkscape Setup Guide

This guide shows the steps to setup Inkscape for creating icons that conform to the Lucide design guidelines.

## Setting up The Canvas

When opening a new document, Inkscape will create a canvas of a default size. To change the size to 24x24:

  1. Open the Document Properties dialog (File -> Document Properties).
  2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
  3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
  4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
  5. Close the Document Properties dialog.
  6. To center the canvas in the viewport, select View -> Zoom -> Drawing.

## Setting up The Paths

  1. Create a path or shape.
  2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
  3. On the “Stroke Style” tab:
     * Set Stroke Width to `2px`.
     * Select the rounded join type.
     * Select the rounded cap type.
  4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.

## Saving A File

  1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
  2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.


# Figma Template Guide

This guide shows the steps to setup Figma for creating icons that conform to the Featherity design guidelines.

## Setting Up The Frame

When you create a new document in Figma, the document. Each individual icon you want to create, has to be created in a separate frame.

To do this, create a frame of 24x24 pixels.

  1. Click the frame button (or press `F`)
  2. Draw a 24x24 frame (or edit it afterwards from the design window)

In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`.

## Create Your icon

To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.

Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.

Set the following:

  1. Vector
     1. Corner radius: 2px
  2. Stroke
     1. Stroke width: 2px
     2. Stroke alignment: center

## Export Or Copy Your Icon

Once you have completed your icon, you can export it.

  1. Select the frame
  2. Open the _Export_ tab on the right
  3. Set the file type as SVG
  4. Press export

Or you can also copy its source as SVG.

  1. Select the frame
  2. Right click it
  3. Click on _Copy/Paste as_
  4. Click on _Copy as SVG_

That's it. You just made your first icon. Congratulations!

## Figma Tips

  1. The [Icon Design Guidelines](https://lucide.dev/contribute/icon-design-guide) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).


# Dynamic Icon Component

It is possible to use one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. See Caveats.

`DynamicIcon` is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system where icon names are stored in a database.

For static use cases, it is recommended to import the icons directly.

The same props can be passed to adjust the icon appearance. The `name` prop is required to load the correct icon.

jsx

    import { DynamicIcon } from 'lucide-react/dynamic';

    const App = () => (
      <DynamicIcon name="camera" color="red" size={48} />
    );

Caveats

  * All icons are imported during build time, which increases build time.
  * The bundler will create a separate module for each icon, which can increase the number of network requests.
  * You can encounter flashing when loading the icon, since the icon is loaded dynamically.
  * When using server-side rendering, you need to make sure that the icon is available during the initial render.


# Filled Icons

Fills are officially not supported. However, all SVG properties are available on all icons. Fill can still be used and will work fine on certain icons.

Example with stars:

App.jsicon.css

    import { Star, StarHalf } from "lucide-react";
    import "./icon.css";

    function App() {
      return (

              { Array.from({ length: 5 }, () => (
                  <Star fill="#111" strokeWidth={0} />
              ))}

              <Star fill="yellow" strokeWidth={0} />
              <Star fill="yellow" strokeWidth={0} />
              <StarHalf fill="yellow" strokeWidth={0} />

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")


# Global Styling

Adjusting icons can be done by using [color](https://lucide.dev/guide/react/basics/color), [size](https://lucide.dev/guide/react/basics/sizing) and [stroke width](https://lucide.dev/guide/react/basics/stroke-width). To style all icons globally, you can either use CSS, or use a context provider.

We recommend using CSS for global styling, as it is the most straightforward way to achieve this. But using CSS prevents you from using props like `size`, `color` and `strokeWidth` on individual icons, since CSS specificity will override these props, to be able to use the props on individual ones you need to use the Lucide context provider.

## Context Provider

For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-react` package.

tsx

    import { LucideProvider, Home } from 'lucide-react';

    const App = () => (
      <LucideProvider
        color="red"
        size={48}
        strokeWidth={2}
        <Home />
      </LucideProvider>
    );

This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.

## Style by using CSS

Styling icons is easy to accomplish using CSS.

Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.

  * The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
  * The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
  * The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.

icon.cssApp.js

    .lucide {
      /* Change this! */
      color: #ffadff;
      width: 56px;
      height: 56px;
      stroke-width: 1px;

    .app {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 6px;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

### Absolute stroke width

For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](https://lucide.dev/guide/react/basics/stroke-width#absolute-stroke-width) for more info.

icon.cssApp.js

    .lucide {
      width: 48px;
      height: 48px;
      stroke-width: 1.5;

    .lucide * {
      vector-effect: non-scaling-stroke;

    .app {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 6px;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")


# Combining icons

You can combine multiple icons into a single icon by nesting SVG elements. This is useful if you want to create custom icons icons by combining existing ones.

    import { Scan, User } from "lucide-react";

    function App() {
      return (

          <Scan size={48}>
            <User
              size={12}
              x={6}
              y={6}
              absoluteStrokeWidth
          </Scan>

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

This is valid, since [SVGs can be nested](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg#nested_svg_element), and all SVG properties are supported on the icons. The `x` and `y` coordinates can be adjusted to position the icons as you like.

Limitation

When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).

## With native SVG elements

You can also combine Lucide icons with native SVG elements to build custom icon variations.

### Example with notification badge

For example, you can add a notification badge to an icon by using the `circle` SVG element.

    import { Mail } from "lucide-react";

    function App() {
      const hasUnreadMessages = true;

      return (

          <Mail size={48}>
            {hasUnreadMessages && (
              <circle
                r="3"
                cx="21"
                cy="5"
                stroke="none"
                fill="#F56565"
            )}
          </Mail>

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

### Example with text element

You can also use the `text` SVG element to add text to your icon.

    import { File } from "lucide-react";

    function App() {
      return (

          <File size={48}>
            <text
              x={7.5}
              y={19}
              fontSize={8}
              fontFamily="Verdana,sans-serif"
              strokeWidth={1}
              JS
            </text>
          </File>

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")


# Migration from v0

Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:

  * Chromium
  * Codepen
  * Codesandbox
  * Dribbble
  * Facebook
  * Figma
  * Framer
  * Github
  * Gitlab
  * Instagram
  * LinkedIn
  * Pocket
  * RailSymbol (based on the British Rail logo)
  * Slack

We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.


# Sizing

By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.

## Adjusting the icon size using the `size` prop

    import { Landmark } from "lucide-react";

    function App() {
      return (

          <Landmark size={64} />

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

## Adjusting the icon size via CSS

The CSS properties `width` and `height` can be used to adjust the icon size.

icon.cssApp.js

    .my-beer-icon {
      /* Change this! */
      width: 64px;
      height: 64px;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

### Dynamically change the icon size based on the font size

It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.

icon.cssApp.js

    .my-icon {
      /* Icon size will relative to font-size of .text-wrapper */
      width: 1em;
      height: 1em;

    .text-wrapper {
      /* Change this! */
      font-size: 96px;

      /* layout stuff */
      display: flex;
      gap: 0.25em;
      align-items: center;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

### Resizing with Tailwind

`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.

    import { PartyPopper } from "lucide-react";

    function App() {
      return (

          <PartyPopper className="size-24" />

      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")


# Accessibility

Lucide icons ship with `aria-hidden="true"` by default. In almost all cases this is exactly what you want.

## Should icons be accessible?

Most of the time, icons are used purely for decoration or visual reinforcement. Exposing decorative icons to assistive technologies can create unnecessary noise for screen reader users.

For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:

[Accessible IconsBest practices for accessible icons in your application.](https://lucide.dev/guide/accessibility)

Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in React.

## Making an icon accessible

To expose an icon to assistive technologies, provide an accessible name by passing a `title` element as a child or passing the `aria-label` prop to the icon component.

This removes the `aria-hidden` attribute and makes the icon visible to screen readers.

tsx

    <House>
      <title>This is my house</title>
    </House>

    // or

    <House aria-label="This is my house" />

Choose a label that clearly describes the meaning of the icon or the action it represents in the context of your application.

## Accessible icon buttons

When an icon is used inside a button, the accessible label should usually be applied to the button itself, and not the icon.

tsx

    <button aria-label="Go to home">
      <House />
    </button>

This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.


# Aliased Names

Some icons have multiple names. This is because we sometimes choose to rename them to make them more consistent with the rest of the icon set, or the name was not generic. For example, the `edit-2` icon is renamed to `pen` to make the name more generic, since it is just a pen icon.

Beside these aliases, Lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code.

tsx

    // These are all the same icon
    import {
      House,
      HouseIcon,
      LucideHouse,
    } from "lucide-react";

## Choosing import name style

If you want consistent imports across your project, or if you want to change the autocompletion of Lucide icons in your IDE, there an option to choose the import name style you prefer.

This can be done by creating a custom module declaration file to override Lucide imports and turning off the autocomplete in your IDE.

### Turn off autocomplete in your IDE

.vscode/settings.json

json

      "js/ts.preferences.autoImportFileExcludePatterns": [
        "lucide-react",

### Create a custom module declaration file

Create a custom TypeScript declaration file that re-exports the preferred naming style:

lucide-react.d.ts

ts

    declare module "lucide-react" {
      // Prefixed import names
      export * from "lucide-react/dist/lucide-react.prefixed";
      // or
      // Suffixed import names
      export * from "lucide-react/dist/lucide-react.suffixed";

Place this file in your project root or in a directory included in your TypeScript configuration. A common approach is to create a `@types` folder and name the file `lucide-react.d.ts`.

### Import name styles

Import Style| Available imports| Declaration file import
---|---|---
Default| Home, HomeIcon, LucideHome|
Prefixed| LucideHome| lucide-react.prefixed
Suffixed| HomeIcon| lucide-react.suffixed


# Getting started

This guide will help you get started with Lucide in your React project. Make sure you have a React environment set up. If you don't have one yet, you can create a new React project using Create React App, Vite, or any other React boilerplate of your choice.

## Installation

pnpmyarnnpmbun

sh

    pnpm add lucide-react

sh

    yarn add lucide-react

sh

    npm install lucide-react

sh

    bun add lucide-react

## Importing your first icon

Lucide is built with ES Modules, so it's completely tree-shakable.

Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

jsx

    import { Camera } from 'lucide-react';
    // Usage
    const App = () => {
      return <Camera />;
    };
    export default App;

## Props

To customize the appearance of an icon, you can use the following props:

name| type| default
---|---|---
`size`|  _number_|  24
`color`|  _string_|  currentColor
`strokeWidth`|  _number_|  2
`absoluteStrokeWidth`|  _boolean_|  false

Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).

jsx

    // Usage
    const App = () => {
      return <Camera size={48} color="red" strokeWidth={1} />;
    };

More examples and details how to use props, continue the guide:

[ColorAdjust the color of your icons](https://lucide.dev/guide/react/basics/color)[SizingAdjust the size of your icons](https://lucide.dev/guide/react/basics/sizing)[Stroke widthAdjust the stroke width of your icons](https://lucide.dev/guide/react/basics/stroke-width)


# Color

By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.

Read more about [`currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).

## Adjust the color using the `color` prop

The color can be adjusted by passing the color prop to the element.

    import { Smile } from "lucide-react";

    function App() {
      return (
        <div className="app">
          <Smile color="#3e9392" />
        </div>
      );

    export default App;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")

## Using parent elements text color value

Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.

For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.

    import { ThumbsUp } from "lucide-react";

    function LikeButton() {
      return (
        <button style={{ color: "#fff" }}>
          <ThumbsUp />
          Like
        </button>
      );

    export default LikeButton;

[Open Sandbox](https://codesandbox.io/api/v1/sandboxes/define?\[object Object\]&environment=create-react-app "Open in CodeSandbox")


# Accessibility in depth

Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.

However, not everyone can understand them easily. When using icons it is very important to consider the following aspects of accessibility.

INFO

By default, we hide icons from screen readers using `aria-hidden="true"`. You can make them accessible yourself by following the guidelines below.

## Provide visible labels

Icons are a helpful tool to improve perception, but they aren't a replacement for text.

In most cases, it is probably a good idea to also provide a textual representation of your icon's function.

## Contrast

Ensure there's enough contrast between the icon and its background so that it's visible to people with low vision or color vision deficiencies.

We recommend following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).

## Use of color

Avoid relying solely on color to convey meaning in icons, as some users may have color blindness. Instead, use additional visual cues like shape, shading or text.

## Interactivity

Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when activated.

In most cases this is easily done by wrapping them in icon buttons.

## Minimum target size

Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it should have a minimum target size of 44×44 pixels.

In practice, this doesn't necessarily mean that the icon itself should be this large, only its interactive wrapper element.

## Meaningfulness

Icons should represent concepts or actions in a universally understandable way. Avoid using abstract or ambiguous, or culture-specific symbols that might confuse some users.

## Consistency

Maintain consistency in icon design and usage across your interface to help users learn and understand their meanings more easily.

## Text Alternatives

You may have to provide text labels or alternative text descriptions for icons, especially for screen readers used by people with visual impairments.

However: descriptions should only be provided to standalone icons that aren't purely decorative, as providing accessible names to non-functional elements only increases clutter when using screen readers.

### On standalone icons

Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper element. In most cases they will be part of a badge, button (including icon buttons), navigation item or other interactive UI element.

WARNING

In case some of your icons stand alone, and they serve a non-decorative function, make sure to provide the appropriate accessible label for them.

In general try to avoid using functional icons with no interactivity, we recommend that:

  1. you either add a visible description next to them, or
  2. place them in badges, labels or on buttons, and at least add a tooltip to them.

In any such case, it is preferred that the accessible name be provided for these interactive elements (badges, buttons, nav items etc.) only, _not_ the icons themselves.

### On buttons

Do not provide an accessible label to icons when used on a button, as this label will be read out by screen readers, leading to nonsensical text.

Code examples

tsx

    // Don't do this
    <button>
      <Plus aria-label="Plus icon"/>
      Add document
    </button>

    // Do this, just leave it
    <button>
      <Plus/>
      Add document
    </button>

### On icon buttons

Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of the close button of a dialog for example).

As previously stated, you should provide your accessible label on the icon button itself, not the contained icon.

Code examples

tsx

    // Don't do this
    <button class="btn-icon">
      <House/>
    </button>

    // Don't do this either
    <button class="btn-icon">
      <House aria-label="Home icon"/>
    </button>

    // This works but might not be the best solution, see below
    <button aria-label="Go to home" class="btn-icon">
      <House/>
    </button>

    // Do this instead
    <button class="btn-icon">
      <House/>
      Go to home
    </button>

## A note on `aria-label`

Although you could provide accessible labels to your elements via the `aria-label` attribute, we generally recommend avoiding this and instead suggest that you use your chosen CSS framework's " visually hidden" utility whenever possible. You can [read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).

### Example - Radix UI

Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).

tsx

    import { ArrowRightIcon } from 'lucide-react';
    import { AccessibleIcon } from '@radix-ui/react-accessible-icon';

    <AccessibleIcon label="Next item">
      <ArrowRightIcon />
    </AccessibleIcon>

### Example - Bootstrap

html

      Phone number

### Example - Tailwind CSS

html

      Phone number

If you're not sure, you may consider learning more about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/)

## Further resources

We also recommend checking out the following resources about accessibility:

  * [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
  * [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
  * [Learn accessibility on web.dev](https://web.dev/learn/accessibility)
  * [Inclusive Components](https://inclusive-components.design/)
  * [A11yTalks](https://www.a11ytalks.com/)
  * [A11y automation tracker](https://a11y-automation.dev/)
  * [The A11Y Project](https://www.a11yproject.com/)


# Migration Guide: react-feather → lucide-react

`react-feather` is similar to `lucide-react`, the package is inspired by `react-feather`. The API is nearly identical, so migration is straightforward.

## 1. Install the new package

sh

    npm install lucide-react
    npm uninstall react-feather

## 2. Update imports

Replace all `react-feather` imports with `lucide-react`:

diff

    - import { Home, User } from 'react-feather'
    + import { Home, User } from 'lucide-react'

You can do this across your entire codebase with a find-and-replace:

  * Find: `from 'react-feather'`
  * Replace: `from 'lucide-react'`

## 3. Renamed icons

Four icons have been renamed. Update any usages of these:

react-feather| lucide-react
`GitHub`| `Github`
`Grid`| `LayoutGrid`
`Table`| `Table2`
`Tool`| `Wrench`

### Examples

diff

    - import { GitHub, Grid, Table, Tool } from 'react-feather'
    + import { Github, LayoutGrid, Table2, Wrench } from 'lucide-react'

    - <GitHub />
    + <Github />

    - <Grid />
    + <LayoutGrid />

    - <Table />
    + <Table2 />

    - <Tool />
    + <Wrench />

## 4. All other icons

All remaining icons keep the same name and work as drop-in replacements. No other changes to props or usage are required.


# With Lucide Lab or custom icons

[Lucide Lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.

They can be used by using the `Icon` component. All props like regular lucide icons can be passed to adjust the icon appearance.

## Using the `Icon` component

This creates a single icon based on the iconNode passed and renders a Lucide icon component.

jsx

    import { Icon } from 'lucide-react';
    import { coconut } from '@lucide/lab';

    const App = () => (
      <Icon iconNode={coconut} />
    );


# Visual Studio Code

Visual Studio Code (VS Code) is a popular code editor that provides a wide range of features and extensions to enhance your development experience.

## Turn off autocomplete in your IDE

All icons are exported from the main module. This can create a lot of noise in the autocomplete suggestions of your IDE. You can turn this off by adding the following setting to your VS Code settings.

.vscode/settings.json

json

      "js/ts.preferences.autoImportFileExcludePatterns": [
        "lucide-react", // or
        "lucide-preact", // or
        "lucide-react-native", // or
        "@lucide/vue",

## JS Docs and icon preview

Each icon is provided with JS docs. In VS Code, you can hover over the icon component to see the JSdocs.

Also a little preview of the icon is shown.

## Third party plugins

There are several third party plugins available for VS Code that provide additional features for working with Lucide icons.

See the [VSCode Marketplace](https://marketplace.visualstudio.com/search?term=lucide&target=VSCode&category=All%20categories&sortBy=Relevance) for available extensions.