DocumentationUsageSize, colour and stroke

Size, colour and stroke

Icons inherit the current font size and text colour by default, so most of the time you do not need to set anything at all.

<ng-icon name="heroUsers" size="2rem" color="var(--brand)" /> <ng-icon name="featherAirplay" strokeWidth="1.5" />

Setting defaults globally

provideNgIconsConfig sets the defaults used by every icon in the application. Add it where you bootstrap, usually main.ts:

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

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

strokeWidth only has an effect on icon sets drawn with strokes, such as Feather or Lucide. It does nothing on filled sets.

Colouring with CSS classes

Setting color on the icon, or on anything above it, is enough for most cases. If you use Tailwind, colour icons with text-* utilities, which needs ng-icons' cascade layer declared ahead of Tailwind's. See Tailwind CSS.

Registering icons

Tailwind CSS