Skip to main content
Over 1,400 icons from Lucide, integrated through @ng-icons/lucide for consistent, scalable iconography.

​
Installation

pnpm add @ng-icons/core @ng-icons/lucide

​
Usage

Import icons individually for optimal tree-shaking: 
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSettings, lucideUser, lucideHome } from '@ng-icons/lucide';

@Component({
  imports: [NgIcon],
  providers: [provideIcons({ lucideSettings, lucideUser, lucideHome })],
  template: `<ng-icon name="lucideSettings" size="sm" />`,
})
export class MyComponent {}

​
With Spartan UI

Add the hlm directive for consistent styling: 
<ng-icon hlm name="lucideSettings" size="sm" class="text-muted-foreground" />

​
Sizes

SizeValueUsage
xs12pxInline with small text
sm16pxButtons, form inputs
md20pxDefault size
lg24pxHeaders, navigation
xl32pxHero sections

​
Common Icons

Navigation

lucideHome, lucideMenu, lucideArrowLeft, lucideChevronDown

Actions

lucidePlus, lucideTrash, lucideEdit, lucideDownload

Status

lucideCheck, lucideX, lucideAlertCircle, lucideInfo

UI

lucideSettings, lucideUser, lucideSearch, lucideBell

​
Resources

Lucide Icons

Browse the complete icon library with search and preview.

ng-icons Docs

Full documentation for Angular integration.