TypeScript icon, indicating that this package has built-in type declarations

0.279.0 • Public • Published

Lucide Angular

Implementation of the lucide icon library for angular applications.

What is lucide? Read it here.


yarn add lucide-angular


npm install 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, Home, Menu, UserCheck } from 'lucide-angular';

  imports: [
    LucideAngularModule.pick({File, Home, Menu, UserCheck})
export class AppModule { }

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="home" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>


You can pass additional props to adjust the icon appearance.

name type default
size number 24
color string currentColor
strokeWidth number 2
absoluteStrokeWidth boolean true
<i-lucide name="home" [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: {
    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};

  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

⚠️ 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';



Package Sidebar



DownloadsWeekly Downloads






Unpacked Size

17.2 MB

Total Files


Last publish


  • ericfennis