Avatar
A visual representation of a user, typically a circular image or initials placeholder.
Plain English
Avatars attach a face to an action or piece of content — "Sarah commented", "Assigned to Tom." They make interfaces feel human. The design challenge: what to show when there is no image. The best fallback is the user's initials on a generated background colour. The background colour should be consistent per user (derived from their name or ID), so the avatar is always the same colour and recognisable.
Technical
Circle: border-radius: 50% or border-radius: 999px, overflow: hidden, aspect-ratio: 1. Sizes: 24px (inline list), 32px (compact), 40px (standard), 48px (profile), 64px+ (profile header). Image: use <img> with object-fit: cover, or background-image. Fallback: CSS with initials centred (display: flex, align-items: center, justify-content: center, font-weight: 600, colour derived from name hash). Avatar group (stacked): negative margin on adjacent avatars, white border ring via box-shadow: 0 0 0 2px white. Status indicator: 8px dot, position: absolute bottom-right, appropriate colour.
Live Demo
Single
Group
Online
Sizes
Avatars need image fallbacks (initials). Group stacks: max 5 visible, then +N count.
Usage
✓ Good usage
A 40px circular avatar with a photo, falling back to the user's initials on a consistent generated background when no photo is set.
✗ Bad usage
A different coloured initials placeholder every time the page loads — users rely on consistent colours to recognise each other at a glance.
Recommended values
- 24px — small inline contexts
- 32px — compact lists, comments
- 40px — standard profile, nav
- 48px — profile cards
- 64-80px — profile page header
- Initials fallback: 2 letters max, consistent generated background
Common mistakes
- No image fallback — shows a broken image icon when the photo URL fails.
- Inconsistent fallback background colour — regenerated randomly each load.
- Non-square source images that distort — always object-fit: cover.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Circular avatars (border-radius: 50%). Default size 40px. Image: object-fit: cover. Fallback: 2-letter initials, 600 weight, colour generated from user ID hash (consistent per user). Status dot: 10px, absolute bottom-right, white ring (box-shadow: 0 0 0 2px white).