Avatar

Preview

A user or an entity, always circular, here as Type Photo at 6xl with a presence dot. The set ships twelve named portraits.

The disc behind initials and the symbol takes a hue from the person's name, the bottom badge has ten types, and Avatar group is a set of its own. Each has a section below.

Source: the Avatar page of the Appetite UI Figma file, read on October 2, 2026.

Which sizes does Avatar come in?

Avatar has nine sizes, from 20 to 80, and the disc is the only thing the axis sets. The acronym ramp follows it, and so does the badge box, which is why the two smallest sizes have almost no room left for one.

The badge box per size is 32, 28, 28, 24, 20, 18, 16, 12 and 12. At base and sm the box is 12, half the disc or more, so leave the badge off there.

Two initials run down to xl, at 16/24. From lg the file prints one, 14 over a 32 disc and 12 at base and sm.

Which types does Avatar have?

Avatar has three ways to fill the disc: Photo takes an image, and Symbol and Acronym are the fallbacks. Both fallbacks sit on a pale disc, so a list of users keeps its rhythm when one of them has no picture.

The symbol is two white ellipses clipped by the disc: a head at 40 percent of the disc and a body 80 by 60 percent, which scale with the circle. The photo is cropped the same way, by percentage, so one rule serves all nine sizes.

The disc follows the Avatar name, and the twelve names share six hues, two names each. Gray is Erik Holmberg and Matteo Ribeiro, blue Maren Lindqvist and Sora Tanaka, sky Kai Andersen and Idris Yılmaz, purple Priya Sharma and Inés Cardoso, red Noemi Varga and Amara Diallo, yellow Leila Okonkwo and Zora Petrović.

The default name is Maren Lindqvist, so the default disc is blue with the initials ML. The disc is colors/hue/200 and the initials colors/hue/900, the same in light and dark.

Which status badges can an Avatar show?

Avatar has two independent status booleans, Top for an action or a verification and Bottom for presence or an activity. Both badges wear a ring in the surface color so they read against any photo.

Only Verified breaks the circle: it is an eight point seal, one rounded square over the same square turned 45 degrees. The top and presence badges carry dropShadow/xs, and the activity badges carry none.

The presence row runs on the photo, where the ring keeps a green dot on a light shoulder readable. Presence is color alone, so say it in text as well, for example in the row label.

Bottom Status has ten types. Online, Offline, Busy and Away are presence dots, and Comment, Mention, Assigned, Completed, Due and Add are activity icons for inbox rows.

An activity icon is white on a state color: information, feature, away, success, highlighted and brand. It fills its box, so it is larger than a presence dot on the same avatar.

Add is for the person's own entry, such as the You avatar in a story row.

How do I show several people at once?

Use Avatar group, an overlapping stack for shared context: the people in a project, a chat or a booking. Cap it at five and then show the number.

Avatar group is its own set with Size xs, md and lg. It stacks Photo avatars at base, lg and xl, overlapping them by 4, 6 and 8, each with dropShadow/xs and an outside stroke in border/white-0 of 1, 2 and 2 so the edge of the avatar in front stays clean.

A circle of the same size in bg/soft-100 carries the count in text/soft-500, at a stroke of 1 in every size. The set draws twelve, ten and eight avatars before its +5, so hide the layers past the fifth to keep the cap.

Properties

Three variant axes make the Avatar set 324 variants wide, and two booleans switch the badges on. The status badges and the group are their own sets.

The status sets are internal building blocks of Avatar. Switch a badge on with the two booleans and change its type on the nested instance.

Tokens

Every value the component reads, resolved through its aliases to the primitive underneath.

The disc hues are primitives, so they hold the same two values in dark as in light, and everything else on the component switches. Radius is dimensions/radius/full on the disc and on every badge.

How does Avatar differ on iOS and Material 3?

Neither platform ships an avatar component. Appetite UI Avatar is one circle in nine sizes with six fallback hues, status badges at the top and bottom and a stack, and the file draws no iOS or Material 3 counterpart.

An avatar that opens a profile is a tap target, and at sm (20) and base (24) it is far under the minimum of 44 pt on iOS and 48 dp on Android, the value of platform/min-touch-target in the Platform collection. Extend the hit area, not the picture.

How should I use status badges?

Use one badge at a time, presence at the bottom and an action or a mark at the top.

Give a photo avatar the person's name as its text alternative, and leave the alternative empty when the name is printed right beside it. A badge that is only a color, such as Online or Busy, needs the same words somewhere in text.