Icons

ShadcnBlazor does not ship an icon library. Use any icon set you prefer—we recommend Lucide icons for consistency with shadcn/ui.

The shadcn/ui ecosystem uses Lucide icons. For Blazor, you can use EasyAppDev.Blazor.Icons.Lucide or any other icon package. Icons are just components or SVG—place them inside buttons, inputs, or anywhere in your markup.

Using Lucide Icons

Add the Lucide Blazor package to your project:

<PackageReference Include="EasyAppDev.Blazor.Icons.Lucide" Version="2.0.4" />

Then use icon components in your Razor files. Icons are named with a Lu prefix (e.g. LuHome, LuSettings). Size them with Tailwind classes like h-4 w-4 or size-5.

Icons in Buttons

Place icons alongside text or use icon-only buttons. The Button component's built-in gap handles spacing.

@using EasyAppDev.Blazor.Icons.Lucide

<div class="flex flex-wrap gap-4">
    <Button><LuDownload class="h-4 w-4" /> Download</Button>
    <Button Variant="@Variant.Outline"><LuMail class="h-4 w-4" /> Email</Button>
    <Button Variant="@Variant.Ghost" Size="@Size.Sm"><LuSettings class="h-4 w-4" /></Button>
</div>

Common Icons

A few frequently used icons: LuHome, LuUser, LuSearch, LuChevronRight, LuCheck. Browse the full set at lucide.dev.

LuHouse

LuUser

LuSearch

LuChevronRight

LuCheck

@using EasyAppDev.Blazor.Icons.Lucide

<div class="flex flex-wrap gap-6">
    <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
        <LuHouse class="h-6 w-6 text-foreground" />
        <span>LuHouse</span>
    </div>
    <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
        <LuUser class="h-6 w-6 text-foreground" />
        <span>LuUser</span>
    </div>
    <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
        <LuSearch class="h-6 w-6 text-foreground" />
        <span>LuSearch</span>
    </div>
    <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
        <LuChevronRight class="h-6 w-6 text-foreground" />
        <span>LuChevronRight</span>
    </div>
    <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
        <LuCheck class="h-6 w-6 text-foreground" />
        <span>LuCheck</span>
    </div>
</div>

Other Icon Libraries

You can use any icon library that renders SVG or components. Popular options include:

Lucide — Used by shadcn/ui; clean, consistent design.
Heroicons — From Tailwind Labs; similar aesthetic.
Custom SVG — Inline SVG or your own component library.

ShadcnBlazor components accept any content via ChildContent or slots, so icons integrate seamlessly regardless of source.