AVATAR: User identity display — initials, photos, or placeholder icons
SIZES: XS (24px) | SM (32px) | MD (40px, default) | LG (48px) | XL (64px)
TYPES: Initials (gradient) | Image | Icon placeholder | Status dot
Avatars represent users across the platform. Initials avatars use gradient backgrounds from a set of 6 color families. Status dots indicate online/offline/busy/away state.
Sizes
Sizes: Five sizes from XS (24px) to XL (64px). Default is MD (40px).
Use .tw-avatar-xs, .tw-avatar-sm, .tw-avatar-lg, or .tw-avatar-xl to override.
XS (24px)
SM (32px)
MD (40px)
LG (48px)
XL (64px)
<div class="tw-avatar tw-avatar-sm tw-avatar-primary" role="img" aria-label="Jane Doe"><span>JD</span></div>
Initials with Colors
Colors: Six color families for initials avatars. Application logic hashes the user's name to pick a color. Each uses a light tinted background with darker text.
Primary
Blue
Green
Red
Orange
Magenta
<div class="tw-avatar tw-avatar-blue" role="img" aria-label="Claire Davies"><span>CD</span></div>
Image Avatars
Images: Place an <img> with .tw-avatar-image inside the
.tw-avatar wrapper. The image is cropped to a circle via object-cover
and rounded-full.
XS
SM
MD
LG
XL
<div class="tw-avatar"><img class="tw-avatar-image" src="..." alt="User Name"></div>
Icon Placeholder
Fallback: When no image or initials are available, use .tw-avatar-icon
for a neutral gray placeholder with a user icon.
XS
SM
MD
LG
XL
<div class="tw-avatar tw-avatar-icon" role="img" aria-label="User"><i class="fa-solid fa-user"></i></div>
Status Dots
Presence indicators: Add a .tw-avatar-status span inside the avatar
with a status modifier. Dot size scales automatically with avatar size.
Status Types
Online
Offline
Busy
Away
Dot Scaling with Size
XS
SM
MD
LG
XL
<div class="tw-avatar tw-avatar-blue" role="img" aria-label="Sam Collins, Online"><span>SC</span><span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span></div>
Mixed Row
Realistic usage: A mix of initials, image, and icon avatars with various sizes and status indicators, as they would appear in a user list or team view.