Styled Icons

Styled Icons

Styled icons turn a single icon glyph into a decorated shape: bordered, dark, light, or plain, in several sizes. Add the base .i-style class to any icon element, then layer style and size modifiers. Plain icons use .i-plain on their own.

Structure

• .i-style - the base styled-icon class (wraps the glyph in a shaped container)
• .i-bordered - outlined style with a border ring
• .i-light - light/soft background fill
• .i-alt - alternate 3D-style treatment
• .i-plain - flat icon with no background shape
• .rounded / .rounded-circle - Bootstrap utilities that set a rounded-square or full-circle shape
• Size classes: .i-small, .i-medium, .i-large, .i-xlarge, .i-xxlarge

Bordered Icon

<i class="i-style rounded i-bordered bi-lightning-fill"></i>

Variants

Dark rounded circle: the default .i-style with .rounded-circle gives a solid dark disc.

<i class="i-style rounded-circle bi-lightning-fill"></i>

Light rounded circle: add .i-light for a soft fill.

<i class="i-style rounded-circle i-light bi-book"></i>

3D alternate: add .i-alt for a raised, alternate look.

<i class="i-style rounded i-alt bi-arrow-repeat"></i>

Plain: use .i-plain alone (no .i-style) for a flat icon, and add a size class.

<i class="i-plain i-xlarge bi-images"></i>

Sizes

Append a size class to scale the icon shape:

<i class="i-style rounded-circle i-small bi-bell"></i>
<i class="i-style rounded-circle i-large bi-bell"></i>
<i class="i-style rounded-circle i-xlarge bi-bell"></i>

Tips

• Any Bootstrap Icon (bi-*) or Font Awesome (fa-*) glyph works as the icon body.
• Use .rounded for a rounded-square shape or .rounded-circle for a full circle.
• Center a plain icon with utilities like mx-auto d-block when it sits above a heading or counter.