Blazorise Icons component

Icons are visual symbols that represent actions, states, or navigation options.

Blazorise ships with multiple icon providers and supports registering custom icon libraries.

To use the Icon component, install one of the Blazorise.Icons.* packages first.

Installation

Install an icon provider package from NuGet.

NuGet

Install the package for the icon provider you want to use.

dotnet add package Blazorise.Icons.FontAwesome

CSS

Add the stylesheet for your icon provider inside the <head> section of wwwroot/index.html for standalone WebAssembly, _Layout.cshtml or _Host.cshtml for Blazor Server, or Components/App.razor for a Blazor Web App.

<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css?v=2.4.1.0" rel="stylesheet">

Registrations

Register the icon provider that matches the package and stylesheet you selected. Keep your existing Blazorise and CSS provider registration.

using Blazorise.Icons.FontAwesome;

builder.Services.AddFontAwesomeIcons();

Basic Example

The most basic example of using an icon is to use the Icon component. You can set the icon name using the IconName property.

<Icon Name="IconName.Mail" />

Custom

You can also use a real icon name instead of predefined enum. Note that this is not the preferred way of using icons, but it can be useful in some cases.

<Icon Name="@("fa-phone")" />

Icon Names

Preferred way to define icon is to use an enum IconName. That way every icon will be applied automatically based on the icon package that you're using. When the shared enum does not contain the icon you need, use a constant from your provider's icon-name class. Select your provider below to see its syntax.

<Icon Name="Blazorise.Icons.FontAwesome.FontAwesomeIcons.Phone" />

Style

Blazorise exposes common icon styles through IconStyle. To change it you can use one of the supported styles:

Solid
Regular
Light
DuoTone

Not all icon providers support all styles. If a style is not supported by the selected provider, it can fall back to the provider default or render the same base icon.

<Icon Name="IconName.Mail" IconStyle="IconStyle.Regular" />

Style support

The table below compares how the built-in icon providers handle IconStyle values.

Provider	Solid	Regular	Light	DuoTone	Notes
AntDesign	Supported	Supported	Not supported	Supported	Uses AntDesign icon themes.
Bootstrap Icons	Single style only	Not supported	Not supported	Not supported	`IconStyle` does not change the rendered icon.
Fluent UI	Supported	Supported	Not supported	Not supported	Regular is the default; `IconStyle.Solid` selects the filled variant.
Font Awesome	Supported	Supported	Requires matching Font Awesome assets	Requires matching Font Awesome assets	Support depends on the Font Awesome CSS and font files loaded by the app.
Material Icons	Supported	Supported	Supported	Supported	Maps Blazorise styles to Material icon font families.
Lucide	Single style only	Single style only	Not supported	Not supported	Lucide is a single outline SVG icon set.

<Div Flex="Flex.Row.Wrap.JustifyContent.Start.AlignItems.Start">
    @foreach ( var iconSize in Enum.GetValues<IconSize>() )
    {
        @if ( iconSize == IconSize.Default )
            continue;

        <Div Flex="Flex.Column.JustifyContent.Center">
            <Span Flex="Flex.JustifyContent.Center.AlignItems.Center" Padding="Padding.Is5">
                <Icon Name="IconName.Camera" IconSize="@iconSize" />
            </Span>
            <Text TextAlignment="TextAlignment.Center">
                @iconSize
            </Text>
        </Div>
    }
</Div>

Size

You can set the size to one of the supported below.

ExtraSmall

Small

Large

x10

Global options

Defining styles on each icon can become very tedious with time. That's why we give you an option to specify them globally. This way, you will have consistent styling across the application, and you can still override them on the icon if you need to.

services.AddBlazorise( options =>
{
    options.IconStyle = IconStyle.Light;
    options.IconSize = IconSize.Small;
} );

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Icon />