Angular
The @hugeicons/angular
package is freely available on the public npm registry. To use HugeIcons in your Angular project, you'll need to install both the Angular component package and at least one icon package of your choice. This modular approach allows you to keep your bundle size minimal by including only the icons you plan to use.
Installation
- Install the Angular component package:
npm install @hugeicons/angular
- Install your preferred icon package(s):
npm install @hugeicons-pro/core-{variant}-{style}
Available styles:
HugeIcons Pro offers 40,000+ icons across 9 unique styles:
# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded # Chunky style with depth
@hugeicons-pro/core-duotone-rounded # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded # Alternative two-color treatment
For more detailed information about our core packages and available styles, please visit our Core Packages page.
Usage with Standalone Components
HugeIcons Angular supports standalone components, making integration simple and modern. You do not need to import a module or declare HugeIcons in your NgModule. Instead, import the HugeiconsIconComponent
directly in your component's imports
array.
Example Usage
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { HomeIcon, AppleIcon } from '@hugeicons/core-free-icons';
@Component({
selector: 'app-root',
standalone: true,
imports: [HugeiconsIconComponent],
template: `
<div style="padding: 2rem;">
<h1>Hugeicons Angular Example</h1>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<hugeicons-icon
[icon]="HomeIcon"
[size]="130"
color="#007AFF"
/>
<hugeicons-icon
[icon]="AppleIcon"
[size]="130"
color="#FF2D55"
/>
</div>
</div>
`
})
export class AppComponent {
HomeIcon = HomeIcon;
AppleIcon = AppleIcon;
}
Props
Prop | Type | Default | Description |
---|---|---|---|
icon | IconSvgObject | Required | The main icon component imported from an icon package |
altIcon | IconSvgObject | - | Alternative icon component from an icon package for states, interactions, or animations |
showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
size | number | 24 | Icon size in pixels |
color | string | currentColor | Icon color (CSS color value) |
strokeWidth | number | 1.5 | Width of the icon strokes (works with stroke-style icons) |
class | string | - | Additional CSS classes |
Icon Naming
Each icon in our packages can be imported using its main name:
import { HomeIcon, AppleIcon } from '@hugeicons/core-free-icons';
Dynamic Usage
You can bind any icon object to the [icon]
input, and dynamically change it as needed in your component logic.
If you need more advanced icon switching, handle it in your component logic by swapping the icon object passed to [icon]
and using altIcon
/showAlt
as needed.
Examples of Dynamic Icon Interactions
Search Bar with Clear Button
A search input that shows a clear button when text is entered:
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
@Component({
selector: 'app-search',
standalone: true,
imports: [HugeiconsIconComponent],
template: `
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input [(ngModel)]="searchValue" type="text" placeholder="Search..." />
<hugeicons-icon
[icon]="SearchIcon"
[altIcon]="CloseCircleIcon"
[showAlt]="searchValue.length > 0"
(click)="searchValue.length > 0 ? (searchValue = '') : null"
[size]="24"
color="currentColor"
></hugeicons-icon>
</div>
`
})
export class SearchComponent {
SearchIcon = SearchIcon;
CloseCircleIcon = CloseCircleIcon;
searchValue = '';
}
Theme Toggle with Style Switch
A simple dark mode toggle using different icons:
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons';
@Component({
selector: 'app-theme-toggle',
standalone: true,
imports: [HugeiconsIconComponent],
template: `
<button (click)="isDark = !isDark">
<hugeicons-icon
[icon]="SunIcon"
[altIcon]="Moon02Icon"
[showAlt]="isDark"
[size]="24"
color="currentColor"
></hugeicons-icon>
</button>
`
})
export class ThemeToggleComponent {
SunIcon = SunIcon;
Moon02Icon = Moon02Icon;
isDark = false;
}
Navigation Bar with Style Switch
A navigation bar that uses different icon styles to indicate the active state:
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { HomeIcon, SearchIcon, Notification03Icon, UserIcon } from '@hugeicons/core-free-icons';
import { HomeIcon as HomeAlt, SearchIcon as SearchAlt, Notification03Icon as NotificationAlt, UserIcon as UserAlt } from '@hugeicons/core-free-icons';
@Component({
selector: 'app-nav',
standalone: true,
imports: [HugeiconsIconComponent],
template: `
<nav style="display: flex; gap: 1rem;">
<button *ngFor="let item of navItems" (click)="activeTab = item.id" [class.active]="activeTab === item.id">
<hugeicons-icon
[icon]="item.icon"
[altIcon]="item.altIcon"
[showAlt]="activeTab === item.id"
[size]="24"
></hugeicons-icon>
</button>
</nav>
`
})
export class NavComponent {
activeTab = 'home';
navItems = [
{ id: 'home', icon: HomeIcon, altIcon: HomeAlt },
{ id: 'search', icon: SearchIcon, altIcon: SearchAlt },
{ id: 'notifications', icon: Notification03Icon, altIcon: NotificationAlt },
{ id: 'profile', icon: UserIcon, altIcon: UserAlt },
];
}