Figma user avatar components and placeholders

Avatars are how a product acknowledges that people are in it. They sit in navigation bars, comment threads, assignee columns, dashboards, and share dialogs, and because they appear everywhere, small inconsistencies multiply fast.

The avatar components above bring the sizes, fallbacks, and status indicators into one system so every face in your product behaves the same way.

Six sizes and a fallback chain

The avatar comes in six sizes from xs to 2xl, starting at 24px and stepping through 32px and 40px on the way up, with an optional contrast border for photos that blend into their background.

More important than the sizes is the fallback chain, because real products never have a photo for everyone. The order is: photo if you have one, the user's initials if you don't, and a neutral icon when there's no name to abbreviate. All three exist here as variants, so designing with realistic data is a property flip rather than an excuse.

Initials, done properly, also solve the contrast problem: the background color comes from the system palette rather than a random hash, so a wall of photo-less users still looks designed rather than accidental.

Status without a word: dots, ticks, and counts

A separate status icon component overlays the avatar with the signals products actually use: an online or offline dot, a verified tick, or a small count. The status dot on an avatar is one of the few places where a color-only indicator is acceptable, because the position and presence of the dot itself carries the meaning.

Company logo shapes are covered too, with square and portrait variations alongside the default circle, which keeps org avatars from looking like oddly cropped people. Status indicators scale with the avatar size too, so an online dot on an xs avatar doesn't swallow a quarter of the circle.

Groups, stacks, and label rows

Three composed components save the most time. The avatar group stacks overlapping avatars with an overflow counter, the pattern every project header uses to say "these five people and 12 others". An add button variant with default, hover, focus, and disabled states turns the stack into an invite affordance.

And the label group pairs an avatar with a name and supporting text line, which is the anatomy of every assignee row, comment header, and profile menu trigger you'll ever design.

Real photos, and what to do without them

Swapping in a real photo is an image fill on the avatar's placeholder shape, and doing it on the instance keeps the component intact. If you need convincing humans before you have real users, Untitled UI ships 370+ free placeholder avatar photos made for exactly this.

One habit worth keeping from the W3C's alt text decision tree: when an avatar appears next to the person's visible name, it's decorative and gets empty alt text; when the avatar is the only identification, it needs the name as its alt. Note it in your handoff and your developers will thank you.

When it's time to build, the same avatars exist in code. Untitled UI React avatars are open source, built with Tailwind CSS, and mirror these Figma components, including the initials and icon fallback chain.