BlazorBlueprint.Icons.Heroicons 2.0.0

BlazorBlueprint.Icons.Heroicons

A comprehensive Heroicons icon library for Blazor applications, providing 1,288 beautiful icons across 4 variants (outline, solid, mini, micro).

Features

• 1,288 Icons: Complete Heroicons icon set across 4 variants
• 4 Variants: Outline (24x24), Solid (24x24), Mini (20x20), Micro (16x16)
• React-Style API: Familiar component-based API for React developers
• Fully Accessible: ARIA-compliant with customizable labels
• Tree-Shakeable: Blazor assembly trimming removes unused icons at publish time
• Type-Safe: Full XML documentation and IntelliSense support
• Themeable: Icons inherit color from parent by default, supports CSS variables
• Lightweight: Optimized SVG rendering with minimal overhead

Installation

dotnet add package BlazorBlueprint.Icons.Heroicons

Basic Usage

Import the Namespace

Add to _Imports.razor:

@using BlazorBlueprint.Icons.Heroicons.Components

Render an Icon

@* Default variant (Outline) *@
<HeroIcon Name="camera" />

Use Different Variants

@* Outline variant (24x24) - default *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Outline" />

@* Solid variant (24x24) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Solid" />

@* Mini variant (20x20) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Mini" />

@* Micro variant (16x16) *@
<HeroIcon Name="camera" Variant="HeroIconVariant.Micro" />

Customize Size and Color

<HeroIcon Name="heart" Size="32" Color="red" Variant="HeroIconVariant.Solid" />

Use with CSS Variables (Theming)

<HeroIcon Name="sun" Color="var(--primary)" />

Icon-Only Button (with Accessibility)

<button aria-label="Take Photo">
 <HeroIcon Name="camera" />
</button>

Integration with BlazorBlueprint Button Component

<Button>
 <Icon>
 <HeroIcon Name="camera" Size="20" Variant="HeroIconVariant.Solid" />
 </Icon>
 Take Photo
</Button>

Component API

Parameters

Icon Variants

public enum HeroIconVariant
{
 Outline, // 24x24, stroke-based (default)
 Solid, // 24x24, filled
 Mini, // 20x20, filled
 Micro // 16x16, filled
}

Examples

Basic Icon (Outline):

<HeroIcon Name="home" />

Solid Icon:

<HeroIcon Name="star" Variant="HeroIconVariant.Solid" />

Mini Icon with Custom Color:

<HeroIcon Name="heart" Variant="HeroIconVariant.Mini" Color="#EF4444" />

Micro Icon with Custom Size:

<HeroIcon Name="check" Variant="HeroIconVariant.Micro" Size="20" />

Icon with Custom CSS Classes:

<HeroIcon Name="exclamation-triangle" Class="text-destructive hover:text-destructive/80" />

Accessible Icon-Only Button:

<button>
 <HeroIcon Name="trash" Variant="HeroIconVariant.Solid" AriaLabel="Delete item" />
</button>

Icon with Data Attributes:

<HeroIcon Name="cog-6-tooth" data-testid="settings-icon" />

Icon Names

All 316 unique Heroicons are available across 4 variants (1,288 total). Icon names use kebab-case and match the official Heroicons naming:

• academic-cap
• arrow-down
• arrow-up
• bell
• bookmark
• calendar
• camera
• check
• chevron-down
• chevron-up
• heart
• home
• user
• x-mark
• ... and 300+ more

Browse all icons: heroicons.com

Variant Guidelines

Outline (Default)

• Size: 24x24
• Style: Stroke-based, 1.5px stroke
• Use case: General UI, navigation, buttons

Solid

• Size: 24x24
• Style: Filled paths
• Use case: Active states, emphasis, decorative

Mini

• Size: 20x20
• Style: Filled paths
• Use case: Compact UI, inline with text, badges

Micro

• Size: 16x16
• Style: Filled paths, simplified details
• Use case: Very small UI elements, dense layouts

Styling

Default Behavior

Icons inherit color from their parent element by default:

<div style="color: blue;">
 <HeroIcon Name="home" /> 
</div>

Explicit Color

Override the inherited color:

<HeroIcon Name="home" Color="red" />

CSS Variables (Theming)

Perfect for theme systems:

<HeroIcon Name="sun" Color="var(--primary)" />
<HeroIcon Name="moon" Color="var(--foreground)" />

Tailwind CSS

Use Tailwind utility classes (Heroicons are designed for Tailwind):

<HeroIcon Name="check-circle" Class="text-green-500 dark:text-green-400" Variant="HeroIconVariant.Solid" />

Accessibility

Decorative Icons (Next to Text)

Icons next to text are decorative and don't need labels:

<button>
 <HeroIcon Name="camera" />
 <span>Take Photo</span>
</button>

Semantic Icons (Icon-Only)

Icon-only elements require AriaLabel:

<button>
 <HeroIcon Name="camera" AriaLabel="Take Photo" />
</button>

Performance

• Bundle Size: ~450 KB for complete icon set with all variants (before compression)
• Brotli Compression: Reduces size by ~70% in production
• Assembly Trimming: Unused icons automatically removed at publish time
• Static Dictionary: O(1) icon lookup with minimal memory overhead

Browser Support

Works in all modern browsers that support:

• Blazor Server / WebAssembly / Hybrid
• SVG rendering
• CSS currentColor

License

This package is MIT licensed.

Heroicons are MIT licensed by Tailwind Labs.

Links

• Heroicons: heroicons.com
• BlazorBlueprint: GitHub Repository
• Issues: Report a Bug

Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

Made with ❤️ by the BlazorBlueprint team