Integrations
Angular
Quick Start (Free)

Quick Start with Angular (Free)

Get up and running with Hugeicons Free in your Angular app. This guide covers prerequisites, installing the Angular component and free icon package, and rendering your first icon.

Prerequisites

Before you start, make sure you have:

  • Node.js and npm (or Yarn / pnpm) installed
  • An Angular app set up (Angular CLI, standalone components, etc.)
  • Basic familiarity with Angular components and templates

1. Install Packages

First, install the Angular component package:

npm install @hugeicons/angular

Then, install the free icon pack:

npm install @hugeicons/core-free-icons

Our free package, @hugeicons/core-free-icons, includes 4,000+ icons in 1 style (Stroke Rounded only) you can use in any projects at no cost. For more styles, upgrade to Hugeicons Pro.

2. Basic Usage with Standalone Components

Hugeicons Angular supports standalone components, so you can import HugeiconsIconComponent directly into a component’s imports array without touching any NgModule.

import { Component } from '@angular/core'
import { HugeiconsIconComponent } from '@hugeicons/angular'
import { Notification03Icon } from '@hugeicons/core-free-icons'
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HugeiconsIconComponent],
  template: `
    <hugeicons-icon
      [icon]="notificationIcon"
      [size]="24"
      color="currentColor"
      [strokeWidth]="1.5"
    ></hugeicons-icon>
  `,
})
export class AppComponent {
  notificationIcon = Notification03Icon
}

You can adjust the size, color, and strokeWidth inputs to match your design system.

If you are still using NgModules instead of standalone components, declare HugeiconsIconComponent in your module’s declarations (and optionally exports) array and use it in your templates like any other declared component.

3. Next steps

OverviewHugeicons Pro with Angular