A third-party Blazor component library for Heroicons.
Get Started
$ dotnet add package Blazor.HeroiconsReadme
Blazor.Heroicons
A third-party Blazor component library for Heroicons — beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
Live Demo — Browse and preview all available icons
📦 Installation
dotnet add package Blazor.Heroicons
Supports .NET 8.0, .NET 9.0, and .NET 10.0.
🎨 Icon Styles
Each icon is available in four styles:
| Style | Namespace | Size | Best for |
|---|---|---|---|
| Outline | Blazor.Heroicons.Outline | 24x24, 1.5px stroke | Primary navigation and marketing sections |
| Solid | Blazor.Heroicons.Solid | 24x24, filled | Primary navigation and marketing sections |
| Mini | Blazor.Heroicons.Mini | 20x20, filled | Smaller elements like buttons and form inputs |
| Micro | Blazor.Heroicons.Micro | 16x16, filled | Tight, high-density UIs |
Browse the full list of icons on the demo site →
🚀 Usage
Individual icon components
Each icon is available as a standalone Blazor component. Import the namespace for the style you want and use the icon directly:
@using Blazor.Heroicons.Outline
<BeakerIcon class="size-6 text-blue-500" />
All standard HTML attributes (class, id, style, etc.) are passed through to the underlying SVG element. Icons use currentColor for fill/stroke, so they can be styled with CSS or utility classes like Tailwind CSS.
Dynamic icon by name (<Heroicon />)
Reference any icon by name and style using the Heroicon component:
@using Blazor.Heroicons
<Heroicon Name="@HeroiconName.Sparkles" Type="HeroiconType.Outline" class="size-6 text-yellow-600" />
| Parameter | Type | Default | Description |
|---|---|---|---|
Name | string | HeroiconName.Sparkles | Icon name — supports multiple formats (see below) |
Type | HeroiconType | HeroiconType.Outline | Icon style to render |
The Name parameter is flexible and accepts several formats:
"HandThumbUp"or"HandThumbUpIcon""hand-thumb-up"(hyphenated)"handthumbup"(case-insensitive)
Use the HeroiconName static class for IntelliSense support (e.g. HeroiconName.AcademicCap).
Random icon (<RandomHeroicon />)
Render a random icon from a given style:
@using Blazor.Heroicons
<RandomHeroicon Type="HeroiconType.Mini" class="size-6 text-green-700" />
| Parameter | Type | Default | Description |
|---|---|---|---|
Type | HeroiconType | HeroiconType.Outline | Icon style to choose from |
🔗 Links
📄 License
This library is MIT licensed.