HtmlHelper - Badges & Icons

The BootstrapUI HtmlHelper provides Bootstrap-styled badge and icon components.

Badges

Bootstrap badges for counts and labels.

Basic Badges

Default Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Rounded pill 99+ New

Badges in Context

Messages 4

Inbox 12

Button with badge:

Icons (Bootstrap Icons)

Bootstrap Icons integration for consistent iconography.

Note: Bootstrap Icons must be installed via npm. The icon component renders <i> tags with the appropriate Bootstrap Icons classes.
Basic Icons

Icon Sizes

Small: Normal: Large: X-Large: XX-Large:

Colored Icons

Icons with Text

Home
Messages
Profile
Settings

Icons in Buttons

Combined: Badges with Icons

5 new 12 Verified

Available Bootstrap Icons

See the full list at Bootstrap Icons. Common icons include: house, heart, star, check, x, info, exclamation, gear, person, envelope, bell, trash, plus, minus, arrow-left, arrow-right, search, and many more.


Send your feedback or bugreport!