Avatars

What is an avatar?

An avatar is a small visual that represents a user or entity: a profile photo, initials on a coloured background, or an icon placeholder. Avatars appear in navbars, comment threads, chat lists, assignee fields, team pages and anywhere a person needs to be identified at a glance. Avatar groups stack several avatars with an overlap to show participants, collaborators or followers in little space.

When to use avatars

• Next to user-generated content such as comments, messages and reviews.
• In account menus to show who is signed in.
• In task boards and tables to show assignees.
• As avatar groups with a "+5" counter when a full list would be too long.

Best practices

• Use a fixed set of sizes (for example 24, 32, 48 and 64 pixels) and keep them consistent across the app.
• Use object-fit: cover on images so faces are never stretched, and set width and height to avoid layout shift.
• Provide a fallback: show initials or a neutral icon when there is no photo or the image fails to load.
• Pick initials background colours with enough contrast against white or dark text.
• If the avatar is decorative because the name is visible, use alt=""; otherwise use the person's name as the alt text.
• Status dots (online, away, busy) should not rely on colour alone; add a visually hidden label or a title.
• In avatar groups, add a ring or border so overlapping images stay distinguishable, and expose the full list to screen readers.

Framework versions

The examples on this page cover photo avatars, initials, status indicators and stacked groups, each with a live preview and code tabs. Bootstrap 6 snippets use theme-* colour roles for initials backgrounds and status rings, Bootstrap 5 snippets combine utilities like rounded-circle with a few lines of custom CSS, Tailwind CSS snippets rely on rounded-full, ring and negative spacing for groups, and pure CSS versions use a handful of classes. Filter by framework, copy the HTML and CSS, and replace the image URLs with your own.