lucide/docs/guide/packages/lucide-angular.md

Lucide Angular

::: warning This documentation is for our legacy package for Angular.

For our modern, standalone-first implementation, please refer to @lucide/angular. :::

Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.

What you can accomplish:

• Use icons as Angular components with full dependency injection support
• Configure icons globally through Angular services and providers
• Choose from multiple component selectors (lucide-angular, lucide-icon, i-lucide, span-lucide)
• Integrate with Angular's reactive forms and data binding
• Build scalable applications with tree-shaken icon bundles and lazy loading support

Installation

::: code-group

pnpm add lucide-angular

yarn add lucide-angular

npm install lucide-angular

bun add lucide-angular

:::

How to use

Step 1: Import LucideAngularModule

In any Angular module you wish to use Lucide icons in, you have to import LucideAngularModule, and pick any icons you wish to use:

import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';

@NgModule({
  imports: [
    LucideAngularModule.pick({File, House, Menu, UserCheck})
  ]
})
export class AppModule { }

or using standalone version:

import { Component } from '@angular/core';
import { LucideAngularModule, FileIcon } from 'lucide-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [LucideAngularModule]
})
export class AppComponent {
  readonly FileIcon = FileIcon;
}

Step 2: Use the icons in templates

Within your templates you may now use one of the following component tags to insert an icon:

<lucide-angular name="file" class="my-icon"></lucide-angular>
<lucide-icon name="house" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>

for standalone

<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
<lucide-icon [img]="FileIcon" class="my-icon"></lucide-icon>
<i-lucide [img]="FileIcon" class="my-icon"></i-lucide>
<span-lucide [img]="FileIcon" class="my-icon"></span-lucide>

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

<i-lucide name="house" [size]="48" color="red" [strokeWidth]="1"></i-lucide>

Global configuration

You can inject the LucideIconConfig service in your root component to globally configure the default property values as defined above.

Styling using a custom CSS class

Any extra HTML attribute is ignored, but the class attribute is passed onto the internal SVG image element and it can be used to style it:

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

Injecting multiple icon providers

You may provide additional icons using the LUCIDE_ICONS injection token, which accepts multiple providers of the interface LucideIconsProviderInterface with the utility class LucideIconsProvider available for easier usage:

import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
import { MyIcon } from './icons/my-icon';

const myIcons = {MyIcon};

@NgModule({
  providers: [
    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
  ]
})
export class AppModule { }

To add custom icons, you will first need to convert them to an svgson format.

Loading all icons

::: danger You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size. :::

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

With Lucide Lab or custom icons

Lucide Lab is a collection of icons that are not part of the Lucide main library. They can be used in the same way as the official icons.

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

@NgModule({
  imports: [
    LucideAngularModule.pick({ coconut })
  ]
})
export class AppModule { }

Accessibility

By default, we hide icons from screen readers using aria-hidden="true".

You can add accessibility attributes using aria-labels.

<lucide-icon name="check" aria-label="Task completed"></lucide-icon>

For best practices on accessibility, please see our accessibility guide.