Component · controls/content

Liquid glass avatar

Person or entity.

Also called profile picture, user badge

Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.
Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop. (light)
Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.
Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop. (dark)

Spec

Material
lens (for initials) or photo inside a lens rim
Profile
convex
Geometry
28–40 circles, gap 8; stacked groups overlap −8 only when flat
Bezel (px)
radius
Displacement (px)
≤ 0.4 × radius
Blur (px)
0

Anatomy

  • circle lens
  • photo or initials 12–13 semibold
  • crisp rim

States

  • rest
  • presence dot

Rules

  • Overlapping avatar stacks should be flat (no lens on lens).