Blazor.Heroicons

A third-party Blazor component library for Heroicons.

Basic Usage

First, install Blazor.Heroicons from nuget:

dotnet add package Blazor.Heroicons

Now each icon can be used as a Blazor component:

@using Blazor.Heroicons.Solid

<div>
  <BeakerIcon class="h-6 w-6 text-blue-500" />
  <p>...</p>
</div>

The icons are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like text-gray-500 in a framework like Tailwind CSS.

<Heroicon />

You can also reference an icon by name, using the Heroicon component:

@using Blazor.Heroicons

<Heroicon Name="@HeroiconName.Sparkles" Type="HeroiconType.Outline" class="h-6 w-6 text-yellow-600" />

Browse the full list of icons on Heroicons →

<RandomHeroicon />

If you want to get crazy, use the RandomHeroicon component to render a random icon:

@using Blazor.Heroicons

<RandomHeroicon Type="HeroiconType.Mini" class="h-6 w-6 text-green-700" />

Links

• Release notes
• NuGet package
• License

License

This library is MIT licensed.