Blazor.Heroicons
3.2.1.1
dotnet add package Blazor.Heroicons --version 3.2.1.1
NuGet\Install-Package Blazor.Heroicons -Version 3.2.1.1
<PackageReference Include="Blazor.Heroicons" Version="3.2.1.1" />
<PackageVersion Include="Blazor.Heroicons" Version="3.2.1.1" />
<PackageReference Include="Blazor.Heroicons" />
paket add Blazor.Heroicons --version 3.2.1.1
#r "nuget: Blazor.Heroicons, 3.2.1.1"
#:package Blazor.Heroicons@3.2.1.1
#addin nuget:?package=Blazor.Heroicons&version=3.2.1.1
#tool nuget:?package=Blazor.Heroicons&version=3.2.1.1
![]()
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.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.3)
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.24)
-
net9.0
- Microsoft.AspNetCore.Components.Web (>= 9.0.13)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Blazor.Heroicons:
| Package | Downloads |
|---|---|
|
GANBlazor.UI
Modern, minimal Blazor UI component library with 20+ components (Button, Form, Card, Alert, Badge, Modal, Switch, Spinner, Tabs, Toast, Tooltip, Avatar) inspired by shadcn/ui. Requires Tailwind CSS in the consuming app. |
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 3.2.1.1 | 1,724 | 3/1/2026 |
| 3.2.1 | 114 | 3/1/2026 |
| 3.2.0 | 113 | 3/1/2026 |
| 3.1.0 | 117 | 2/28/2026 |
| 3.0.0 | 221 | 2/28/2026 |
| 2.2.0 | 16,693 | 11/18/2024 |
| 2.1.5 | 3,754 | 7/10/2024 |
| 2.1.2.3 | 894 | 6/18/2024 |
| 2.1.2.2 | 3,582 | 3/23/2024 |
| 2.1.2.1 | 246 | 3/22/2024 |
| 2.1.2 | 2,401 | 12/19/2023 |
| 2.1.1 | 323 | 12/18/2023 |
| 2.0.1 | 978 | 11/23/2023 |
| 1.2.3 | 5,129 | 5/10/2023 |
| 1.2.2 | 318 | 5/7/2023 |
| 1.2.1 | 1,776 | 11/2/2022 |
| 1.2.0 | 535 | 10/31/2022 |
| 1.1.2 | 572 | 10/11/2022 |