Ng Icons

The all-in-one icon library for Angular. This allows you to use icons from multiple icon sets with a single icon component. Containing over 32,900 icons for you to use in your projects.

Currently, we support the following libraries:

• Bootstrap Icons
• Heroicons
• Ionicons
• Material Icons
• Material File Icons
• CSS.gg
• Feather Icons
• Jam Icons
• Octicons
• Radix UI Icons
• Tabler Icons
• Akar Icons
• Iconoir
• Cryptocurrency Icons
• Simple Icons
• Typicons
• Dripicons
• UX Aspects
• Circum Icons
• Remix Icon
• Font Awesome

Got suggestions for additional iconsets? Create an issue and we can consider adding them!

Supported Versions

Note: Ng Icons relies on modern browser features and is designed to work on evergreen browsers. We do not support older browsers such as IE11.

Installation

You must install the @ng-icons/core package, however you only need to install the iconset libraries you intend to use.

E.g:

npm i @ng-icons/core @ng-icons/heroicons ...

or

yarn add @ng-icons/core @ng-icons/heroicons ...

Packages

The following packages are available:

Usage

Import the NgIconsModule and register the icons you wish to use:

import { NgIconsModule } from '@ng-icons/core';
import { featherAirplay } from '@ng-icons/feather-icons';
import { heroUsers } from '@ng-icons/heroicons/outline';

@NgModule({
  imports: [
    BrowserModule,
    NgIconsModule.withIcons({ featherAirplay, heroUsers }),
  ],
})
export class AppModule {}

You can register icons in multiple modules, this allows icons to be lazy loaded in child modules.

You can then use the icon in your templates:

<ng-icon name="featherAirplay"></ng-icon>

Standalone Components

As of version 18.0.0 Ng Icons nows supports standalone components. You can import icons using the provideIcons function which can be placed anywhere you can register providers. The optimal location would be in the @Component providers array.

You can also import the component directly by importing NgIconComponent or the NG_ICON_DIRECTIVES constant.

import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { featherAirplay } from '@ng-icons/feather-icons';
import { heroUsers } from '@ng-icons/heroicons/outline';

@Component({
  standalone: true,
  imports: [NgIconComponent],
  providers: [provideIcons({ featherAirplay, heroUsers })],
})
export class AppComponent {}

Global Configuration

You can configure the default size of icons by providing a NgIconsConfig object to the provideNgIconsConfig:

NgModule

import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core';
import { featherAirplay } from '@ng-icons/feather-icons';

@NgModule({
  imports: [
    BrowserModule,
    NgIconsModule.withIcons({ featherAirplay, heroUsers }),
  ],
  providers: [
    provideNgIconsConfig({
      size: '1.5em',
      color: 'red',
    }),
  ],
})
export class AppModule {}

Standalone

import {
  NgIconComponent,
  provideIcons,
  provideNgIconsConfig,
} from '@ng-icons/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgIconsConfig({
      size: '1.5em',
    }),
  ],
});

Dynamically Loading Icons

The most common way to load icons is simply by registering them individually, however you may want to load icons lazily from a URL, or generate an SVG programatically on the fly. This can be achived using an icon loader. Icon loaders are a function that receives the name of the requested icon, and can return an Observable<string>, Promise<string> or a string containing the SVG to render. Within this function you can do whatever you need to retrieve an icon.

The function is also run within the injection context, this allows you to inject dependencies as you need such as the HttpClient.

bootstrapApplication(AppComponent, {
  providers: [
    provideNgIconLoader(name => {
      const http = inject(HttpClient);
      return http.get(`/assets/icons/${name}.svg`);
    }),
  ],
});

Additionally add caching to your loader to prevent multiple requests for the same icon.

bootstrapApplication(AppComponent, {
  providers: [
    provideNgIconLoader(name => {...}, withCaching()),
  ],
});