Free Icons for Angular — 47,000+ Icons Ready to Use

Browse and export 47,000+ icons optimized for Angular projects. Get Angular component code, raw SVG, or download as PNG/WebP. Copy-paste ready.

How to Use Icons in Angular Without Installing Packages

Angular projects typically use @angular/material icons or angular-fontawesome, both requiring module imports, configuration, and Angular-specific setup. For teams that just need a few icons without adding another Angular module, IconFontToPNG lets you copy raw SVG and use it with Angular's DomSanitizer or as an inline template. No additional packages or NgModule declarations needed.

Why Get Angular Icons Here?

  • No NgModule or standalone component registration for the icon package
  • Skip @angular/material icon module setup if you only need a few icons
  • Works with Angular 17+ standalone components — paste SVG in template
  • No DomSanitizer needed when using inline SVG in templates
  • Useful for Angular micro-frontends that can't add shared dependencies

Angular Icon Code Example

What you get when you copy an icon from IconFontToPNG:

// arrow-right.component.ts
@Component({
  selector: 'icon-arrow-right',
  standalone: true,
  template: `
    <svg width="24" height="24" fill="#52c41a" viewBox="0 0 512 512">
      <path d="M502.6 278.6c12.5-12.5..."/>
    </svg>
  `
})
export class IconArrowRightComponent {}

Best Icon Libraries for Angular

For Angular, @angular/material provides Material Design icons with full framework integration. angular-fontawesome wraps Font Awesome. For other libraries, use SVG sprites or raw SVG. Angular's strict module system makes standalone SVG components a lighter alternative when you don't want to import an icon module.

LibraryIconsAngular PackageTree-shakeable
Lucide~1,500lucide-react / lucide-vue-nextYes
Heroicons~450@heroicons/react / @heroicons/vueYes
Phosphor~7,500@phosphor-icons/react / vueYes
Font Awesome~2,000@fortawesome/react-fontawesomeYes
Bootstrap Icons~2,000react-bootstrap-iconsYes
Tabler~5,000@tabler/icons-react / vueYes
Ionicons~1,300@ionic/react (built-in)Partial
Remix Icon~2,800remixicon-reactYes

Frequently Asked Questions

Do I need DomSanitizer to use SVG icons in Angular?
Only if you're binding SVG HTML via [innerHTML]. If you paste SVG directly in the component template, Angular renders it safely — no sanitizer needed.
@angular/material icons vs standalone SVG — which for Angular?
@angular/material if you're already using Material throughout your app. Standalone SVG if you only need a few icons and don't want to import MatIconModule.
How to create an Angular icon component from copied SVG?
Create a standalone component with the SVG in its template. Add @Input() for size and color if needed. Use it as <icon-arrow-right /> anywhere.
Are these icons free for commercial Angular apps?
Yes. All 47,000+ icons come from open-source libraries (MIT, Apache 2.0, ISC, CC0, CC BY 4.0). Free for commercial use.
Do I need to install anything?
No. IconFontToPNG runs in your browser. Search, click, copy the code. No npm packages, no build config.

Related Tools

Icons for Other Frameworks