Hugeicons Angular Component Library https://hugeicons.com
npm install @hugeicons/angular> Hugeicons Angular rendering library for fast, customizable icons with TypeScript and tree-shaking support
Hugeicons is a large icon set for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded icons. The Pro package provides 46,000+ icons across 10 styles.
This package (@hugeicons/angular) is a rendering library - it provides the HugeiconsIconComponent that displays icons in your Angular app. The icons themselves come from separate icon packages:
- Free icons: @hugeicons/core-free-icons (4,600+ icons)
- Pro icons: @hugeicons-pro/core-* packages (46,000+ icons, requires license)
> Looking for Pro Icons? Check out our docs at hugeicons.com/docs for detailed information about pro icons, styles, and advanced usage.
- Customizable colors, sizes, and stroke width
- TypeScript support with full type definitions
- Tree shakeable for optimal bundle size
- Standalone component (Angular 17.1+)
- Signal-based inputs for optimal performance
- Alternate icon support for dynamic interactions
``bashUsing npm
npm install @hugeicons/angular @hugeicons/core-free-icons
Usage
The
is a standalone component. Import it directly in your component:`typescript
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { SearchIcon } from '@hugeicons/core-free-icons';@Component({
selector: 'app-example',
standalone: true,
imports: [HugeiconsIconComponent],
template:
})
export class ExampleComponent {
SearchIcon = SearchIcon;
}
$3
If you're using NgModules, import the component in your module:
typescript
import { NgModule } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';@NgModule({
imports: [HugeiconsIconComponent],
// ...
})
export class AppModule { }
`Inputs
| Input | Type | Default | Description |
|-------|------|---------|-------------|
|
| IconSvgObject | Required | The main icon to display |
| altIcon | IconSvgObject | - | Alternative icon for states, interactions, or dynamic icon swapping |
| showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
| size | number \| string | 24 | Icon size in pixels |
| color | string | currentColor | Icon color (CSS color value) |
| strokeWidth | number | - | Width of the icon strokes |
| absoluteStrokeWidth | boolean | false | When true, the stroke width will be scaled relative to the icon size |
| class | string | - | CSS classes to apply to the icon |Examples
$3
`typescript
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { Video01Icon } from '@hugeicons/core-free-icons';@Component({
selector: 'app-basic',
standalone: true,
imports: [HugeiconsIconComponent],
template:
})
export class BasicComponent {
Video01Icon = Video01Icon;
}
$3
typescript
import { Component } from '@angular/core';
import { HugeiconsIconComponent } from '@hugeicons/angular';
import { Notification02Icon } from '@hugeicons/core-free-icons';@Component({
selector: 'app-custom',
standalone: true,
imports: [HugeiconsIconComponent],
template:
})
export class CustomComponent {
Notification02Icon = Notification02Icon;
}
$3
- Examples: https://hugeicons.com/docs/integrations/angular/examples
- Best practices: https://hugeicons.com/docs/integrations/angular/best-practices
Performance
- Tree-shaking: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
- Optimized SVGs: All icons are optimized for size and performance
- Code Splitting: Icons can be easily code-split when using dynamic imports
- OnPush Change Detection: Uses ChangeDetectionStrategy.OnPush for optimal performance
Troubleshooting
$3
1. Icons not showing up?
- Make sure you've installed both
and @hugeicons/core-free-icons
- Check that is imported in your component or module
- Verify that icon names are correctly imported2. TypeScript errors?
- Ensure your
tsconfig.json includes the necessary type definitions
- Check that you're using Angular 17.1+ for signal inputs support3. Bundle size concerns?
- Use named imports instead of importing the entire icon set
- Implement code splitting for different sections of your app
Browser Support
The library supports all modern browsers.
Related Packages
- @hugeicons/react - React component
- @hugeicons/vue - Vue component
- @hugeicons/svelte - Svelte component
- @hugeicons/react-native - React Native component
Pro Version
> Want access to 46,000+ icons and 10 unique styles?
> Check out our Pro Version and visit our docs for detailed documentation.
$3
- Stroke Styles
- Stroke Rounded (@hugeicons-pro/core-stroke-rounded)
- Stroke Sharp (@hugeicons-pro/core-stroke-sharp)
- Stroke Standard (@hugeicons-pro/core-stroke-standard)
- Solid Styles
- Solid Rounded (@hugeicons-pro/core-solid-rounded)
- Solid Sharp (@hugeicons-pro/core-solid-sharp)
- Solid Standard (@hugeicons-pro/core-solid-standard)
- Special Styles
- Bulk Rounded (@hugeicons-pro/core-bulk-rounded)
- Duotone Rounded (@hugeicons-pro/core-duotone-rounded)
- Duotone Standard (@hugeicons-pro/core-duotone-standard)
- Twotone Rounded (@hugeicons-pro/core-twotone-rounded)License
The code in this package (
@hugeicons/angular) is licensed under the MIT License.This package only provides rendering utilities. It does not include or grant any rights to Hugeicons icon assets. Using Pro icon styles requires a valid Hugeicons Pro license.
Hugeicons icon packs are licensed separately:
- Free icon packs: use the license included with the specific free icon package you install.
- Pro icon packs (
@hugeicons-pro/*`): require a paid Hugeicons Pro license and are governed by the Hugeicons Pro Terms (see Pro License.).- Changelog - Version history and release notes
- @hugeicons/core-free-icons - Free icon package
- Hugeicons Website - Browse all available icons