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

• Heroicons
• Release notes
• NuGet package
• License

📄 License

This library is MIT licensed.