---
url: /guide/lucide.md
description: >-
The core Lucide package for vanilla JavaScript applications. Learn how to add
scalable vector icons to any web project without framework dependencies.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
### Resources
{{''}}
---
---
url: /guide/lucide/getting-started.md
description: >-
This guide will help you get started with Lucide in your Vanilla JavaScript
project.
---
# Getting started
This guide will help you get started with Lucide in your Vanilla JavaScript project.
Make sure you have a your environment set up. If you don't have one yet, you can create a new project using Vite, Parcel or any other boilerplate of your choice.
## Installation
### Package Managers
::: code-group
```sh [pnpm]
pnpm add lucide
```
```sh [yarn]
yarn add lucide
```
```sh [npm]
npm install lucide
```
```sh [bun]
bun add lucide
```
:::
### CDN
```html
```
We strongly suggest you anchor to a specific version, such as `https://unpkg.com/lucide@x.xxx.x/dist/umd/lucide.min.js`, rather than using `@latest`. This is because the latest version may introduce breaking changes that could potentially break your application. By anchoring to a specific version, you can ensure that your application remains stable and functional, even if there are updates to the library in the future.
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
The `createIcons` function will search for HTMLElements with the attribute `data-lucide` and replace it with the svg from the given icon name.
### Example
```html
```
```js
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({ icons });
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe
}
});
```
## Advanced Usage
### Additional Options
In the `createIcons` function you can pass some extra parameters:
* you can pass `nameAttr` to adjust the attribute name to replace icons (default is `data-lucide`).
* you can pass `attrs` to pass additional custom attributes, for instance CSS classes or stroke options.
* you can pass `root` to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM)
* you can pass `inTemplates: true` to also replace icons inside `` tags.
Here is a full example:
```js
import { createIcons } from 'lucide';
createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333'
},
nameAttr: 'data-lucide', // attribute for the icon name.
root: element, // DOM element to replace icons in.
inTemplates: true // Also replace icons inside tags.
});
```
### Example using a CDN
```html
```
---
---
url: /guide/lucide/migration.md
---
# 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.
---
---
url: /guide/lucide/basics/color.md
description: >-
Learn how to customize the color of Lucide icons in your Vanilla JavaScript
applications using the color attribute and CSS.
---
# 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` attribute
The color can be adjusted by passing the color attribute to the element.
::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js
import "./styles.css";
import { createIcons, Smile } from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
Smile,
}
});
```
:::
## 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.
::: sandpack {template=vanilla showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js [hidden]
import "./styles.css";
import { createIcons, ThumbsUp } from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
ThumbsUp,
}
});
```
:::
---
---
url: /guide/lucide/basics/sizing.md
description: >-
Learn how to adjust the size of Lucide icons in your Vanilla JavaScript
applications using the width and height attributes and CSS.
---
# Sizing
By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `width` and `height` attributes and or by CSS.
## Adjusting the icon size using the `width` and `height` attribute
::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js
import "./styles.css";
import { createIcons, Landmark } from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
Landmark,
}
});
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=vanilla editorHeight=300 editorWidthPercentage=60 dependencies="lucide"}
```css icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```html /index.html
```
```js /index.js
import { createIcons, Beer } from 'lucide/dist/cjs/lucide';
import "./styles.css";
import "./icon.css";
createIcons({
icons: {
Beer,
}
});
```
:::
### 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.
::: sandpack {template=vanilla editorHeight=320 dependencies="lucide"}
```css icon.css [active]
.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;
}
```
```js /index.js
import { createIcons, Star } from 'lucide/dist/cjs/lucide';
import "./styles.css";
import "./icon.css";
createIcons({
icons: {
Star,
}
});
```
```html /index.html
Yes
```
:::
### 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.
::: sandpack {template=vanilla editorHeight=300 editorWidthPercentage=60 dependencies="lucide" externalResources="https://cdn.tailwindcss.com"}
```html /index.html
```
```js /index.js [hidden]
import { createIcons, PartyPopper } from 'lucide/dist/cjs/lucide';
import "./styles.css";
createIcons({
icons: {
PartyPopper,
}
});
```
:::
---
---
url: /guide/lucide/basics/stroke-width.md
description: >-
Learn how to customize the stroke width of Lucide icons in your Vanilla
JavaScript applications using the strokeWidth and nonScalingStroke attributes.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {template=vanilla showTabs=false editorHeight=250 editorWidthPercentage=70 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js
import './styles.css';
import { createIcons, FolderLock } from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
FolderLock,
},
});
```
:::
---
---
url: /guide/lucide/advanced/global-styling.md
description: >-
Learn how to apply global styles to Lucide icons in your Vanilla JavaScript
applications using CSS or the attrs option in createIcons.
---
## Global styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
To style all icons globally, you can either use CSS, or use the `attrs` option in `createIcons`.
We recommend using CSS for global styling, as it is the most straightforward way to achieve this.
This will apply the `color`, `size` and `strokeWidth` props to all icons.
### Style by using attrs on `createIcons`
You can also apply global styles by passing attributes to the `createIcons` function.
::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js
import "./styles.css";
import { createIcons, Building } from 'lucide/dist/cjs/lucide';
createIcons({
attrs: {
'stroke-width': 1,
stroke: 'lightblue',
},
icons: {
Building,
}
});
```
:::
### 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.
::: sandpack {template=vanilla showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide"}
```css icon.css [active]
.lucide {
/* Change this! */
color: #ffadff;
width: 48px;
height: 48px;
stroke-width: 1px;
}
.app {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```html /index.html
```
```js /index.js
import "./styles.css";
import "./icon.css";
import {
createIcons,
CakeSlice,
Candy,
Apple,
Cookie,
Martini,
IceCream2,
Sandwich,
Wine,
Dessert
} from 'lucide/dist/cjs/lucide';
createIcons({
icons: {
CakeSlice,
Candy,
Apple,
Cookie,
Martini,
IceCream2,
Sandwich,
Wine,
Dessert,
}
});
```
:::
---
---
url: /guide/lucide/advanced/shadow-dom.md
description: >-
Learn how to use Lucide icons within a shadow DOM in your Vanilla JavaScript
applications.
---
# Shadow DOM
It's possible to use Lucide icons within a shadow DOM.
## Example using `createElement` function
Using the `createElement` function to create a single icon and append it to a shadow DOM.
::: sandpack {template=vanilla editorHeight=300 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html
```
```js /index.js [active]
import "./styles.css";
import { Home, createElement } from 'lucide/dist/cjs/lucide';
const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ mode: 'open' });
const iconElement = createElement(Home)
shadowRoot.appendChild(iconElement);
```
:::
## Example using `createIcons` function
If you want to create multiple icons within a shadow DOM, you can use the `createIcons` function.
With the `root` option, you can specify the shadow root as the root element where the icons should be rendered.
::: sandpack {template=vanilla editorHeight=420 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html
```
```js /index.js [active]
import "./styles.css";
import { TreePalm, Volleyball, Waves, createIcons } from 'lucide/dist/cjs/lucide';
const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ mode: 'open' });
const iconWrapper = document.createElement('div');
iconWrapper.innerHTML = `
`;
shadowRoot.appendChild(iconWrapper);
createIcons({
root: shadowRoot,
icons: {
TreePalm,
Volleyball,
Waves,
}
})
```
:::
---
---
url: /guide/lucide/advanced/content-template-element.md
description: >-
Learn how to include Lucide icons inside HTML template elements using the
inTemplates option.
---
# Content Template element
By default icons inside `` tags are not added.
By setting the `inTemplates` option to `true`, icons inside templates will also be replaced.
More about [Content Template element on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template).
## Example using `createIcons` function with `template` element
::: sandpack {template=vanilla editorHeight=420 editorWidthPercentage=60 dependencies="lucide"}
```js /index.js [active]
import { createIcons, Backpack } from 'lucide/dist/cjs/lucide';
import "./styles.css";
createIcons({
icons: {
Backpack,
},
inTemplates: true
});
const container = document.getElementById("container");
const template = document.getElementById("template");
const firstClone = document.importNode(template.content, true);
container.appendChild(firstClone);
const secondClone = document.importNode(template.content, true);
container.appendChild(secondClone);
```
```html /index.html
```
:::
---
---
url: /guide/lucide/advanced/accessibility.md
description: Best practices for accessible icons in your application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in your app.
## Making an icon accessible
To expose an icon to assistive technologies, provide an accessible name by passing a `aria-label` prop to the icon component.
This removes the `aria-hidden` attribute and makes the icon visible to screen readers.
```tsx
```
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.
```html
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/lucide/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Vanilla JavaScript
applications.
---
# 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 adding the `@lucide/lab` package to your project.
All props like regular lucide icons can be passed to adjust the icon appearance.
## Using Lucide Lab icons
This creates a single icon based on the iconNode passed and renders a Lucide icon component.
::: sandpack {template=vanilla editorHeight=295 editorWidthPercentage=60 dependencies="lucide,@lucide/lab"}
```html /index.html [active]
```
```js /index.js
import "./styles.css";
import { createIcons, Smile } from 'lucide/dist/cjs/lucide';
import { avocado as Avocado } from '@lucide/lab';
createIcons({
icons: {
Avocado,
}
});
```
:::
---
---
url: /guide/lucide/advanced/filled-icons.md
description: >-
Fills are not officially supported in Lucide, but you can still use the fill
attribute on certain icons to create filled versions.
---
# 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:
::: sandpack {template=vanilla editorHeight=480 editorWidthPercentage=60 dependencies="lucide"}
```html /index.html [active]
```
```js /index.js
import { createIcons, Star, StarHalf } from 'lucide/dist/cjs/lucide';
import "./styles.css";
import "./icon.css";
createIcons({
icons: {
Star,
StarHalf,
}
});
```
```css icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /how-to/accessibility.md
description: >-
Learn how to make your icons accessible to all users, including those with
disabilities.
---
# Accessibility in depth
Icons are pictures that convey meaning without using words.
They can help people scan an interface, recognize actions, and understand status quickly.
Not everyone understands icons easily. Use the following accessibility rules when you add icons to an interface.
::: tip
Lucide icons are hidden from screen readers by default with `aria-hidden="true"`.
Add accessible labels when icons carry meaning or act as controls.
:::
## Provide visible labels
Icons can improve scanning, but they aren't a replacement for text.
Text helps people understand actions and navigation more reliably than icons alone.
:::: example
::: do On this page
Provide a written description of your interactive elements.
:::
::: dont
Don't rely on icons alone to communicate what elements do.
:::
::::
## Provide enough contrast
Use enough contrast between an icon and its background. Low contrast makes icons harder to see for people with low vision or color vision deficiencies.
Follow [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) when contrast requirements apply.
:::: example
::: do ../images/a11y/contrast\_do.svg?raw=true
Use a contrast ratio of at least 4.5:1.
:::
::: dont ../images/a11y/contrast\_dont.svg?raw=true
Don't use low contrast.
:::
::::
## Do not rely on color alone
Use non-color cues like shape, shading, or text to mark state, status, and validity. Color can support meaning, but it must not be the only cue.
:::: example
::: do ../images/a11y/state\_do.svg?raw=true
Mark state with non-color visual cues too.
:::
::: dont ../images/a11y/state\_dont.svg?raw=true
Don't mark state only with color.
:::
::::
## Make interactive icons focusable
Wrap interactive icons in semantic elements. Icons that perform actions need keyboard access and clear feedback when activated.
:::: example
::: do ../images/a11y/interactive\_icons\_do.svg?raw=true
Wrap interactive icons in semantic elements, such as buttons, so they are focusable.
:::
::: dont ../images/a11y/interactive\_icons\_dont.svg?raw=true
Don't leave interactive icons unable to be focused.
:::
::::
## Use a large enough target size
Use a large enough target size for interactive icon controls. Small targets can be difficult to click or tap.
:::: example
::: do ../images/a11y/target\_size\_do.svg?raw=true
Keep the target size at a minimum of 44 by 44 pixels.
:::
::: dont ../images/a11y/target\_size\_dont.svg?raw=true
Don't make the target size smaller than 44 by 44 pixels.
:::
::::
The icon itself does not need to be 44 by 44 pixels. The interactive wrapper needs to meet the target size.
## Choose universal symbols when possible
Choose icons that are widely recognized for your use case. Avoid icons that only make sense to a narrow audience.
:::: example
::: do Clothing
Pick icons that are universal symbols for your use case.
:::
::: dont Clothing
Don't pick icons that are not universally recognizable for your use case.
:::
::::
## Avoid cultural or linguistic shortcuts
Choose icons with a clear connection to the concept. Puns, idioms, and culture-specific references can be difficult to understand or translate.
:::: example
::: do Role bearers
Pick icons with a clear connection to the concept you want to represent.
:::
::: dont Role bearers
Don't pick icons based on puns or other cultural or linguistic cues.
:::
::::
## Use different icons for different meanings
Use different icons for different meanings. Reusing one icon for unrelated concepts makes the interface harder to learn.
:::: example
::: do ../images/a11y/distinct\_use\_case\_do.svg?raw=true
Use different icons for distinct purposes or meanings.
:::
::: dont ../images/a11y/distinct\_use\_case\_dont.svg?raw=true
Don't use the same icon for multiple distinct purposes or meanings, especially in the same context.
:::
::::
## Use the same icon for the same meaning
Use the same icon for the same meaning. Consistent icon use helps people recognize familiar actions across an interface.
:::: example
::: do ../images/a11y/same\_use\_case\_do.svg?raw=true
Use the same icon for the same purpose or function.
:::
::: dont ../images/a11y/same\_use\_case\_dont.svg?raw=true
Don't use different icons for the same purpose or function.
:::
::::
## Hide decorative icons from assistive technology
Keep decorative icons hidden from screen readers. Decorative icons repeat nearby text or add visual styling without adding meaning.
:::: example
::: do ../images/a11y/decorative\_icons\_do.svg?raw=true
Omit `aria-label` on decorative icons.
:::
::: dont ../images/a11y/decorative\_icons\_dont.svg?raw=true
Don't provide accessible labels to decorative icons.
:::
::::
## Label functional standalone icons carefully
Avoid standalone functional icons when possible. If an icon carries meaning without nearby text or an interactive wrapper, give that icon an accessible label.
:::: example
::: do ../images/a11y/functional\_icons\_do.svg?raw=true
Provide an accessible label for functional icons, but avoid standalone functional icons when possible.
:::
::: dont ../images/a11y/functional\_icons\_dont.svg?raw=true
Don't provide an accessible label for purely decorative icons.
:::
::::
In many cases, add visible text, place the icon inside a badge or button, or add a tooltip to the meaningful wrapper instead.
## Label icon buttons on the button
Give icon buttons an accessible name. Put the name on the button or in visually hidden text inside the button, not on the icon.
:::: example
::: do ../images/a11y/icon\_button\_do.svg?raw=true
Provide the accessible label for icon buttons themselves.
:::
::: dont ../images/a11y/icon\_button\_dont.svg?raw=true
Don't provide the accessible label for icons on icon buttons.
:::
::::
::: details Code examples
```tsx
// Don't do this
// Don't do this either
// This works, but visually hidden text is usually more reliable
// Prefer this
```
:::
## A note on `aria-label`
You can provide accessible labels with `aria-label`, but visually hidden text is often more reliable.
Read [why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/) for more context.
### 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';
;
```
### Bootstrap
```html
Phone number
```
### Tailwind CSS
```html
Phone number
```
If you are not sure which hiding technique to use, read [how to hide content](https://www.a11yproject.com/posts/how-to-hide-content/).
## Further resources
Use these accessibility resources:
* [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/)
---
---
url: /guide/react.md
description: >-
Lucide provides a React icon component library that makes it easy to integrate
icons into your React applications. Each icon is available as a standalone
React component, allowing for seamless integration and customization.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
### Resources
{{''}}
---
---
url: /guide/react/getting-started.md
description: This guide will help you get started with Lucide in your React project.
---
# 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
::: code-group
```sh [pnpm]
pnpm add lucide-react
```
```sh [yarn]
yarn add lucide-react
```
```sh [npm]
npm install lucide-react
```
```sh [bun]
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 ;
};
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 |
| `nonScalingStroke` | *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 ;
};
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/react/migration.md
---
# 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.
---
---
url: /guide/react/migration-from-feather.md
---
# 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'
-
+
-
+
-
+
-
+
```
## 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.
---
---
url: /guide/react/basics/color.md
description: >-
Learn how to adjust the color of icons in your React application using the
`color` prop or by using parent elements text color value.
---
# 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.
::: sandpack {template=react showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide-react"}
```js App.js [active]
import { Smile } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
## 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.
::: sandpack {template=react showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx Button.jsx [active]
import { ThumbsUp } from "lucide-react";
function LikeButton() {
return (
);
}
export default LikeButton;
```
```jsx App.js [hidden]
import Button from "./Button";
export default function App() {
return ;
}
```
:::
---
---
url: /guide/react/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your React application using the
`size` prop or by using CSS.
---
# 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
::: sandpack {template=react showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { Landmark } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
```css icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```jsx App.js
import { Beer } from "lucide-react";
import "./icon.css";
function App() {
return (
);
}
export default App;
```
:::
### 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.
::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
```css icon.css [active]
.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;
}
```
```jsx App.js
import { Star } from "lucide-react";
import "./icon.css";
function App() {
return (
Yes
);
}
export default App;
```
:::
### 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.
::: sandpack {template=react editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react" externalResources="https://cdn.tailwindcss.com"}
```jsx App.js [active]
import { PartyPopper } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/react/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your React application using
the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {template=react showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { FolderLock } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {template=react showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { RollerCoaster } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/react/advanced/typescript.md
description: >-
Learn about the different types exported by the `lucide-react` package and how
to use them in your React application.
---
# TypeScript Support
List of exported types from the `lucide-react` package.
These can be used to type your components when using Lucide icons in a TypeScript React project.
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps {
size?: number | string;
color?: string;
strokeWidth?: number;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG attributes
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
```tsx
import { type LucideProps } from 'lucide-react';
import { Camera } from 'lucide-react';
const WrapIcon = (props: LucideProps) => {
return ;
};
export default WrapIcon;
```
## `LucideIcon`
Type for individual icon components.
```ts
type LucideIcon = React.FC;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
```tsx
import { type LucideIcon } from 'lucide-react';
interface ButtonProps {
icon: LucideIcon;
label: string;
}
const IconButton = ({ icon: Icon, label }: ButtonProps) => {
return (
);
};
export default IconButton;
```
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [elementName: string, attrs: Record][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
```tsx
import { type IconNode, Icon } from 'lucide-react';
const customIcon: IconNode = [
['circle', { cx: 12, cy: 12, r: 10 }],
['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
const MyCustomIcon = () => {
return (
);
};
export default MyCustomIcon;
```
---
---
url: /guide/react/advanced/accessibility.md
description: Best practices for accessible icons in your React application.
---
# 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:
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
This is my house
// or
```
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
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/react/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your React application using
CSS or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
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 = () => (
);
```
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.
::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
```css icon.css [active]
.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;
}
```
```jsx App.js
import {
CakeSlice,
Candy,
Apple,
Cookie,
Martini,
IceCream2,
Sandwich,
Wine,
Dessert,
} from "lucide-react";
import "./icon.css";
function App() {
return (
);
}
export default App;
```
:::
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {template=react editorHeight=300 dependencies="lucide-react"}
```css icon.css [active]
.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;
}
```
```jsx App.js
import {
TentTree,
Caravan,
FlameKindling,
MountainSnow,
Trees,
Axe,
Map,
CloudMoon,
Sparkles,
} from "lucide-react";
import "./icon.css";
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/react/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your React applications using
the Icon component.
---
# 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 = () => (
);
```
---
---
url: /guide/react/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your React application, and the
limitations of using fills with Lucide icons.
---
# 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:
::: sandpack {template=react editorHeight=580 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { Star, StarHalf } from "lucide-react";
import "./icon.css";
function App() {
return (
{ Array.from({ length: 5 }, () => (
))}
);
}
export default App;
```
```css icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /guide/react/advanced/aliased-names.md
description: >-
Learn about the different import name styles available for Lucide icons in
your React project and how to choose the one that best fits your needs.
---
# 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
```json [.vscode/settings.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:
```ts [lucide-react.d.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 |
---
---
url: /guide/react/advanced/combining-icons.md
description: >-
Learn how to combine multiple icons into a single icon nested SVG elements in
your React application.
---
# 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 by combining existing ones.
::: sandpack {template=react showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { Scan, User } from "lucide-react";
function App() {
return (
);
}
export default App;
```
:::
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.
::: info 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.
::: sandpack {template=react showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { Mail } from "lucide-react";
function App() {
const hasUnreadMessages = true;
return (
{hasUnreadMessages && (
)}
);
}
export default App;
```
:::
### Example with text element
You can also use the `text` SVG element to add text to your icon.
::: sandpack {template=react showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-react"}
```jsx App.js [active]
import { File } from "lucide-react";
function App() {
return (
JS
);
}
export default App;
```
:::
---
---
url: /guide/react/advanced/dynamic-icon-component.md
description: >-
Learn how to use the DynamicIcon component to load icons dynamically by name
in your React application, and understand the caveats of using this approach.
---
# 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](#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 = () => (
);
```
::: info 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.
:::
---
---
url: /guide/vscode.md
description: >-
Learn how to use Lucide icons in Visual Studio Code, including tips on turning
off autocomplete, viewing JS docs and icon previews, and exploring third-party
plugins for enhanced functionality.
---
# 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.
```json [.vscode/settings.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.
---
---
url: /guide/vue.md
description: >-
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.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
---
---
url: /guide/vue/getting-started.md
description: This guide will help you get started with Lucide in your Vue project.
---
# Getting started
This guide will help you get started with Lucide in your Vue project.
Make sure you have a Vue environment set up. If you don't have one yet, you can create a new Vue project using Vite, or any other Vue boilerplate of your choice.
## Installation
::: code-group
```sh [pnpm]
pnpm add @lucide/vue
```
```sh [yarn]
yarn add @lucide/vue
```
```sh [npm]
npm install @lucide/vue
```
```sh [bun]
bun add @lucide/vue
```
:::
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Vue 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.
```vue
```
## Props
To customize the appearance of an icon, you can use the following props:
| name | type | default |
| ------------------ | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `nonScalingStroke` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
### Applying props
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).
```vue
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/vue/migration.md
---
# Migration from v0
See what is changed in v1 and how to migrate from v0 to v1 of Lucide for Vue. For all the details about v1 see [Version 1](../version-1.md)
## From `lucide-vue-next` to `@lucide/vue`
Lucide package for Vue is moved to `@lucide/vue` in v1.
Mostly a find-and-replace of `lucide-vue-next` to `@lucide/vue`. The API is the same, so no other changes are required.
## Removed Brand Icons
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.
---
---
url: /guide/vue/basics/color.md
description: >-
Learn how to adjust the color of icons in your Vue application using the
`color` prop or by using parent elements text color value.
---
# 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.
::: sandpack {template=vue showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
## 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.
::: sandpack {template=vue showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
---
---
url: /guide/vue/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your Vue application using the `size`
prop or by using CSS.
---
# 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
::: sandpack {template=vue showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=vue editorHeight=300 dependencies="@lucide/vue"}
```css src/icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```vue src/App.vue
```
:::
### 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.
::: sandpack {template=vue editorHeight=300 dependencies="@lucide/vue"}
```css src/icon.css [active]
.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;
}
```
```vue src/App.vue
Yes
```
:::
### 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.
::: sandpack {template=vue editorHeight=300 editorWidthPercentage=60 dependencies="@lucide/vue" externalResources="https://cdn.tailwindcss.com"}
```vue src/App.vue [active]
```
:::
---
---
url: /guide/vue/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your Vue application using
the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {template=vue showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {template=vue showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
---
---
url: /guide/vue/advanced/typescript.md
description: >-
Learn about the different types exported by the `@lucide/vue` package and how
to use them in your Vue application.
---
# TypeScript Support
List of exported types from the `@lucide/vue` package.
These can be used to type your components when using Lucide icons in a TypeScript Vue project.
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps {
size?: number | string;
color?: string;
strokeWidth?: number;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG attributes
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type props for your custom icon components.
::: code-group
```vue [IconWrapper.vue]
```
:::
## `LucideIcon`
Type for individual icon components, this is use full when you want to type a variable or prop that holds an icon component.
```ts
type LucideIcon = React.FC;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
::: code-group
```vue [IconButton.vue]
```
:::
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [elementName: string, attrs: Record][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
::: code-group
```vue [CustomIcon.vue]
```
:::
---
---
url: /guide/vue/advanced/accessibility.md
description: Best practices for accessible icons in your Vue application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Vue.
## 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.
```vue
This is my house
// or
```
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.
```vue
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/vue/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your Vue application using CSS
or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
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
Lucide Vue provides a context API called `setLucideProps` that allows you to set global default properties for all Lucide icons in your application.
This is useful if you want all icons to share the same size, color, or stroke width by default.
### Setting global defaults
You can call `setLucideProps` in your main entry file or in a top-level component to set the default properties for all icons.
```js
import { setLucideProps } from '@lucide/vue';
setLucideProps({
size: 32,
color: '#4f46e5',
strokeWidth: 1.5,
});
```
## 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.
::: sandpack {template=vue editorHeight=300 editorWidthPercentage=55 dependencies="@lucide/vue"}
```css src/icon.css [active]
.lucide {
/* Change this! */
color: #ffadff;
width: 56px;
height: 56px;
stroke-width: 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```vue src/App.vue
```
:::
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {template=vue editorHeight=300 editorWidthPercentage=55 dependencies="@lucide/vue"}
```css src/icon.css [active]
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```vue src/App.vue
```
:::
---
---
url: /guide/vue/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Vue applications using the
Icon component.
---
# 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.
```vue
```
---
---
url: /guide/vue/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your Vue application, and the
limitations of using fills with Lucide icons.
---
# 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:
::: sandpack {template=vue editorHeight=580 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
```css src/icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /guide/vue/advanced/aliased-names.md
description: >-
Learn about the different import name styles available for Lucide icons in
your Vue project and how to choose the one that best fits your needs.
---
# 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/vue";
```
## 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
```json [.vscode/settings.json]
{
"js/ts.preferences.autoImportFileExcludePatterns": [
"@lucide/vue",
]
}
```
### Create a custom module declaration file
Create a custom TypeScript declaration file that re-exports the preferred naming style:
```ts [lucide-vue.d.ts]
declare module "@lucide/vue" {
// Prefixed import names
export * from "@lucide/vue/dist/lucide-vue.prefixed";
// or
// Suffixed import names
export * from "@lucide/vue/dist/lucide-vue.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-vue.d.ts`.
### Import name styles
| Import Style | Available imports | Declaration file import |
| ------------- | --------------------------- | ----------------------- |
| Default | Home, HomeIcon, LucideHome | |
| Prefixed | LucideHome | lucide-vue.prefixed |
| Suffixed | HomeIcon | lucide-vue.suffixed |
---
---
url: /guide/vue/advanced/combining-icons.md
description: >-
Learn how to combine multiple icons into a single icon nested SVG elements in
your Vue application.
---
# 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 by combining existing ones.
::: sandpack {template=vue showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
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.
::: info 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.
::: sandpack {template=vue showTabs=false editorHeight=480 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
```
:::
### Example with text element
You can also use the `text` SVG element to add text to your icon.
::: sandpack {template=vue showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/vue"}
```vue src/App.vue [active]
JS
```
:::
---
---
url: /guide/svelte.md
description: >-
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.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
---
---
url: /guide/svelte/getting-started.md
description: This guide will help you get started with Lucide in your Svelte project.
---
# Getting started
This guide will help you get started with Lucide in your Svelte project.
Make sure you have a Svelte environment set up. If you don't have one yet, you can create a new Svelte project using Vite, or any other Svelte boilerplate of your choice.
## Installation
::: code-group
```sh [pnpm]
pnpm install @lucide/svelte
```
```sh [yarn]
yarn add @lucide/svelte
```
```sh [npm]
npm install @lucide/svelte
```
```sh [bun]
bun add @lucide/svelte
```
:::
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Svelte 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.
```svelte
```
## Props
To customize the appearance of an icon, you can use the following props:
| name | type | default |
| ------------------ | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `nonScalingStroke` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
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).
```svelte
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/svelte/migration.md
---
# 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.
---
---
url: /guide/svelte/basics/color.md
description: >-
Learn how to adjust the color of icons in your Svelte application using the
`color` prop or by using parent elements text color value.
---
# 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.
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
:::
## 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.
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
:::
```
---
---
url: /guide/svelte/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your Svelte application using the
`size` prop or by using CSS.
---
# 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
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=vite-svelte editorHeight=240 editorWidthPercentage=60}
```css src/icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```svelte src/App.svelte
```
:::
### 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.
::: sandpack {template=vite-svelte editorHeight=300}
```css src/icon.css [active]
.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;
}
```
```svelte src/App.svelte
Yes
```
:::
### 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.
::: sandpack {template=vite-svelte showTabs=false editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
```html /index.html [hidden]
Vite App
```
:::
---
---
url: /guide/svelte/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your Svelte application using
the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {template=vite-svelte editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte
```
:::
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {template=vite-svelte editorHeight=240 editorWidthPercentage=60}
```svelte src/App.svelte
```
:::
---
---
url: /guide/svelte/advanced/typescript.md
description: >-
Learn about the different types exported by the `@lucide/svelte` package and
how to use them in your Svelte application.
---
# TypeScript Support
List of exported types from the `@lucide/svelte` package.
These can be used to type your components when using Lucide icons in a TypeScript Svelte project.
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps extends SVGAttributes {
name?: string;
color?: string;
size?: number | string;
strokeWidth?: number | string;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
children?: Snippet;
[key: string]: any; // Any other SVG attributes
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type props for your custom icon components.
::: code-group
```svelte [IconWrapper.svelte]
```
:::
## `LucideIcon`
Type for individual icon components, this is use full when you want to type a variable or prop that holds an icon component.
```ts
import type { Component } from 'svelte';
type LucideIcon = Component;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
::: code-group
```svelte [Svelte 5]
{#each menuItems as item}
{@const Icon = item.icon}
{item.name}
{/each}
```
```svelte [Svelte 4]
{#each menuItems as item}
{@const Icon = item.icon}
{item.name}
{/each}
```
:::
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [
elementName: 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect',
attrs: SVGAttributes,
][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
::: code-group
```svelte [CustomIcon.svelte]
```
:::
---
---
url: /guide/svelte/advanced/accessibility.md
description: Best practices for accessible icons in your Svelte application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Svelte.
## 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.
```svelte
This is my house
// or
```
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.
```svelte
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/svelte/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your Svelte application using
CSS or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
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
Lucide Svelte provides a context API called `setLucideProps` that allows you to set global default properties for all Lucide icons in your application.
This is useful if you want all icons to share the same size, color, or stroke width by default.
### Setting global defaults
You can call `setLucideProps` in your main entry file or in a top-level component to set the default properties for all icons.
```js
import { setLucideProps } from '@lucide/svelte';
setLucideProps({
size: 32,
color: '#4f46e5',
strokeWidth: 1.5,
});
```
## 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.
::: sandpack {template=vite-svelte editorHeight=420 editorWidthPercentage=55}
```css src/icon.css [active]
.lucide {
/* Change this! */
color: #ffadff;
width: 56px;
height: 56px;
stroke-width: 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```svelte src/App.svelte
```
:::
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {template=vite-svelte editorHeight=420 editorWidthPercentage=55}
```css src/icon.css [active]
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```svelte src/App.svelte
```
:::
---
---
url: /guide/svelte/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Svelte applications using
the Icon component.
---
# 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.
```svelte
```
---
---
url: /guide/svelte/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your Svelte application, and the
limitations of using fills with Lucide icons.
---
# 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:
::: sandpack {template=vite-svelte showTabs=false editorHeight=480 editorWidthPercentage=60}
```svelte src/App.svelte [active]
{#each items as item}
{/each}
```
```css src/icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /guide/svelte/advanced/combining-icons.md
description: >-
Learn how to combine multiple icons into a single icon nested SVG elements in
your Svelte application.
---
# 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 by combining existing ones.
::: sandpack {template=vite-svelte showTabs=false editorHeight=400 editorWidthPercentage=60}
```svelte src/App.svelte [active]
```
:::
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.
::: info 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.
::: sandpack {template=vite-svelte showTabs=false editorHeight=480 editorWidthPercentage=60}
```svelte src/App.svelte [active]
{#if hasUnreadMessages}
{/if}
```
:::
### Example with text element
You can also use the `text` SVG element to add text to your icon.
::: sandpack {template=vite-svelte showTabs=false editorHeight=400 editorWidthPercentage=60}
```svelte src/App.svelte [active]
JS
```
:::
---
---
url: /guide/solid.md
description: >-
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.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
### Resources
{{''}}
---
---
url: /guide/solid/getting-started.md
description: This guide will help you get started with Lucide in your Solid project.
---
# Getting started
This guide will help you get started with Lucide in your Solid project.
Make sure you have a Solid environment set up. If you don't have one yet, you can create a new Solid project using Create Solid App, Vite, or any other Solid boilerplate of your choice.
## Installation
::: code-group
```sh [pnpm]
pnpm add lucide-solid
```
```sh [yarn]
yarn add lucide-solid
```
```sh [npm]
npm install lucide-solid
```
```sh [bun]
bun add lucide-solid
```
:::
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Solid 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-solid';
// Usage
const App = () => {
return ;
};
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 |
| `nonScalingStroke` | *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 (
);
};
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/solid/migration.md
---
# 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.
---
---
url: /guide/solid/basics/color.md
description: >-
Learn how to adjust the color of icons in your Solid application using the
`color` prop or by using parent elements text color value.
---
# 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.
::: sandpack {template=vite-solid showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx ./App.tsx [active]
import Smile from 'lucide-solid/icons/smile';
function App() {
return (
);
}
export default App;
```
:::
## 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.
::: sandpack {template=vite-solid editorHeight=320 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx ./Button.tsx [active]
import ThumbsUp from 'lucide-solid/icons/thumbs-up';
function LikeButton() {
return (
);
}
export default LikeButton;
```
```tsx ./App.tsx
import Button from "./Button";
export default function App() {
return ;
}
```
:::
---
---
url: /guide/solid/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your Solid application using the
`size` prop or by using CSS.
---
# 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
::: sandpack {template=vite-solid showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx App.tsx [active]
import Landmark from 'lucide-solid/icons/landmark';
function App() {
return (
);
}
export default App;
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {template=vite-solid editorHeight=300 dependencies="lucide-solid"}
```css icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```tsx App.tsx
import Beer from 'lucide-solid/icons/beer';
import "./icon.css";
function App() {
return (
);
}
export default App;
```
:::
### 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.
::: sandpack {template=vite-solid editorHeight=300 dependencies="lucide-solid"}
```css icon.css [active]
.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;
}
```
```tsx App.tsx
import Star from 'lucide-solid/icons/star';
import "./icon.css";
function App() {
return (
Yes
);
}
export default App;
```
:::
### 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.
::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid" externalResources="https://cdn.tailwindcss.com"}
```tsx App.tsx [active]
import PartyPopper from 'lucide-solid/icons/party-popper';
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/solid/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your Solid application using
the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {template=vite-solid showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx App.tsx [active]
import FolderLock from 'lucide-solid/icons/folder-lock';
function App() {
return (
);
}
export default App;
```
:::
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {template=vite-solid showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx App.tsx [active]
import RollerCoaster from 'lucide-solid/icons/roller-coaster';
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/solid/advanced/typescript.md
description: >-
Learn about the different types exported by the `lucide-solid` package and how
to use them in your Solid application.
---
# TypeScript Support
List of exported types from the `lucide-solid` package.
These can be used to type your components when using Lucide icons in a TypeScript React project
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps extends SVGAttributes {
size?: number | string;
color?: string;
strokeWidth?: number;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG attributes
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
```tsx
import { type LucideProps } from 'lucide-solid';
import { Camera } from 'lucide-solid';
const WrapIcon = (props: LucideProps) => {
return ;
};
export default WrapIcon;
```
## `LucideIcon`
Type for individual icon components.
```ts
type LucideIcon = (props: LucideProps) => JSX.Element;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
```tsx
import { type LucideIcon, Camera } from 'lucide-solid';
interface ButtonProps {
icon: LucideIcon;
label: string;
}
const IconButton = ({ icon: Icon, label }) => {
return (
);
};
export default IconButton;
```
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or [with Lucide Lab](./with-lucide-lab).
```ts
type IconNode = [elementName: string, attrs: Record][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
```tsx
import { type IconNode, Icon } from 'lucide-solid';
const customIcon: IconNode = [
['circle', { cx: 12, cy: 12, r: 10 }],
['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
const MyCustomIcon = () => {
return (
);
};
export default MyCustomIcon;
```
---
---
url: /guide/solid/advanced/accessibility.md
description: Best practices for accessible icons in your Solid application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Solid.
## 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
This is my house
// or
```
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
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/solid/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your Solid application using
CSS or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
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-solid` package.
```tsx
import { LucideProvider, Home } from 'lucide-solid';
const App = () => (
);
```
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.
::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
```css icon.css [active]
.lucide {
/* Change this! */
color: #ffadff;
width: 48px;
height: 48px;
stroke-width: 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```tsx App.tsx
import CakeSlice from 'lucide-solid/icons/cake-slice';
import Candy from 'lucide-solid/icons/candy';
import Apple from 'lucide-solid/icons/apple';
import Cookie from 'lucide-solid/icons/cookie';
import Martini from 'lucide-solid/icons/martini';
import IceCream2 from 'lucide-solid/icons/ice-cream-2';
import Sandwich from 'lucide-solid/icons/sandwich';
import Wine from 'lucide-solid/icons/wine';
import Dessert from 'lucide-solid/icons/dessert';
import './icon.css';
function App() {
return (
);
}
export default App;
```
:::
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {template=vite-solid editorHeight=300 editorWidthPercentage=60 dependencies="lucide-solid"}
```css icon.css [active]
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```tsx App.tsx
import TentTree from 'lucide-solid/icons/tent-tree';
import Caravan from 'lucide-solid/icons/caravan';
import FlameKindling from 'lucide-solid/icons/flame-kindling';
import MountainSnow from 'lucide-solid/icons/mountain-snow';
import Trees from 'lucide-solid/icons/trees';
import Axe from 'lucide-solid/icons/axe';
import Map from 'lucide-solid/icons/map';
import CloudMoon from 'lucide-solid/icons/cloud-moon';
import Sparkles from 'lucide-solid/icons/sparkles';
import './icon.css';
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/solid/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Solid applications using
the Icon component.
---
# 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.
```tsx
import { Icon } from 'lucide-solid';
import { coconut } from '@lucide/lab';
const App = () => (
);
```
---
---
url: /guide/solid/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your Solid application, and the
limitations of using fills with Lucide icons.
---
# 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:
::: sandpack {template=vite-solid editorHeight=580 editorWidthPercentage=60 dependencies="lucide-solid"}
```tsx App.tsx [active]
import Star from 'lucide-solid/icons/star';
import StarHalf from 'lucide-solid/icons/star-half';
import "./icon.css";
function App() {
return (
{ Array.from({ length: 5 }, () => (
))}
);
}
export default App;
```
```css icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /guide/solid/advanced/aliased-names.md
description: >-
Learn about the different import name styles available for Lucide icons in
your Solid project and how to choose the one that best fits your needs.
---
# 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-solid";
```
### Turn off autocomplete in your IDE
```json [.vscode/settings.json]
{
"js/ts.preferences.autoImportFileExcludePatterns": [
"lucide-solid",
]
}
```
---
---
url: /guide/astro.md
description: >-
Learn how to use Lucide icons in your Astro applications with our
comprehensive guide.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
---
---
url: /guide/astro/getting-started.md
description: This guide will help you get started with Lucide in your Astro project.
---
# Getting started
This guide will help you get started with Lucide in your Astro project.
Make sure you have a Astro environment set up. If you don't have one yet, you can create a new Astro project using Vite, or any other Astro boilerplate of your choice.
## Installation
::: code-group
```sh [pnpm]
pnpm add @lucide/astro
```
```sh [yarn]
yarn add @lucide/astro
```
```sh [npm]
npm install @lucide/astro
```
```sh [bun]
bun add @lucide/astro
```
:::
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as an Astro 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.
```astro
---
import { Camera } from '@lucide/astro';
---
```
## Props
To customize the appearance of an icon, you can use the following props:
| name | type | default |
| ------------------ | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `nonScalingStroke` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
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).
```astro
---
import { Camera } from '@lucide/astro';
---
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/astro/migration.md
---
# 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.
---
---
url: /guide/astro/basics/color.md
description: >-
Learn how to customize the color of Lucide icons in your Astro applications
using the color prop and CSS.
---
# 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.
```astro /src/pages/index.astro
---
import Smile from '@lucide/astro/icons/smile';
---
```
## 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.
```astro /src/pages/index.astro
---
import ThumbsUp from '@lucide/astro/icons/thumbs-up';
---
```
---
---
url: /guide/astro/basics/sizing.md
description: >-
Learn how to adjust the size of Lucide icons in your Astro applications using
the size prop and CSS.
---
# 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
```astro
---
import Landmark from '@lucide/astro/icons/landmark';
---
```
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: code-group
```css [icon.css]
.my-beer-icon {
width: 64px;
height: 64px;
}
```
```astro [page.astro]
---
import Beer from '@lucide/astro/icons/beer';
import './icon.css'
---
```
:::
### 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.
::: code-group
```css [icon.css]
.my-icon {
/* Icon size will relative to font-size of .text-wrapper */
width: 1em;
height: 1em;
}
.text-wrapper {
font-size: 96px;
/* layout stuff */
display: flex;
gap: 0.25em;
align-items: center;
}
```
```astro [page.astro]
---
import Star from '@lucide/astro/icons/star';
import './icon.css'
---
Yes
```
:::
### 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.
```astro
---
import PartyPopper from '@lucide/astro/icons/party-popper';
---
```
---
---
url: /guide/astro/basics/stroke-width.md
description: >-
Learn how to customize the stroke width of Lucide icons in your Astro
applications using the strokeWidth and nonScalingStroke props.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
```astro
---
import FolderLock from '@lucide/astro/icons/folder-lock';
---
```
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
```astro
---
import RollerCoaster from '@lucide/astro/icons/roller-coaster';
---
```
---
---
url: /guide/astro/advanced/typescript.md
description: Learn about the TypeScript types exported by the @lucide/astro package.
---
# TypeScript Support
List of exported types from the `@lucide/astro` package.
These can be used to type your components when using Lucide icons in a TypeScript Astro project.
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps extends SVGAttributes {
name?: string;
color?: string;
size?: number | string;
'stroke-width'?: number | string;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG attributes
}
```
### Using `IconProps`
You can use the `IconProps` interface to type props for your custom icon components.
```astro
---
import { icons, type IconProps } from '@lucide/astro';
interface Props extends IconProps {
name: keyof typeof icons;
}
const { name, ...restProps } = Astro.props;
const Icon = icons[name];
---
```
## `LucideIcon`
Type for individual icon components, this is use full when you want to type a variable or prop that holds an icon component.
```ts
import type { Component } from 'astro/types';
import type { IconProps } from '@lucide/astro';
type LucideIcon = Component;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
```astro
---
import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';
type MenuItem = {
name: string;
href: string;
icon: typeof IconType;
};
const menuItems: MenuItem[] = [
{
name: 'Home',
href: '/',
icon: House,
},
{
name: 'Blog',
href: '/blog',
icon: Library,
},
{
name: 'Projects',
href: '/projects',
icon: Cog,
},
];
---
{
menuItems.map((item) => (
{item.name}
))
}
```
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [
elementName: 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect',
attrs: HTMLAttributes<'svg'>,
][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
```astro [CustomIcon.astro]
---
import { type IconNode, Icon } from '@lucide/astro';
const customIcon: IconNode = [
['circle', { cx: 12, cy: 12, r: 10 }],
['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
---
```
---
---
url: /guide/astro/advanced/accessibility.md
description: Best practices for accessible icons in your application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Astro.
## 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.
```astro
This is my house
// or
```
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.
```astro
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/astro/advanced/global-styling.md
description: >-
Learn how to apply global styling to Lucide icons in your Astro applications
using CSS.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
To style all icons globally you can use CSS.
## 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.
```css
.lucide {
color: #ffadff;
width: 56px;
height: 56px;
stroke-width: 1px;
}
```
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
```css
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
```
---
---
url: /guide/astro/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Astro applications using
the Icon component.
---
# 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.
```astro
---
import { Icon } from '@lucide/astro';
import { burger, sausage } from '@lucide/lab';
---
```
---
---
url: /guide/preact.md
description: >-
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.
---
# 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
### Basics
{{''}}
### Advanced
{{''}}
### Resources
{{''}}
---
---
url: /guide/preact/getting-started.md
description: This guide will help you get started with Lucide in your Preact project.
---
# Getting started
This guide will help you get started with Lucide in your Preact project.
Make sure you have a Preact environment set up. If you don't have one yet, you can create a new Preact project using Create Preact App, Vite, or any other Preact boilerplate of your choice.
## Installation
::: code-group
```sh [pnpm]
pnpm add lucide-preact
```
```sh [yarn]
yarn add lucide-preact
```
```sh [npm]
npm install lucide-preact
```
```sh [bun]
bun add lucide-preact
```
:::
## Importing your first icon
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Preact 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-preact';
// Usage
const App = () => {
return ;
};
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 |
| `nonScalingStroke` | *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 (
);
};
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/preact/migration.md
---
# 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.
---
---
url: /guide/preact/basics/color.md
description: >-
Learn how to adjust the color of icons in your Preact application using the
`color` prop or by using parent elements text color value.
---
# 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.
::: sandpack {showTabs=false editorHeight=295 editorWidthPercentage=60 dependencies="lucide-preact"}
```js App.js [active]
import { h } from "preact";
import { Smile } from "lucide-preact";
function App() {
return (
);
}
export default App;
```
:::
## 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.
::: sandpack {showTabs=false editorHeight=340 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx Button.jsx [active]
import { h } from "preact";
import { ThumbsUp } from "lucide-preact";
function LikeButton() {
return (
);
}
export default LikeButton;
```
```js App.js [hidden]
import { h } from "preact";
import Button from "./Button";
export default function App() {
return ;
}
```
:::
---
---
url: /guide/preact/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your Preact application using the
`size` prop or by using CSS.
---
# 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
::: sandpack {showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-preact"}
```js App.js [active]
import { h } from "preact";
import { Landmark } from "lucide-preact";
function App() {
return (
);
}
export default App;
```
:::
## Adjusting the icon size via CSS
The CSS properties `width` and `height` can be used to adjust the icon size.
::: sandpack {editorHeight=320 dependencies="lucide-preact"}
```css icon.css [active]
.my-beer-icon {
/* Change this! */
width: 64px;
height: 64px;
}
```
```jsx App.js
import { h } from "preact";
import { Beer } from "lucide-preact";
import "./icon.css";
function App() {
return (
);
}
export default App;
```
:::
### 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.
::: sandpack {editorHeight=320 dependencies="lucide-preact"}
```css icon.css [active]
.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;
}
```
```jsx App.js
import { h } from "preact";
import { Star } from "lucide-preact";
import "./icon.css";
function App() {
return (
Yes
);
}
export default App;
```
:::
### 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.
::: sandpack {showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-preact" externalResources="https://cdn.tailwindcss.com"}
```js App.js [active]
import { h } from "preact";
import { PartyPopper } from "lucide-preact";
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/preact/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your Preact application using
the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
::: sandpack {showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { h } from 'preact';
import { FolderLock } from 'lucide-preact';
function App() {
return (
);
}
export default App;
```
:::
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
::: sandpack {showTabs=false editorHeight=340 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { h } from 'preact';
import { RollerCoaster } from 'lucide-preact';
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/preact/advanced/typescript.md
description: >-
Learn about the different types exported by the `lucide-preact` package and
how to use them in your Preact application.
---
# TypeScript
List of exported types from the `lucide-preact` package.
These can be used to type your components when using Lucide icons in a TypeScript React project
## `LucideProps`
Exports all props that can be passed to an icon component and any other SVG attributes, see: [SVG Presentation Attributes on MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```ts
interface LucideProps {
size?: number | string;
color?: string;
strokeWidth?: number;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG attributes
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
```tsx
import { type LucideProps } from 'lucide-preact';
import { Camera } from 'lucide-preact';
const WrapIcon = (props: LucideProps) => {
return ;
};
export default WrapIcon;
```
## `LucideIcon`
Type for individual icon components.
```ts
type LucideIcon = React.FC;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
```tsx
import { type LucideIcon } from 'lucide-preact';
interface ButtonProps {
icon: LucideIcon;
label: string;
}
const IconButton = ({ icon: Icon, label }: ButtonProps) => {
return (
);
};
export default IconButton;
```
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [elementName: string, attrs: Record][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
```tsx
import { type IconNode, Icon } from 'lucide-preact';
const customIcon: IconNode = [
['circle', { cx: 12, cy: 12, r: 10 }],
['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
const MyCustomIcon = () => {
return (
);
};
export default MyCustomIcon;
```
---
---
url: /guide/preact/advanced/accessibility.md
description: Best practices for accessible icons in your Preact application.
---
# 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:
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Preact.
## 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
This is my house
// or
```
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
```
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
---
---
url: /guide/preact/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your Preact application using
CSS or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
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-preact` package.
```tsx
import { LucideProvider, Home } from 'lucide-preact';
const App = () => (
);
```
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.
::: sandpack {editorHeight=400 editorWidthPercentage=60 dependencies="lucide-preact"}
```css icon.css [active]
.lucide {
/* Change this! */
color: #ffadff;
width: 48px;
height: 48px;
stroke-width: 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```jsx App.js
import {
CakeSlice,
Candy,
Apple,
Cookie,
Martini,
IceCream2,
Sandwich,
Wine,
Dessert,
} from 'lucide-preact';
import { h } from 'preact';
import './icon.css';
function App() {
return (
);
}
export default App;
```
:::
### Non-scaling strokes
For global non-scaling 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 [non-scaling strokes](../basics/stroke-width.md#non-scaling-strokes) for more info.
::: sandpack {editorHeight=480 editorWidthPercentage=60 dependencies="lucide-preact"}
```css icon.css [active]
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 6px;
}
```
```jsx App.js
import {
TentTree,
Caravan,
FlameKindling,
MountainSnow,
Trees,
Axe,
Map,
CloudMoon,
Sparkles,
} from 'lucide-preact';
import { h } from 'preact';
import './icon.css';
function App() {
return (
);
}
export default App;
```
:::
---
---
url: /guide/preact/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your Preact applications using
the Icon component.
---
# 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-preact';
import { coconut } from '@lucide/lab';
const App = () => (
);
```
---
---
url: /guide/preact/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your Preact application, and the
limitations of using fills with Lucide icons.
---
# 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:
::: sandpack { editorHeight=580 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { Star, StarHalf } from "lucide-preact";
import { h } from "preact";
import "./icon.css";
function App() {
return (
{ Array.from({ length: 5 }, () => (
))}
);
}
export default App;
```
```css icon.css
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
```
:::
---
---
url: /guide/preact/advanced/aliased-names.md
description: >-
Learn about the different import name styles available for Lucide icons in
your project and how to choose the one that best fits your needs.
---
# 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-preact";
```
## 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
```json [.vscode/settings.json]
{
"js/ts.preferences.autoImportFileExcludePatterns": [
"lucide-preact",
]
}
```
### Create a custom module declaration file
Create a custom TypeScript declaration file that re-exports the preferred naming style:
```ts [lucide-preact.d.ts]
declare module "lucide-preact" {
// Prefixed import names
export * from "lucide-preact/dist/lucide-preact.prefixed";
// or
// Suffixed import names
export * from "lucide-preact/dist/lucide-preact.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-preact.d.ts`.
### Import name styles
| Import Style | Available imports | Declaration file import |
| ------------- | --------------------------- | ----------------------- |
| Default | Home, HomeIcon, LucideHome | |
| Prefixed | LucideHome | lucide-preact.prefixed |
| Suffixed | HomeIcon | lucide-preact.suffixed |
---
---
url: /guide/preact/advanced/combining-icons.md
description: >-
Learn how to combine multiple icons into a single icon nested SVG elements in
your Preact application.
---
# 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 by combining existing ones.
::: sandpack {showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { Scan, User } from 'lucide-preact';
import { h } from 'preact';
function App() {
return (
);
}
export default App;
```
:::
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.
::: info 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.
::: sandpack {showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { Mail } from 'lucide-preact';
import { h } from 'preact';
function App() {
const hasUnreadMessages = true;
return (
{hasUnreadMessages && (
)}
);
}
export default App;
```
:::
### Example with text element
You can also use the `text` SVG element to add text to your icon.
::: sandpack {showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-preact"}
```jsx App.js [active]
import { File } from 'lucide-preact';
import { h } from 'preact';
function App() {
return (
JS
);
}
export default App;
```
:::
---
---
url: /guide/react-native.md
description: >-
Lucide provides a React Native icon component library that makes it easy to
integrate icons into your React Native applications. Each icon is available as
a standalone React Native component, allowing for seamless integration and
customization.
---
# Lucide for React Native
Lucide provides a React Native icon component library that makes it easy to integrate icons into your React Native applications.
Each icon is available as a standalone React component, allowing for seamless integration and customization.
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
### Basics
{{''}}
### Advanced
{{''}}
### Resources
{{''}}
---
---
url: /guide/react-native/getting-started.md
description: This guide will help you get started with Lucide in your React Native project.
---
# Getting started
This guide will help you get started with Lucide in your React Native project.
Make sure you have a React Native environment set up. If you don't have one yet, you can create a new React Native project using React Native CLI, Expo, or any other React Native boilerplate of your choice.
## Installation
First, ensure that you have `react-native-svg` (version between 12 and 15) installed. Then, install the package:
::: code-group
```sh [pnpm]
pnpm add lucide-react-native
```
```sh [yarn]
yarn add lucide-react-native
```
```sh [npm]
npm install lucide-react-native
```
```sh [bun]
bun add lucide-react-native
```
:::
## Importing your first icon
Lucide is built with ES Modules.
Each icon can be imported as a React component, which renders an `react-native-svg` element.
```jsx
import { Camera } from 'lucide-react-native';
// Usage
const App = () => {
return ;
};
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 |
| `nonScalingStroke` | *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 (
);
};
```
More examples and details how to use props, continue the guide:
---
---
url: /guide/react-native/migration.md
---
# 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.
---
---
url: /guide/react-native/basics/color.md
description: >-
Learn how to adjust the color of icons in your React Native application using
the `color` prop or by using parent elements text color value.
---
# 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.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View } from 'react-native';
import { Smile } from "lucide-react-native";
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }
const App = () => {
return (
);
};
export default App;
```
---
---
url: /guide/react-native/basics/sizing.md
description: >-
Learn how to adjust the size of icons in your React Native application using
the `size` prop or by using CSS.
---
# 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
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View } from 'react-native';
import { Landmark } from "lucide-react-native";
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center' }
const App = () => {
return (
);
};
export default App;
```
## Adjusting the icon size via the style prop
The style properties `width` and `height` can be used to adjust the icon size.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Landmark } from "lucide-react-native";
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
icon: {
width: 48,
height: 48
},
});
const App = () => {
return (
);
};
export default App;
```
---
---
url: /guide/react-native/basics/stroke-width.md
description: >-
Learn how to adjust the stroke width of icons in your React Native application
using the `strokeWidth` prop or adjust the strokeWidth appearance using the
`nonScalingStroke` prop.
---
# Stroke width
All icons are designed with SVG elements using strokes.
These have a default stroke width of `2px`.
The `strokeWidth` can be adjusted to create a different look of the icons.
## Adjusting stroke width with `strokeWidth` prop
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View } from 'react-native';
import { FolderLock } from "lucide-react-native";
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
const App = () => {
return (
);
};
export default App;
```
## Non-scaling strokes
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
This means that when `nonScalingStroke` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
### Adjusting stroke width with `nonScalingStroke` prop
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View } from 'react-native';
import { RollerCoaster } from "lucide-react-native";
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
const App = () => {
return (
);
};
export default App;
```
---
---
url: /guide/react-native/advanced/typescript.md
description: >-
Learn about the different types exported by the `lucide-react-native` package
and how to use them in your React Native application.
---
# TypeScript Support
List of exported types from the `lucide-react-native` package.
These can be used to type your components when using Lucide icons in a TypeScript React project
## `LucideProps`
Exports all props that can be passed to an icon component and SVG props supported by [react-native-svg](https://github.com/software-mansion/react-native-svg).
```ts
interface LucideProps {
size?: number | string;
color?: string;
strokeWidth?: number;
nonScalingStroke?: boolean;
/**
* @deprecated
*/
absoluteStrokeWidth?: boolean;
[key: string]: any; // Any other SVG props, supported by react-native-svg
}
```
### Using `LucideProps`
You can use the `LucideProps` interface to type your custom icon components or when you need to work with icon props.
```tsx
import { Camera, type LucideProps } from 'lucide-react-native';
const WrapIcon = (props: LucideProps) => {
return ;
};
export default WrapIcon;
```
## `LucideIcon`
Type for individual icon components.
```ts
type LucideIcon = React.FC;
```
### Using `LucideIcon`
You can use the `LucideIcon` type when you need to work with icon components directly.
```tsx
import { type LucideIcon } from 'lucide-react-native';
interface ButtonProps {
icon: LucideIcon;
label: string;
}
const IconButton = ({ icon: Icon, label }: ButtonProps) => {
return (
);
};
export default IconButton;
```
## `IconNode`
Type for the raw SVG structure of an icon. This is an array of SVG elements and their attributes to render the icon.
Not commonly used directly in application code. But can be useful for advanced use cases, such as using custom icons or with Lucide Lab.
```ts
type IconNode = [elementName: string, attrs: Record][];
```
### Using `IconNode`
You can use the `IconNode` type when you need to work with the raw SVG structure of an icon.
```tsx
import { type IconNode, Icon } from 'lucide-react-native';
const customIcon: IconNode = [
['circle', { cx: 12, cy: 12, r: 10 }],
['line', { x1: 12, y1: 8, x2: 12, y2: 12 }],
['line', { x1: 12, y1: 16, x2: 12, y2: 16 }],
];
const MyCustomIcon = () => {
return (
);
};
export default MyCustomIcon;
```
---
---
url: /guide/react-native/advanced/global-styling.md
description: >-
Learn how to style all Lucide icons globally in your React Native application
using CSS or the Lucide context provider.
---
# Global Styling
Adjusting icons can be done by using [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
To style all icons globally, you can use a context provider.
## Context Provider
For global styling using a context provider, you can use the `LucideProvider` component that is provided by the `lucide-react-native` package.
```tsx
import { LucideProvider, Home } from 'lucide-react-native';
const App = () => (
);
```
This will apply the `color`, `size` and `strokeWidth` props to all icons that are children of the `LucideProvider`.
---
---
url: /guide/react-native/advanced/with-lucide-lab.md
description: >-
Learn how to use Lucide Lab or custom icons in your React Native applications
using the Icon component.
---
# 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 = () => (
);
```
---
---
url: /guide/react-native/advanced/filled-icons.md
description: >-
Learn how to use fills with Lucide icons in your React Native application, and
the limitations of using fills with Lucide icons.
---
# 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:
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Star, StarHalf } from "lucide-react-native";
const App = () => {
return (
{ Array.from({ length: 5 }, () => (
))}
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
starRating: {
position: 'relative',
},
stars: {
display: 'flex',
flexDirection: 'row',
gap: 4,
},
rating: {
position: 'absolute',
top: 0,
}
});
export default App;
```
---
---
url: /guide/react-native/advanced/aliased-names.md
description: >-
Learn about the different import name styles available for Lucide icons in
your React Native project and how to choose the one that best fits your needs.
---
# 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-native";
```
## 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
```json [.vscode/settings.json]
{
"js/ts.preferences.autoImportFileExcludePatterns": [
"lucide-react-native",
]
}
```
### Create a custom module declaration file
Create a custom TypeScript declaration file that re-exports the preferred naming style:
```ts [lucide-react-native.d.ts]
declare module "lucide-react-native" {
// Prefixed import names
export * from "lucide-react-native/dist/lucide-react-native.prefixed";
// or
// Suffixed import names
export * from "lucide-react-native/dist/lucide-react-native.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-native.d.ts`.
### Import name styles
| Import Style | Available imports | Declaration file import |
| ------------- | --------------------------- | ----------------------- |
| Default | Home, HomeIcon, LucideHome | |
| Prefixed | LucideHome | lucide-react-native.prefixed |
| Suffixed | HomeIcon | lucide-react-native.suffixed |
---
---
url: /guide/react-native/advanced/combining-icons.md
description: >-
Learn how to combine multiple icons into a single icon nested SVG elements in
your React Native application.
---
# 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 by combining existing ones.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Scan, User} from "lucide-react-native";
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```
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.
::: info 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.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Mail } from "lucide-react-native";
import { Circle } from 'react-native-svg';
const App = () => {
const hasUnreadMessages = true;
return (
{hasUnreadMessages && (
)}
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```
### Example with text element
You can also use the `text` SVG element to add text to your icon.
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { File } from "lucide-react-native";
import { Text } from 'react-native-svg';
const App = () => {
const hasUnreadMessages = true;
return (
JS
);
};
const styles = StyleSheet.create({
container: {
height: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'center'
},
});
export default App;
```
---
---
url: /guide/react-native/advanced/optimizations.md
description: >-
Learn how to optimize the bundle size of your React Native and Expo web
exports by tree-shaking Lucide icons.
---
# Optimizations
By default you import icons from the `lucide-react-native` entry point:
```jsx
import { Camera } from 'lucide-react-native';
```
This is convenient, but it relies on the bundler to *tree-shake* the entry point (a "barrel" file that re-exports every icon) so that only the icons you actually use end up in your bundle.
On native platforms this is usually fine. On **web exports** it can be a problem, because the Metro bundler is currently not very good at tree-shaking barrel imports and may include **all** icons in your final bundle.
## The Metro tree-shaking limitation
When you build for web with Expo (`expo export --platform web`), Metro is used to bundle your JavaScript. Metro bundles modules on-demand and, by default, does not remove unused exports from a barrel file.
This means an import like the one below can pull in the entire icon set, even though only a single icon is rendered:
```jsx
// May bundle every Lucide icon on web exports
import { Camera } from 'lucide-react-native';
```
Expo documents an experimental optimization for [React Native web imports](https://docs.expo.dev/guides/tree-shaking/#react-native-web-imports) and for [removing unused imports and exports](https://docs.expo.dev/guides/tree-shaking/#remove-unused-imports-and-exports). In practice this tree-shaking does **not** currently work reliably for `lucide-react-native` barrel imports, so the unused icons are not removed from web exports.
## Recommended: import icons individually
To guarantee that only the icons you use are bundled — regardless of the bundler's tree-shaking capabilities — import each icon directly from its own module:
```jsx
import Camera from 'lucide-react-native/icons/camera';
// Usage
const App = () => {
return ;
};
export default App;
```
Because each icon lives in its own file, the bundler only ever includes the icons you explicitly import. This keeps your web export small without depending on Metro's experimental tree-shaking.
The icon module name is the [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) version of the icon name. For example, the `ArrowRight` icon is imported from `lucide-react-native/icons/arrow-right`:
```jsx
import ArrowRight from 'lucide-react-native/icons/arrow-right';
```
::: tip
Individual icon imports work identically on native and web, so you can safely use this style across your whole project to keep bundles as small as possible on every platform.
:::
---
---
url: /guide/angular.md
description: >-
A standalone, signal-based, zoneless implementation that makes it easy to
integrate icons into your Angular projects.
---
# Lucide for Angular
A standalone, signal-based, zoneless implementation that makes it easy to integrate icons into your Angular projects.
List of features:
* **Easy to Use**: Use icons as standalone Angular components with full dependency injection support.
* **Customizable**: Adjust size, color, and other properties via inputs or globally with an Angular provider.
* **Tree-shakable**: Only the icons you use are included in your final bundle
* **TypeScript Support**: Fully typed components for better developer experience.
## Overview
### Basics
{{''}}
### Advanced
{{''}}
---
---
url: /guide/angular/getting-started.md
description: This guide will help you get started with Lucide in your Angular project.
---
# Getting started
This guide will help you get started with Lucide in your Angular project.
Make sure you have an Angular environment set up. If you don't have one yet, you can [create a new Angular project](https://angular.dev/installation#create-a-new-project) using `@angular/cli`.
## Prerequisites
This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
## Installation
::: code-group
```sh [pnpm]
pnpm add @lucide/angular
```
```sh [yarn]
yarn add @lucide/angular
```
```sh [npm]
npm install @lucide/angular
```
```sh [bun]
bun add @lucide/angular
```
:::
## Importing your first icon
This library is built with standalone components, so it's completely tree-shakable.
Every icon can be imported as a ready-to-use standalone 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.
### Standalone icons
```ts
import { Component } from '@angular/core';
import { LucideFileText } from '@lucide/angular';
@Component({
selector: 'app',
template: '',
imports: [LucideFileText],
})
export class App {}
```
### Dynamic icon component
When you need to render icons dynamically (for example in a list of menu items or based on a boolean signal), you can use the `LucideDynamicIcon` component:
```ts
import { Component, computed, signal } from '@angular/core';
import { LucideDynamicIcon, LucideCircleCheck, LucideCircleX } from '@lucide/angular';
@Component({
selector: 'app',
template: ``,
imports: [LucideDynamicIcon],
})
export class App {
protected readonly model = signal(true);
protected readonly icon = computed(() => (this.model() ? LucideCircleCheck : LucideCircleX));
}
```
## Component inputs
To customize the appearance of an icon, you can use the following inputs:
| name | type | default |
| ------------------ | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `strokeWidth` | *number* | 2 |
| `nonScalingStroke` | *boolean* | false |
| `title` | *string* | null |
Because icons render as SVG elements, all standard SVG attributes can also be applied. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```html
```
For more examples and details on how to use these inputs, continue the guide:
---
---
url: /guide/angular/migration.md
---
# Migrating from `lucide-angular` ⇒ `@lucide/angular`
## What changed
`@lucide/angular` moves from a module + single component based API to a more modern Angular approach:
* The library defines modern signal-based, standalone components, without zone.js based change detection.
* Icons are consumed as standalone imports (one component per icon).
* Dynamic icon registration is done via `provideLucideIcons()`, not using `NgModule`.
* Static icons use per-icon components for better tree-shaking.
* Dynamic icons still use a single dynamic component (`svg[lucideIcon]`).
* Global defaults are configured via `provideLucideConfig()`.
* Brand icons have been removed, see the next section.
***
## Step 1 – Update dependencies
Remove `lucide-angular`, and add `@lucide/angular`, see:\
[Getting Started # Installation](/guide/angular/getting-started.md#installation)
***
## Step 2 – Replace `LucideAngularModule.pick(...)` with `provideLucideIcons(...)`
> Notes:
>
> * Old imports like `AirVentIcon` / `AlarmClock` from `lucide-angular` should be replaced with the new per-icon exports `LucideAirVent` and `LucideAlarmClock`.
> * If you mostly used static icons, you may not need to provide them **at all**, please refer to Step 3.
### Before
#### NgModule based
```ts
import { BrowserModule, NgModule } from '@angular/core';
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
@NgModule({
imports: [
BrowserModule,
LucideAngularModule.pick({ AirVent, AlarmClock }),
],
})
export class AppModule {}
```
#### Standalone
```ts
import { ApplicationConfig } from '@angular/core';
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
export const appConfig: ApplicationConfig = {
providers: [
// ...
importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })),
]
};
```
### After
```ts
import { ApplicationConfig } from '@angular/core';
import { provideLucideIcons, LucideAirVent, LucideAlarmClock } from '@lucide/angular';
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideLucideIcons(
LucideAirVent,
LucideAlarmClock,
),
]
};
```
***
## Step 3 – Replace `` / `` / `` / ``
The legacy package rendered everything through a single component. All of these selectors must be migrated to `