--- url: /guide/packages/icons.md --- # @lucide/icons `@lucide/icons` is a helper library that exports Lucide **icon data** in a tree-shakable format, also providing utilities for dynamic importing icons. It intentionally ships **no real rendering logic or components** — other packages (for example [`@lucide/angular`](http://npmjs.com/package/@lucide/angular)) can consume this data to render icons in their respective frameworks. You can also use this package to build third-party integrations for frameworks we don't (yet) support. ## Installation ::: code-group ```sh [pnpm] pnpm add @lucide/icons ``` ```sh [yarn] yarn add @lucide/icons ``` ```sh [npm] npm install @lucide/icons ``` ```sh [bun] bun add @lucide/icons ``` ::: ## Icon data format Each icon is described by the following interface: ```typescript export type LucideIconData = { name: string; node: LucideIconNode[]; } & ( | { size: number } | { width: number; height: number; } ); ``` | name | type | description | |------------------------------|--------------------|--------------------------------------------------------------------| | `name` | `string` | The name of the icon. | | `node` | `LucideIconNode[]` | SVG child nodes as `[tagName, attributes]` tuples. | | `size` or `width` & `height` | `number` | The dimensions of the icon (`size` is shorthand for square icons). | ## How to use Icons can be imported individually. Only the icons you import end up referenced by your application code — the rest will be eliminated by tree-shaking. ```ts import { House } from '@lucide/icons'; // House is icon data (not a rendered component). ``` ## Building icons `@lucide/icons` ships small helpers that convert Lucide icon data into different render-ready outputs. All builders accept the same `params` object (`LucideBuildParams`) to customize the generated SVG. ### Build parameters The following parameters are supported (names reflect the current implementation): | param | type | effect | |-----------------------|--------------------------|------------------------------------------------------------------------------------| | `color` | `string` | Sets `stroke` (defaults to `currentColor`). | | `size` | `number` | Sets both `width` and `height` (defaults to 24). | | `width` | `number` | Sets `width` only. | | `height` | `number` | Sets `height` only. | | `strokeWidth` | `number` | Sets `stroke-width` (defaults to 2). | | `absoluteStrokeWidth` | `boolean` | Adds [`vector-effect="non-scaling-stroke"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements. | | `className` | `string` | Appended to the generated `class` attribute. | | `attributes` | `Record` | Add or override any generated SVG attributes (including `class`, `viewBox`, etc.). | ::: info SVG attributes generated by the builders include a default Lucide setup (`xmlns`, `viewBox`, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, `stroke-linecap="round"`, `stroke-linejoin="round"`), plus a class string of the form: `lucide lucide-{iconName}`. ::: ### `buildLucideIconNode` Creates a root SVG node in an svgson-like format: ```ts import { buildLucideIconNode } from '@lucide/icons/builders'; import { House } from '@lucide/icons'; const node = buildLucideIconNode(House, { size: 32, strokeWidth: 1.5, className: 'my-icon', }); // -> ['svg', attributes, children] ``` This is useful if you want to plug Lucide icons into your own renderer, templating system, or framework integration. ### `buildLucideSvg` Creates an SVG string: ```ts import { buildLucideSvg } from '@lucide/icons/builders'; import { House } from '@lucide/icons'; const svg = buildLucideSvg(House, { size: 24, color: '#111' }); ``` ### `buildLucideIconElement` Creates an actual DOM element (SVG) within the provided document: ```ts import { buildLucideIconElement } from '@lucide/icons/builders'; import { House } from '@lucide/icons'; const el = buildLucideIconElement(document, House, { size: 24 }); document.body.appendChild(el); ``` ### `buildLucideDataUri` Creates a base64-encoded SVG data URI from a Lucide icon object. This helper works in both browsers and Node.js: * In browsers it uses `btoa` (with proper UTF-8 handling) * In Node.js it falls back to `Buffer` ```ts import { buildLucideDataUri } from '@lucide/icons/builders'; import { House } from '@lucide/icons'; const uri = buildLucideDataUri(House, { size: 24 }); ``` The returned value can be used directly in places such as: * `` * CSS `background-image` * Canvas drawing * Inline data URLs in HTML or SVG ::: tip Environment notes * The SVG is encoded as UTF-8 before base64 conversion to ensure correct handling of non-ASCII characters. * No runtime configuration is required — the function automatically selects the appropriate encoding strategy. * If neither `btoa` nor `Buffer` is available, an error is thrown. ::: ## Dynamic imports Dynamic imports are useful when you only know the icon name at runtime (for example, icon names stored in a database or a CMS). For purely static use cases, prefer direct imports for the best tree-shaking results. ::: tip Validate `iconName` before indexing the map (and provide a fallback icon) to avoid runtime errors. ::: ## Dynamic imports Dynamic imports are useful when the icon name is only known at runtime (for example, icon names stored in a CMS or database). For purely static usage, prefer direct imports for maximum tree-shaking. ```ts import { lucideDynamicIconImports } from '@lucide/icons/dynamic'; const name = 'house'; const icon = await lucideDynamicIconImports[name]?.(); if (!icon) { // handle unknown icon name (fallback) } ``` --- --- url: /guide/packages/angular.md --- # `@lucide/angular` ::: warning This documentation is for `@lucide/angular`. To learn about our legacy package for Angular, please refer to [`lucide-angular`](https://v0.lucide.dev/guide/packages/lucide-angular). ::: A standalone, signal-based, zoneless implementation of Lucide icons for Angular. **What you can accomplish:** * Use icons as standalone Angular components with full dependency injection support * Configure icons globally through modern Angular providers * Integrate with Angular's reactive forms and data binding * Build scalable applications with tree-shaken icons and lazy loading support ## Prerequisites This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection. ## Installation ::: 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 ``` ::: ## How to use ### Standalone icons Every icon can be imported as a ready-to-use standalone component: ```html ``` ```ts{2,7} import { Component } from '@angular/core'; import { LucideFileText } from '@lucide/angular'; @Component({ selector: 'app-foobar', templateUrl: './foobar.html', imports: [LucideFileText], }) export class Foobar { } ``` ::: tip Standalone icon components use the selector `svg[lucide{PascalCaseIconName}]`. This ensures minimal bloating of the DOM and the ability to directly manipulate all attributes of the resulting SVG element. ::: ### Dynamic icon component You may also use the dynamic `LucideIcon` component to dynamically render icons. #### With tree-shaken imports You may pass imported icons directly to the component: ```html{3} @for (item of items) { {{ item.title }} } ``` ```ts{2,8,14,19} import { Component } from '@angular/core'; import { LucideIcon, LucideHouse, LucideUsersRound } from '@lucide/angular'; import { NavbarItem, NavbarItemModel } from './navbar-item'; @Component({ selector: 'app-navbar', templateUrl: './navbar.html', imports: [LucideIcon, NavbarItem], }) export class Navbar { readonly items: NavbarItemModel[] = [ { title: 'Home', icon: LucideHouse, routerLink: [''], }, { title: 'Users', icon: LucideUsersRound, routerLink: ['admin/users'], }, ]; } ``` #### With icons provided via dependency injection Alternatively, the component also accepts string inputs. To use icons this way, first, you have to provide icons via `provideLucideIcons`: :::code-group ```ts{7-10} [app.config.ts] import { ApplicationConfig } from '@angular/core'; import { provideLucideIcons, LucideCircleCheck, LucideCircleX } from '@lucide/angular'; export const appConfig: ApplicationConfig = { providers: [ // ... provideLucideIcons( LucideCircleCheck, LucideCircleX, ), ] }; ``` ```html [foobar.html] ``` ```ts{7} [foobar.ts] import { Component } from '@angular/core'; import { LucideIcon } from '@lucide/angular'; @Component({ selector: 'app-foobar', templateUrl: './template-url', imports: [LucideIcon], }) export class Foobar { } ``` ::: ::: tip For optimal bundle size, provide icons at the highest appropriate level in your application. Providing all icons at the root level may increase your initial bundle size, while providing them at feature module level enables better code splitting. ::: ::: warning While you may provide your icons at any level of the dependency injection tree, be aware that [Angular's DI system is hierarchical](https://angular.dev/guide/di/defining-dependency-providers#injector-hierarchy-in-angular): `LucideIcon` will only have access to the icons provided closest to it in the tree. ::: ## Accessible labels You can use the `title` input property to set the [accessible name element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title) on the SVG: ```html ``` This will result in the following output: ```html{2} Go to dashboard ``` ## Props You can pass additional props to adjust the icon appearance. | name | type | default | |-----------------------|-----------|--------------| | `size` | *number* | 24 | | `color` | *string* | currentColor | | `strokeWidth` | *number* | 2 | | `absoluteStrokeWidth` | *boolean* | false | ```html ``` ## Global configuration You can use `provideLucideConfig` to configure the default property values as defined above: ```ts{2,7-9} import { ApplicationConfig } from '@angular/core'; import { provideLucideConfig } from '@lucide/angular'; export const appConfig: ApplicationConfig = { providers: [ // ... provideLucideConfig({ strokeWidth: 1.5 }), ] }; ``` ## Styling via CSS Icons can also be styled by using custom CSS classes: ```html ``` ```css svg.my-icon { width: 12px; height: 12px; stroke-width: 3; } ``` ## With Lucide lab or custom icons [Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library. While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons: ```html ``` ```ts{2,6-7,11-12} import { provideLucideIcons } from '@lucide/angular'; import { coconut } from '@lucide/lab'; @Component({ templateUrl: './foobar.html', // For using by name via provider: providers: [provideLucideIcons({ coconut })], imports: [LucideIcon] }) export class Foobar { // For passing directly as LucideIconData: readonly CoconutIcon = coconut; } ``` ## Troubleshooting ### The icon is not being displayed If using per-icon-components: 1. Ensure that the icon component is being imported, if using per-icon-components 2. Check that the icon name matches exactly (case-sensitive) If using the dynamic component: 1. Ensure the icon is provided via `provideLucideIcons()` if using string names 2. Verify the icon is imported from `@lucide/angular` and not the legacy package ### TypeScript errors? Make sure you're importing from `@lucide/angular` and not `lucide-angular`. ### Icons render with wrong defaults Ensure `provideLucideConfig()` is used at the right level. ## Migration guide Migrating from `lucide-angular`? Read our [comprehensive migration guide](https://github.com/lucide-icons/lucide/blob/main/packages/angular/MIGRATION.md). --- --- url: /guide/accessibility.md description: >- Learn how to make your icons accessible to all users, including those with disabilities. --- # Accessibility in depth Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information. However, not everyone can understand them easily. When using icons it is very important to consider the following aspects of accessibility. ::: info By default, we hide icons from screen readers using `aria-hidden="true"`. You can make them accessible yourself by following the guidelines below. ::: ## Provide visible labels Icons are a helpful tool to improve perception, but they aren't a replacement for text. In most cases, it is probably a good idea to also provide a textual representation of your icon's function. ## Contrast Ensure there's enough contrast between the icon and its background so that it's visible to people with low vision or color vision deficiencies. We recommend following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). ## Use of color Avoid relying solely on color to convey meaning in icons, as some users may have color blindness. Instead, use additional visual cues like shape, shading or text. ## Interactivity Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when activated. In most cases this is easily done by wrapping them in icon buttons. ## Minimum target size Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it should have a minimum target size of 44×44 pixels. In practice, this doesn't necessarily mean that the icon itself should be this large, only its interactive wrapper element. ## Meaningfulness Icons should represent concepts or actions in a universally understandable way. Avoid using abstract or ambiguous, or culture-specific symbols that might confuse some users. ## Consistency Maintain consistency in icon design and usage across your interface to help users learn and understand their meanings more easily. ## Text Alternatives You may have to provide text labels or alternative text descriptions for icons, especially for screen readers used by people with visual impairments. However: descriptions should only be provided to standalone icons that aren't purely decorative, as providing accessible names to non-functional elements only increases clutter when using screen readers. ### On standalone icons Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper element. In most cases they will be part of a badge, button (including icon buttons), navigation item or other interactive UI element. ::: warning In case some of your icons stand alone, and they serve a non-decorative function, make sure to provide the appropriate accessible label for them. ::: In general try to avoid using functional icons with no interactivity, we recommend that: 1. you either add a visible description next to them, or 2. place them in badges, labels or on buttons, and at least add a tooltip to them. In any such case, it is preferred that the accessible name be provided for these interactive elements (badges, buttons, nav items etc.) only, *not* the icons themselves. ### On buttons Do not provide an accessible label to icons when used on a button, as this label will be read out by screen readers, leading to nonsensical text. \ Do omit aria-label on decorative icons. ::: details Code examples ```tsx // Don't do this // Do this, just leave it ``` ::: ### On icon buttons Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of the close button of a dialog for example). As previously stated, you should provide your accessible label on the icon button itself, not the contained icon. ::: details Code examples ```tsx // Don't do this // Don't do this either // This works but might not be the best solution, see below // Do this instead ``` ::: ## A note on `aria-label` Although you could provide accessible labels to your elements via the `aria-label` attribute, we generally recommend avoiding this and instead suggest that you use your chosen CSS framework's " visually hidden" utility whenever possible. You can [read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/). ### Example - Radix UI Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon). ```tsx import { ArrowRightIcon } from 'lucide-react'; import { AccessibleIcon } from '@radix-ui/react-accessible-icon'; ``` ### Example - Bootstrap ```html
``` ### Example - Tailwind CSS ```html
Phone number
``` If you're not sure, you may consider learning more about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/) ## Further resources We also recommend checking out the following resources about accessibility: * [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) * [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) * [Learn accessibility on web.dev](https://web.dev/learn/accessibility) * [Inclusive Components](https://inclusive-components.design/) * [A11yTalks](https://www.a11ytalks.com/) * [A11y automation tracker](https://a11y-automation.dev/) * [The A11Y Project](https://www.a11yproject.com/) --- --- url: /guide/angular/advanced/accessibility.md description: Best practices for accessible icons in your Angular 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 Angular. ## Making an Icon Accessible To expose an icon to assistive technologies, provide an accessible name by binding the `title` input of the icon component. This removes the `aria-hidden` attribute and makes the icon visible to screen readers. ```angular-html ``` 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. ```angular-html ``` This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it. --- --- 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/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/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/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/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/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/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: /contribute/affinity-designer-guide.md --- # Affinity Designer Template Guide This guide describes how to use the Affinity Designer template for Lucide. ## General Workflow > Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open `Preferences > User Interface`. Under `Decimal Places for Unit Types`, uncheck `Show Lines in points`. 1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate). 2. Follow the [Icon Design Principles](icon-design-guide.md) while you use the template (to ensure integrity with the Lucide icon pack). 3. Export the file as SVG (`File > Export`). Make sure that *Rastering* is set to *Nothing*, *Export text as curves* is checked (hopefully, you won't need this), *Use hex colors* is checked, and *Flatten transforms* is checked. ![SVG export options in Affinity Designer](../images/affinity-designer-export-options.png?raw=true) 4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`). --- --- 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/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-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/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/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/angular/basics/color.md description: >- Learn how to adjust the color of icons in your Angular application using the `color` input 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` input The color can be adjusted by binding the `color` input of the element. ::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"} ```ts /src/app/app.component.ts [active] import { Component, ViewEncapsulation } from "@angular/core"; import { LucideSmile } from "@lucide/angular"; @Component({ selector: 'app', imports: [LucideSmile], template: ``, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class 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=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"} ```ts /src/app/app.component.ts [active] import { Component, ViewEncapsulation } from "@angular/core"; import { LucideThumbsUp } from "@lucide/angular"; @Component({ selector: 'app', imports: [LucideThumbsUp], template: ` `, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class App { } ``` ::: --- --- 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/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/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 ); } export default LikeButton; ``` ```jsx App.js [hidden] import Button from "./Button"; export default function App() { return ); } export default LikeButton; ``` ```tsx ./App.tsx import Button from "./Button"; export default function App() { return ::: ``` --- --- 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/static/font/color.md description: >- Learn how to customize the color of Lucide icons in your static projects using CSS. This guide covers how to change icon colors with CSS classes and inline styles for web font implementations. --- # Color the font Styling the Lucide icon font with CSS is straightforward. You can change the color of the icons using the `color` property in your CSS. This allows you to easily customize the appearance of the icons to match your design. ## Changing Icon Color To change the color of the icons, simply apply the `color` property to the element that contains the icon. For example, if you want to change the color of an icon to red, you can use the following CSS: ```css .icon-house { color: red; } ``` This will change the color of the icon with the class `icon-house` to red. You can use any valid CSS color value, such as hex codes, RGB, or named colors. ## Inheriting Color from Parent Elements By default, the icons will inherit the color from their parent elements. This means that if you set a color on a parent element, all child icons will automatically take on that color unless you override it with a specific color for the icon. The same as text elements in HTML, the icon font will use the `color` property to determine its color, allowing for easy styling and consistency across your project. --- --- url: /guide/angular/advanced/combining-icons.md description: >- Learn how to combine multiple icons into a single icon nested SVG elements in your Angular application. --- # Combining icons You can combine multiple icons into a single icon by using SVG in SVG. This is useful for if you want to be creative and make your own custom icons by combining existing icons. ::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"} ```ts /src/app/app.component.ts [active] import { Component, ViewEncapsulation } from "@angular/core"; import { LucideScan, LucideUser } from "@lucide/angular"; @Component({ selector: 'app', imports: [LucideScan, LucideUser], template: ` `, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class App { } ``` ::: This is valid SVG 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 custom SVG elements You can also use SVG elements to create your own icons. ### Example with notification badge For example, you can add a notification badge to an icon by using the `circle` SVG element. ::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"} ```ts /src/app/app.component.ts [active] import { Component, ViewEncapsulation, signal } from "@angular/core"; import { LucideMail } from "@lucide/angular"; @Component({ selector: 'app', imports: [LucideMail], template: ` @if (hasUnreadMessages()) { } `, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class App { protected readonly hasUnreadMessages = signal(true); } ``` ::: ### Example with text element You can also use the `text` SVG element to add text to your icon. ::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"} ```ts /src/app/app.component.ts [active] import { Component, ViewEncapsulation } from "@angular/core"; import { LucideFile } from "@lucide/angular"; @Component({ selector: 'app', imports: [LucideFile], template: ` JS `, styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class App { } ``` ::: --- --- 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/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-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/solid/advanced/combining-icons.md description: >- Learn how to combine multiple icons into a single icon nested SVG elements in your Solid 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-solid showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-solid"} ```tsx App.tsx [active] import Scan from 'lucide-solid/icons/scan'; import User from 'lucide-solid/icons/user'; 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=vite-solid showTabs=false editorHeight=580 editorWidthPercentage=60 dependencies="lucide-solid"} ```tsx App.tsx [active] import Mail from 'lucide-solid/icons/mail'; 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=vite-solid showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="lucide-solid"} ```tsx App.tsx [active] import File from 'lucide-solid/icons/file'; function App() { return (
JS
); } export default App; ``` ::: --- --- 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/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] ``` ::: --- --- url: /community.md --- # Community Guide Welcome to the Lucide community! This guide provides information on how to get involved, contribute, and connect with other members of the Lucide community. ## Code of Conduct Please read and adhere to our [Code of Conduct](/code-of-conduct.md) to ensure a welcoming and inclusive environment for all community members. ## Connecting with the Community There are several ways to get involved with the Lucide community: * **Join the Discord Server**: Connect with other Lucide users, ask questions, and share your projects on our [Discord server](https://discord.gg/EH6nSts). * **Follow us on X**: Stay updated with the latest news and updates by following us on [X](https://x.com/lucide_icons). * **Join discussions on GitHub**: Participate in discussions, provide feedback, and help others on our [GitHub Discussions page](https://github.com/lucide-icons/lucide/discussions). ## Getting Involved * **Contribute to the Project**: Check out our [contribution guidelines](./contribute/index.md) to learn how you can contribute to the Lucide project. * **Report Issues**: If you encounter any bugs or have feature requests, please report them on our [GitHub Issues page](https://github.com/lucide-icons/lucide/issues). ## What you can do There are many ways to contribute to the Lucide community. ### Help other people Contribution in form of code or new icons is always welcome, but you can also help by answering questions from other community members on Discord or GitHub Discussions. ### Design New Icons If you have design skills, consider contributing new icons to the Lucide library. Check out our [icon design guide](/contribute/icon-design-guide.md) for tips and guidelines on creating icons that fit the Lucide style. ### Contribute Code If you're a developer, you can contribute code to the Lucide project. Whether it's fixing bugs, adding new features, or improving documentation, your contributions are valuable. Check out our [contribution guidelines](/contribute/index.md) for more information. ### Triage Issues You can help by reviewing and triaging issues on our GitHub repository. This includes confirming bugs, providing additional information, and helping to prioritize issues for the maintainers. ### Improve Documentation Lucide's documentation is open for contributions. If you find any areas that could be improved or if you have ideas for new guides or tutorials, feel free to submit a pull request. The documentation can be found in the [repository](https://github.com/lucide-icons/lucide/tree/main/docs) ### Share your experiences Share your experiences using Lucide in your projects. Write blog posts, create tutorials, or share your projects on social media to help others discover and learn about Lucide. --- --- url: /guide/comparison.md description: >- A comparison between Lucide and Feather Icons, highlighting the differences and benefits of each. --- # Comparison ## Lucide vs Feather Icons Lucide is a community-driven fork of [Feather Icons](https://github.com/feathericons/feather). The decision to create Lucide arose from growing dissatisfaction with the moderation of the Feather Icons project. With more than 300 open issues and over 100 open PRs, the Feather Icons project has been abandoned and is no longer actively maintained. Unfortunately, this means that numerous developers and designers have invested their time in contributing to Feather Icons without the possibility of their PRs being accepted. In an effort to expand the icon set while remaining true to the original minimalist design language, Lucide is driven by a community of developers and designers. We strive to grow together and maintain a faithful continuation of the project. ### Why should I choose Lucide over Feather Icons? * Lucide has expanded its icon set by 500+ in the last few years. Lucide now has over 1000 icons, while Feather has around 287 icons. * Well maintained code base. * Active community. ### Should I migrate to Lucide? That depends on whether you're satisfied with the icons from Feather Icons. If that is the case, it may not be worth the effort. However, if you find yourself struggling and feeling limited by the icons provided by Feather, you can consider migrating. When we forked, we didn't remove any icons, but some icons have been renamed. --- --- 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 `