Hugeicons with Angular Overview

Hugeicons gives you a flexible icon system for Angular, from a free starter pack to the full 40,000+ icon Pro library.
The @hugeicons/angular package exposes a HugeiconsIconComponent that can render any icon you import from our packages.

Use this overview page as the entry point into all Angular-related docs.

Prerequisites

Before using Hugeicons with Angular, you should have:

An Angular app (Angular CLI, standalone components, etc.)
Node.js and a package manager (npm, pnpm, or Yarn)
Basic familiarity with Angular components and templates

Free vs Pro at a glance

	Free	Pro
Icon library	4,000+ free icons in 1 style (Stroke Rounded only)	40,000+ icons across 9 styles
Packages	`@hugeicons/angular`, `@hugeicons/core-free-icons`	`@hugeicons/angular`, `@hugeicons-pro/core-*`
Registry	Public npm registry	Private Hugeicons registry (`https://npm.hugeicons.com/`)
Best for	Trying Hugeicons, simple projects, or commercial projects that only need Stroke Rounded icons	Full access for personal and commercial projects with all 9 styles and 40K icons
Setup guide	Quick Start (Free)	Hugeicons Pro with Angular

Choose your path

Just getting started and want free icons?
Go to Quick Start (Free) to install @hugeicons/angular and @hugeicons/core-free-icons, and render your first icon.
Already a Pro customer or need more styles?
Go to Hugeicons Pro with Angular to authenticate with our private registry, install Pro icon packages, and use them in your app.
Need the full API for HugeiconsIconComponent?
Go to HugeiconsIcon Wrapper for the inputs table, styling options, accessibility guidance, and performance tips.
Optimizing how you use icons across your app?
Go to Best Practices with Angular for patterns around imports, theming, accessibility, and component composition.
Looking for ready-made patterns and snippets?
Go to Examples with Angular for copy-paste examples like search bars, theme toggles, and navigation bars that showcase dynamic icon behavior.

Examples with Vue Quick Start (Free)