BlazorBlueprint.Icons.FontAwesome 2.0.0

BlazorBlueprint.Icons.FontAwesome

A comprehensive Font Awesome Free icon library for Blazor applications, providing 2,066 icons across 3 variants (Solid, Regular, Brands).

Only Font Awesome Free is supported. Font Awesome Pro requires a commercial license and cannot be redistributed via NuGet.

Features

• 2,066 Icons: Full Font Awesome 6 Free icon set across 3 variants
• 3 Variants: Solid (filled), Regular (outline), Brands (third-party logos)
• Aspect-Ratio Aware: Per-icon viewBox is preserved, so non-square Brands icons (e.g. github, twitter) render at their correct proportions
• React-Style API: Familiar component-based API
• Includes ARIA Attributes: Customizable aria-label for accessibility
• 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: Static dictionary lookup with minimal overhead

Installation

dotnet add package BlazorBlueprint.Icons.FontAwesome

Basic Usage

Import the Namespace

Add to _Imports.razor:

@using BlazorBlueprint.Icons.FontAwesome.Components
@using BlazorBlueprint.Icons.FontAwesome.Data

Render an Icon

@* Default variant (Solid) *@
<FontAwesomeIcon Name="camera" />

Use Different Variants

@* Solid variant — the largest set, filled glyphs (default) *@
<FontAwesomeIcon Name="house" Variant="FontAwesomeIconVariant.Solid" />

@* Regular variant — outline alternative (small curated subset in the Free tier) *@
<FontAwesomeIcon Name="heart" Variant="FontAwesomeIconVariant.Regular" />

@* Brands variant — third-party logos *@
<FontAwesomeIcon Name="github" Variant="FontAwesomeIconVariant.Brands" />

Customize Size and Color

<FontAwesomeIcon Name="heart" Size="32" Color="red" Variant="FontAwesomeIconVariant.Solid" />

Use with CSS Variables (Theming)

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

Icon-Only Button (with Accessibility)

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

Integration with BlazorBlueprint Button Component

<BbButton>
    <Icon>
        <FontAwesomeIcon Name="download" Variant="FontAwesomeIconVariant.Solid" Size="16" />
    </Icon>
    <ChildContent>Download</ChildContent>
</BbButton>

Component API

Parameters

Icon Variants

public enum FontAwesomeIconVariant
{
    Solid,    // Filled glyphs — the largest set and the default
    Regular,  // Outline glyphs — small curated subset in the Free tier
    Brands    // Third-party logos (GitHub, Microsoft, Apple, etc.)
}

Examples

Basic Icon (Solid):

<FontAwesomeIcon Name="house" />

Brands Icon:

<FontAwesomeIcon Name="github" Variant="FontAwesomeIconVariant.Brands" />

Regular Icon with Custom Color:

<FontAwesomeIcon Name="heart" Variant="FontAwesomeIconVariant.Regular" Color="#EF4444" />

Custom Size:

<FontAwesomeIcon Name="star" Size="32" />

Icon with Custom CSS Classes:

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

Accessible Icon-Only Button:

<button>
    <FontAwesomeIcon Name="trash" AriaLabel="Delete item" />
</button>

Icon with Data Attributes:

<FontAwesomeIcon Name="gear" data-testid="settings-icon" />

Icon Names

All Font Awesome Free icons are available, with names matching the official Font Awesome naming (kebab-case). Common examples:

• house, user, gear, magnifying-glass
• arrow-left, arrow-right, arrow-up, arrow-down
• circle-check, circle-xmark, circle-exclamation
• heart, star, bell, bookmark
• github, microsoft, apple, google (Brands)
• ... and 2,000+ more

Browse all icons: fontawesome.com/icons

Variant Guidelines

Solid (Default)

• Style: Filled paths
• Coverage: 1,400+ icons — the largest set in Free
• Use case: Primary UI, navigation, emphasis, the default for most applications

Regular

• Style: Outline / stroke-style paths
• Coverage: 160+ icons — a small curated subset; the Free tier ships far fewer Regular icons than Solid
• Use case: When you want a lighter visual weight than Solid

Brands

• Style: Filled logos at the artist-specified aspect ratio
• Coverage: 480+ third-party brand and product logos
• Use case: Social links, technology logos, payment provider icons
• Note: Brands icons are not all square — width and height vary per icon. The component preserves each icon's intrinsic viewBox and scales height accordingly.

Styling

Default Behavior

Icons inherit color from their parent element by default:

<div style="color: blue;">
    <FontAwesomeIcon Name="house" /> 
</div>

Explicit Color

Override the inherited color:

<FontAwesomeIcon Name="house" Color="red" />

CSS Variables (Theming)

Perfect for theme systems:

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

Tailwind CSS

Use Tailwind utility classes:

<FontAwesomeIcon Name="circle-check" Class="text-green-500 dark:text-green-400" />

Accessibility

Decorative Icons (Next to Text)

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

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

Semantic Icons (Icon-Only)

Icon-only elements require AriaLabel:

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

Performance

• Bundle Size: ~580 KB for the complete icon set across all 3 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

Regenerating Icon Data

The Data/FontAwesomeIconData.cs file is auto-generated from the Iconify JSON sets for Font Awesome 6 Free. To refresh:

1. Download the latest sets from the @iconify-json/fa6-* npm packages, or iconify/icon-sets:
   • fa6-solid.json
   • fa6-regular.json
   • fa6-brands.json
2. Place them in tools/icon-generation/data/.
3. Run:

./GenerateIconData.ps1

License

The C# wrapper code is MIT licensed.

Font Awesome Free icon artwork is licensed under the Font Awesome Free License:

• Icons: CC BY 4.0
• Fonts: SIL OFL 1.1
• Code: MIT

Links

• Font Awesome: fontawesome.com
• Icon Browser: fontawesome.com/icons
• 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