hrvbernardic / ng-icons

The ultimate icon library for Angular

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 17000+ icons for you to use in your projects.

Currently, we support the following libraries:

• Bootstrap Icons
• Heroicons
• Ionicons
• Material Icons
• CSS.gg
• Feather Icons
• Jam Icons
• Octicons
• Radix UI Icons
• Tabler Icons
• Akar Icons

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

Supported Versions

Angular Version	Ng Icon Version
11.x.x	12.x.x
12.x.x	13.x.x (or 12.x.x)
13.x.x	13.x.x

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:

Package	License
@ng-icons/core	MIT
@ng-icons/bootstrap-icons	MIT
@ng-icons/heroicons	MIT
@ng-icons/ionicons	MIT
@ng-icons/material-icons	Apache 2.0
@ng-icons/css.gg	MIT
@ng-icons/feather-icons	MIT
@ng-icons/jam-icons	MIT
@ng-icons/octicons	MIT
@ng-icons/radix-icons	MIT
@ng-icons/tabler-icons	MIT
@ng-icons/akar-icons	MIT

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

@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="feather-airplay"></ng-icon>

Name	Type	Description
size	string	Define the size of the icon. This defaults to the current font size.
color	string	Define the color of the icon. This defaults to the current text color.
strokeWidth	string | number	Define the stroke-width of the icon. This only works on iconsets that use strokes.