ng-icons
A comprehensive icon library for Angular that unifies over 100,000 icons from multiple popular icon sets into a single component.
What is ng-icons?
Ng Icons is an all-in-one icon library specifically designed for Angular applications. It provides a unified component to seamlessly integrate icons from over 30 popular icon sets, including Heroicons, Material Icons, and Feather Icons, eliminating the need to manage multiple separate icon libraries. It offers access to more than 100,000 icons through a consistent, performant API that works with Angular's module and standalone architectures.
Angular developers building applications that require a diverse set of icons from multiple icon libraries without managing separate dependencies. It is particularly useful for teams needing a unified, maintainable icon system across large Angular projects.
Developers choose Ng Icons because it consolidates access to over 30 icon sets into a single, Angular-optimized component, reducing bundle size and complexity compared to importing individual icon libraries. Its seamless integration with Angular's standalone components and support for dynamic loading, global configuration, and experimental features like icon stacking provide flexibility and performance advantages.
Overview
The ultimate icon library for Angular
Use Cases
Best For
- Angular applications requiring icons from multiple icon sets without managing separate dependencies.
- Teams building Angular design systems that need a consistent, configurable icon component across modules.
- Angular projects using standalone components that need icon support with provider-based registration.
- Applications needing dynamic icon loading from URLs or custom SVG generation via icon loaders.
- Projects with strict Content Security Policy (CSP) requirements that need configured icon rendering.
- Developers wanting to use experimental features like icon stacking or variable icon fonts (e.g., Material Symbols) in Angular.
Not Ideal For
- Applications that rely exclusively on a single, well-supported icon library like Material Icons or Font Awesome without needing others
- Projects with stringent bundle size constraints where every kilobyte counts, and a lighter single-set solution suffices
- Teams not using Angular or planning to migrate away from Angular in the near future
- Production applications dependent on experimental features like variable fonts, due to potential breaking changes without version guarantees
Pros & Cons
Pros
Provides a single <ng-icon> component to access over 100,000 icons from 30+ sets, simplifying code and reducing dependency management across Angular projects.
Designed specifically for Angular, with full support for both module-based and standalone components via the provideIcons function, aligning with modern Angular practices.
Enables lazy loading of icons from URLs or custom SVG generation using icon loaders, allowing performance optimizations and on-demand fetching for large applications.
Allows setting default size, color, and CSP policies globally with provideNgIconsConfig, ensuring consistent styling and security compliance without repetitive code.
Cons
Requires installing individual icon set packages alongside core, which can be tedious and increase setup complexity for teams using multiple sets, as noted in the installation steps.
Features like icon stacking and variable fonts are marked experimental, with no versioning guarantees, posing risks for production use due to potential breaking changes.
Relies on modern browser features and explicitly does not support older browsers like IE11, which could exclude legacy projects or specific enterprise environments.
Frequently Asked Questions
Related Projects
lucideBeautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
angular-fontawesomeOfficial Angular component for Font Awesome 5+
@ngneat/svg-icon👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
angular-svg-iconAngular component and service for inlining SVGs allowing them to be easily styled with CSS.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.