BlazorUI Demo

Icons

Icons are strongly typed SVG definitions with no runtime registry or client dependency.

Built-in packs

Choose Lucide for the default visual language, or Heroicons outline and solid when they better fit the context.

View code 
<BuiStack Orientation="Orientation.Horizontal" Align="Align.Center" Gap="4" Wrap>
    <BuiIcon Icon="LucideIcons.Bell" Size="Size.Large" />
    <BuiIcon Icon="HeroiconsOutline.Bell" Size="Size.Large" />
    <BuiIcon Icon="HeroiconsSolid.Bell" Size="Size.Large" Color="Colors.Primary" />
    <BuiButton StartIcon="LucideIcons.Plus">Add customer</BuiButton>
    <BuiIconButton Icon="HeroiconsOutline.Trash" AriaLabel="Delete" Color="Colors.Error" />
</BuiStack>
Custom icons

Create an IconDefinition from application-owned SVG markup. Never pass user-supplied markup into an icon definition.

View code 
<BuiIcon Icon="CompanyMark" Size="Size.Large" Color="Palette.Violet" />

@code {
    private static readonly IconDefinition CompanyMark =
        new("0 0 24 24", "<path d='M12 2 22 20H2Z' />", Filled: true);
}