Feedback

TwIcon

TwIcon is a Blazor icon component for Bootstrap Icons. Pass an Icon enum value, style it with Tailwind classes, or add OnClick to make an icon button.

Last updated 25 September 2026

Icons

Use TwIcon to display any Bootstrap icon.

Razor

<div class="d-flex gap-3 align-items-center mb-3">
    <TwIcon Icon="Icon.Heart_Fill" Class="text-4xl p-1 text-red-600 hover:text-red-400" OnClick="LikeIconClicked" AriaLabel="Like" RootClass="inline-block" />
    <TwIcon Icon="Icon.Star_Fill" Class="text-4xl p-1 text-blue-600" />
    <TwIcon Icon="Icon.Check_Circle_Fill" Class="text-2xl p-1 text-pink-600" />
</div>

Icon Buttons

Passing OnClick wraps the icon in a circular button. It gets a hover state-layer and a press "pulse" automatically, even without a Color set.

Razor

<div class="d-flex gap-3 align-items-center mb-3">
    <TwIcon Icon="Icon.Trash" Class="text-xl p-2" OnClick="DeleteIconClicked" AriaLabel="Delete" />
    <TwIcon Icon="Icon.Github" Class="text-xl p-2 text-purple-600" OnClick="GithubIconClicked" AriaLabel="View on GitHub" />
    <TwIcon Icon="Icon.Heart_Fill" Class="text-xl p-2 text-red-600" OnClick="LikeIconClicked" AriaLabel="Like" />
    <TwIcon Icon="Icon.Share" Class="text-xl p-2" OnClick="ShareIconClicked" AriaLabel="Share" />
</div>

Icon Size

You can control icon sizes using Tailwind CSS font size classes or passing in your owm.

Razor

<div class="d-flex gap-3 align-items-center mb-3">
    <TwIcon Icon="Icon.Gear_Fill" Class="text-xs" />
    <TwIcon Icon="Icon.Gear_Fill" Class="text-lg" />
    <TwIcon Icon="Icon.Gear_Fill" Class="text-xl" />
    <TwIcon Icon="Icon.Gear_Fill" Class="text-2xl" />
    <TwIcon Icon="Icon.Gear_Fill" Class="text-3xl" />
    <TwIcon Icon="Icon.Gear_Fill" Class="text-4xl" />
</div>

Icon Library

Browse through all available Bootstrap icons. Click on any icon to copy its enum value.

Search icons

Zero_Circle

Zero_Circle_Fill

Zero_Square

Zero_Square_Fill

One_Circle

One_Circle_Fill

One_Square

One_Square_Fill

One_Two_Three

Two_Circle

Two_Circle_Fill

Two_Square

Two_Square_Fill

Three_Circle

Three_Circle_Fill

Three_Square

Three_Square_Fill

Four_Circle

Four_Circle_Fill

Four_Square

Four_Square_Fill

Five_Circle

Five_Circle_Fill

Five_Square

Five_Square_Fill

Six_Circle

Six_Circle_Fill

Six_Square

Six_Square_Fill

Seven_Circle

Seven_Circle_Fill

Seven_Square

Seven_Square_Fill

Eight_Circle

Eight_Circle_Fill

Eight_Square

Eight_Square_Fill

Nine_Circle

Nine_Circle_Fill

Nine_Square