🚀 ngx-heroicons

A modern, type-safe, and accessible Angular icon library powered by Heroicons.

Supports all official variants:

• outline (24x24)
• solid (24x24)
• mini (20x20)
• micro (16x16)

Built with Angular 16+ standalone components, signals, and inline SVG rendering — no fetches, no extra asset configuration.

📦 Installation

npm install ngx-heroicons

🚀 Quick Usage

1. Import the component

import { NgxHeroiconsComponent } from "ngx-heroicons";

@Component({
  standalone: true,
  imports: [NgxHeroiconsComponent],
  template: ` <ngx-heroicons [icon]="'academic-cap'" class="w-6 h-6 text-blue-500" /> `,
})
export class YourComponent {}

2. Choose a style

<ngx-heroicons [icon]="'check-circle'" [style]="'solid'" class="w-6 h-6 text-green-500" />
<ngx-heroicons [icon]="'check-circle'" [style]="'mini'" class="w-5 h-5 text-green-500" />
<ngx-heroicons [icon]="'check-circle'" [style]="'micro'" class="w-4 h-4 text-green-500" />

3. Optional accessibility label

<ngx-heroicons [icon]="'x-circle'" class="w-5 h-5 text-red-500" aria-label="Close icon" />

🧠 Inputs

💡 You can pass Tailwind or custom styles using the native class attribute:

<ngx-heroicons [icon]="'x-circle'" class="w-6 h-6 text-red-500" />

✅ Features

• ✅ Angular 16+ standalone component using signals
• ✅ Fully inline SVGs (no fetch, no asset config)
• ✅ Supports all official Heroicons styles (outline, solid, mini, micro)
• ✅ Forwarded class binding (full Tailwind support)
• ✅ Type-safe IconName input with auto-complete

🔧 Development

Regenerate the icon map (after adding or updating icons)

npm run generate:icons

This will:

• Inline all SVGs into icons.ts
• Auto-generate a union type IconName with all available icon names

📚 Example Icons

<!-- Outline (default) -->
<ngx-heroicons [icon]="'academic-cap'" class="w-6 h-6" />

<!-- Solid -->
<ngx-heroicons [icon]="'check-circle'" [style]="'solid'" class="w-6 h-6" />

<!-- Mini (20x20) -->
<ngx-heroicons [icon]="'check-circle'" [style]="'mini'" class="w-5 h-5" />

<!-- Micro (16x16) -->
<ngx-heroicons [icon]="'check-circle'" [style]="'micro'" class="w-4 h-4" />

<!-- Accessible -->
<ngx-heroicons [icon]="'x-circle'" class="w-6 h-6 text-red-500" aria-label="Close" />

📦 License

MIT
Icon designs © Tailwind Labs
Angular wrapper by Anastasios Theodosiou