Icon

Inline SVG icons from Lucide, rendered on the server.

A static page with IzzyBlazor's script. No circuit.

Renders an icon as inline SVG on the server: no font or script to load, works on static pages, and follows the text color and size around it.

Usage

razor

<Icon Name="Lucide.House" />
<Icon Name="Lucide.TriangleAlert" Size="IconSize.Lg" Color="Color.WarningText" Label="Warning" />
<Icon Role="IconRole.Close" />

Beside text

Use Icon with a Name such as Lucide.House: it's sized in em and takes the text color, so it matches the text it sits in.

Preview Code

Preview

Home

Settings

Updated 5 minutes ago

Your plan includes AI summaries for every project.

Code

BesideText.razor

@* Icons are sized in em and painted with currentColor, so inside text they match it. *@
<Stack Gap="3" Grow>
    <TextBlock><Icon Name="Lucide.House" /> Home</TextBlock>
    <TextBlock Size="TextSize.Lg"><Icon Name="Lucide.Settings" /> Settings</TextBlock>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted"><Icon Name="Lucide.Clock" /> Updated 5 minutes ago</TextBlock>
    <TextBlock>Your plan includes <Icon Name="Lucide.Sparkles" Color="Color.PrimaryText" /> AI summaries for every project.</TextBlock>
</Stack>

Sizes

Use Size to scale an icon relative to the text around it.

Preview Code

Preview

Xl2

Xl3

Code

Sizes.razor

<Row Gap="5" Align="Align.End" Wrap>
    @foreach (var size in Enum.GetValues<IconSize>())
    {
        <Stack Gap="1" Align="Align.Center">
            <Icon Name="Lucide.Rocket" Size="size" />
            <TextBlock As="span" Size="TextSize.Xs" Color="Color.Muted">@size</TextBlock>
        </Stack>
    }
</Row>

Color, stroke width and spin

Use Color, StrokeWidth and Spin to style an icon, and Label to name one that stands alone.

Preview Code

Preview

Code

ColorStroke.razor

<Row Gap="5" Align="Align.Center" Wrap>
    <Icon Name="Lucide.CircleCheck" Size="IconSize.Xl" Color="Color.SuccessText" Label="Done" />
    <Icon Name="Lucide.TriangleAlert" Size="IconSize.Xl" Color="Color.WarningText" Label="Warning" />
    <Icon Name="Lucide.CircleAlert" Size="IconSize.Xl" Color="Color.DangerText" Label="Error" />
    <Icon Name="Lucide.Heart" Size="IconSize.Xl" StrokeWidth="1" />
    <Icon Name="Lucide.Heart" Size="IconSize.Xl" StrokeWidth="2.5" />
    <Icon Role="IconRole.Loading" Size="IconSize.Xl" Spin Label="Loading" />
</Row>

Semantic roles

Use Role to ask for a purpose rather than a drawing, so one icon set can change every icon the library draws.

Preview Code

Preview

ChevronDown

ChevronUp

ChevronLeft

ChevronRight

Check

Minus

Plus

MoreHorizontal

Info

Success

Warning

Error

ExternalLink

Copy

Copied

Calendar

Clock

Show

Hide

SortAscending

SortDescending

Sortable

TrendUp

TrendDown

TrendFlat

Filter

SchemeLight

SchemeDark

SchemeSystem

Person

Play

Upload

Code

Roles.razor

@* The library's own components ask for a role, so one IconSet changes every icon they draw. *@
<Grid Columns="new() { Base = 2, Sm = 3, Xl = 4 }" Gap="3" Grow>
    @foreach (var role in Enum.GetValues<IconRole>())
    {
        <Row Gap="2" Align="Align.Center">
            <Icon Role="role" />
            <TextBlock As="span" Size="TextSize.Sm">@role</TextBlock>
        </Row>
    }
</Grid>

Brand logos

Use Brands for the logos sites link to most, drawn to match Lucide.

Preview Code

Preview

Code

Logos.razor

@* Brand logos drawn to match Lucide. Alone, as in an icon-only link, a logo needs a name. *@
<Row Gap="2" Align="Align.Center" Wrap>
    <IconButton Icon="Brands.GitHub" Label="GitHub" Href="https://github.com/enabledevmode/izzyblazor" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    <IconButton Icon="Brands.NuGet" Label="NuGet" Href="https://www.nuget.org/packages/IzzyBlazor" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    <IconButton Icon="Brands.YouTube" Label="YouTube" Href="https://www.youtube.com/" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    <IconButton Icon="Brands.Bluesky" Label="Bluesky" Href="https://bsky.app/" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    <IconButton Icon="Brands.Discord" Label="Discord" Href="https://discord.com/" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    <IconButton Icon="Brands.DotNet" Label=".NET" Href="https://dotnet.microsoft.com/" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
</Row>

Mode support

What works in each mode, Icon
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

Without a Label it's decorative: aria-hidden="true", which is right when visible text sits next to it.
With a Label it's role="img" named by the label; give one to an icon that stands alone and means something.
It never takes focus. An action shown only as an icon needs a button with a name: use IconButton.
With reduced motion set, Spin slows down rather than stops, since the spin says "still working".

Parameters

Icon parameters
Prop	Type	Default
`Name`The icon to show, such as Lucide.House.	`IconData?`
`Role`A purpose such as IconRole.Close, resolved through the current icon set.	`IconRole?`
`Size`Size relative to the surrounding text.	`IconSize`	`IconSize.Md`
`Color`Color.	`Responsive<Color>`	`computed`
`Label`Accessible name.	`string?`
`StrokeWidth`Overrides the stroke width of outlined icons (IzzyBlazor draws Lucide at 1.5).	`double?`
`Spin`Rotates continuously, for loading indicators.	`bool`	`false`

Plus 4 common props.

Full API