What goes in the circle when there is no photo?

Initials from the person's name, usually two letters. Keep them short and legible at the smallest size you ship. A single letter works for very small avatars, around 24px, where two letters crowd the ring.

How small can an avatar get?

Past about 24px, initials stop reading and photos lose detail. At that size, a single letter or a generic person icon is more honest than a blurred face. Most products keep the working minimum at 32px for lists and 40px when the avatar is the main identity on a profile header.

Should avatars be clickable?

Only when clicking opens something about that person: a profile, a message thread, an assignment panel. A face beside a name in a static table header should stay inert. If the whole row is the link, the avatar does not need its own hit target.

Avatar or badge for online status?

A small dot on the avatar ring is the usual pattern for presence. A separate badge in the row works when status needs a word, like Away or On call. Colour alone fails WCAG 1.4.1, so pair the dot with position on the avatar or a text label nearby.

How many faces in a group stack?

Three or four overlapping circles, then a +N count circle for the rest. Past four faces the stack reads as noise and the count is easier to parse. Gmail and Slack both cap the visible stack and put the remainder in the count.

Do avatars need alt text?

When the photo is decorative beside a visible name, an empty alt is correct and the name in text carries the meaning. When the avatar is the only label, like a rail of faces with no names, each image needs alt text with the person's name.

Avatar

An avatar shows a person in a circle, with initials when the photo is missing. It answers who, which is different from what an icon or a badge does.

Structure and navigationBuild difficulty: Easy<img alt="">

Also called Profile picture, User image, Headshot.

Murat Bayral

Design lead

Photo loaded from the profile.

Pick someone in the group: the large avatar updates. Lena's photo is missing, so initials fill in. Tab through the row and use Space to select.

For designers

An avatar is the fastest way to say a human is involved. The circle shape is convention enough that a photo or initials inside it reads as a person before anyone reads the name beside it. That is why comment threads, assignee pickers and account menus reach for avatars first.

The cost is maintenance. Every person needs a photo policy, a fallback rule for missing images, and a decision about what happens when someone has not uploaded anything yet. A row of grey initials is fine on day one and looks neglected by month three if nobody ever adds photos.

Slack and Gmail both default to initials until someone uploads a photo. The fallback is part of the identity system, not a loading state. Plan for it in brand guidelines: background tone, letter case, maximum length.

Use an avatar when

A row or card needs to show who wrote, owns or is assigned to something
People in the product have profile photos, or initials everyone recognises
Several people share one object and you need a compact stack of faces

Reach for something else when

The circle only marks a category or a status, with no person behind it. Use a badge instead.
The graphic is a product, a file type or a generic symbol. Use an icon in a card instead.
The whole row is tappable and the face is decoration on a link. Use a list row instead.

Variants

Sizes

SML

Group

MBLCSO

With badge

Three sizes, a stacked group with a count, and a badge for presence. The badge is the one orange mark in this view.

Sizes. Small for dense lists, default for rows, large for profile headers. Pick one scale per surface and keep it.

Group. Overlapping circles with a +N count for everyone past the visible stack. Common on shared documents and project cards.

Badge. A dot or icon on the ring for presence or a role. Keep it small so the face stays readable.

How to build an avatar

Start with an image when you have a URL, and a text fallback when the image fails or is missing. The fallback sits in the same circle so the layout does not jump when the photo loads.

<span class="avatar">
  <img src="/photos/lena.jpg" alt="">
  <span class="avatar-fallback" hidden>LC</span>
</span>

Hide the fallback in CSS until the image errors or is absent, then show initials instead. Give the circle a fixed width and height so a late-loading photo does not resize the row. For a stack, wrap several avatars in a group container with negative horizontal margin on each ring so they overlap cleanly.

Tab order follows the interactive elements around the avatar. If the face itself is a button, it needs a visible focus ring (WCAG 2.4.7) and an accessible name, usually the person's name rather than "avatar". A decorative face beside visible text should not be focusable on its own.

Gravatar-style services can supply photos by email hash. When you use them, still ship a local fallback for offline admin tools and for people without Gravatar accounts. The circle should never show a broken image icon in production.

Edge cases

Broken image URLs. The fallback must appear without a flash of broken-icon chrome. Test with a bad URL, not only with an empty src.

Long names in initials. Two letters from first and last name is the default. For mononyms or single-word handles, one letter is enough.

Reduced motion. A photo swap on load can fade. Under prefers-reduced-motion: reduce, cut the fade and show the fallback immediately when the image fails.

Common questions

What goes in the circle when there is no photo?: Initials from the person's name, usually two letters. Keep them short and legible at the smallest size you ship. A single letter works for very small avatars, around 24px, where two letters crowd the ring.
How small can an avatar get?: Past about 24px, initials stop reading and photos lose detail. At that size, a single letter or a generic person icon is more honest than a blurred face. Most products keep the working minimum at 32px for lists and 40px when the avatar is the main identity on a profile header.
Should avatars be clickable?: Only when clicking opens something about that person: a profile, a message thread, an assignment panel. A face beside a name in a static table header should stay inert. If the whole row is the link, the avatar does not need its own hit target.
Avatar or badge for online status?: A small dot on the avatar ring is the usual pattern for presence. A separate badge in the row works when status needs a word, like Away or On call. Colour alone fails WCAG 1.4.1, so pair the dot with position on the avatar or a text label nearby.
How many faces in a group stack?: Three or four overlapping circles, then a +N count circle for the rest. Past four faces the stack reads as noise and the count is easier to parse. Gmail and Slack both cap the visible stack and put the remainder in the count.
Do avatars need alt text?: When the photo is decorative beside a visible name, an empty alt is correct and the name in text carries the meaning. When the avatar is the only label, like a rail of faces with no names, each image needs alt text with the person's name.

Last reviewed 26 AUG 2026