Add .online, .offline, .away or .busy to place a status dot on the avatar. Add .status-top to move it to the upper corner.

Drop the image and put initials inside the avatar with .avatar-initial. Colour it with any Bootstrap background utility.

Use .avatar-icon to centre an icon instead of an image or initials.

.avatar-bordered adds a white ring, which keeps avatars legible on photos and coloured panels.

.avatar-hover lifts the avatar on hover. .avatar-overlay reveals its .avatar-overlay-content child.

Pin any Bootstrap badge to a corner with .avatar-badge.

3 12

Close a stacked group with .avatar-count instead of a hand-coloured link.

+8

The avatar of a subject, channel, event or metric rather than a person. .avatar-icon softens the corners and scales the glyph with the tile, so the dashboards no longer need an icon-wrapper class each.

Any background utility works, and .avatar-rounded turns a tile into a disc.

For lists that recolour row by row, set --avatar-accent and --avatar-accent-soft on an ancestor and let the tile follow with .avatar-accent or .avatar-accent-soft — no class per colour.

Dashboard tiles are drawn to their own dimensions rather than the named scale. .avatar-26 … .avatar-58 set the tile, .avatar-r-8 … .avatar-r-16 the corner, and .avatar-glyph-14 … .avatar-glyph-24 the icon inside it — so a page can match a spec to the pixel without a wrapper class of its own.

The glyph size is declared on the tile rather than the icon, so it never becomes a font-size utility fighting the component. Swap .avatar-accent-soft for .avatar-accent to fill the tile solid.

.avatar-ai marks machine-generated content — a summary, a prediction, an assistant reply. One violet-to-primary gradient across the whole template, so every AI surface is recognisable at a glance. Unlike the accent tiles it does not follow its surroundings: the gradient is the signal.

The award finish of the icon tile. .avatar-medal lights the accent fill with a diagonal sheen and drops it onto a glow of its own colour, for achievement, badge and certificate galleries where the tile is the trophy rather than a label.

The colour comes from the accent pair on the tile or any ancestor, so a gallery recolours row by row without a class per medal. Every size in the scale works, and dropping .avatar-rounded keeps the softened square.