Default avatar
The base .avatar element — a placeholder box for a photo, icon, or initials.
Avatar with icon
Put an icon inside the avatar instead of a photo.
Avatar icon colors
Combine an icon avatar with any theme color.
Simple avatar
Show a photo by setting it as the background-image of the avatar.
Avatar placeholder
Fall back to initials as the avatar text when there's no photo.
PKJLMHDSELMLEPKS
Avatar shapes
Square by default — add .rounded-circle or .rounded-0 to change the shape.
Avatar sizes
Six sizes from avatar-xxs to avatar-xl, for both photos and placeholders.
PKPKPKPKPKPK
Avatar statuses
Add a badge inside the avatar for an online, away, or busy status dot.
Avatar brands
Add a recognizable brand icon on top of an avatar.