https://github.com/tmcknight/blazor-heroicons
A third-party Blazor component library for Heroicons.
https://github.com/tmcknight/blazor-heroicons
blazor heroicons icons tailwindcss
Last synced: 4 months ago
JSON representation
A third-party Blazor component library for Heroicons.
- Host: GitHub
- URL: https://github.com/tmcknight/blazor-heroicons
- Owner: tmcknight
- License: mit
- Created: 2022-10-01T17:48:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-07-14T13:17:24.000Z (12 months ago)
- Last Synced: 2025-11-24T06:38:33.717Z (7 months ago)
- Topics: blazor, heroicons, icons, tailwindcss
- Language: HTML
- Homepage:
- Size: 662 KB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Blazor.Heroicons
A third-party Blazor component library for Heroicons — beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
[](https://www.nuget.org/packages/Blazor.Heroicons)
[](https://github.com/tailwindlabs/heroicons/releases/tag/v2.2.0)
[](LICENSE)
[](https://github.com/tmcknight/Blazor.Heroicons/actions/workflows/dotnet.yml)
## 📦 Installation
```sh
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 heroicons.com →](https://heroicons.com)
## 🚀 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:
```razor
@using Blazor.Heroicons.Outline
```
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](https://tailwindcss.com/).
### Dynamic icon by name (``)
Reference any icon by name and style using the `Heroicon` component:
```razor
@using Blazor.Heroicons
```
| 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 (``)
Render a random icon from a given style:
```razor
@using Blazor.Heroicons
```
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `Type` | `HeroiconType` | `HeroiconType.Outline` | Icon style to choose from |
## 🔗 Links
- [Heroicons](https://heroicons.com)
- [Release notes](https://github.com/tmcknight/Blazor.Heroicons/releases)
- [NuGet package](https://www.nuget.org/packages/Blazor.Heroicons)
- [License](https://github.com/tmcknight/Blazor.Heroicons/blob/main/LICENSE)
## 📄 License
This library is MIT licensed.