Avatars
A small round picture that stands for a person or an account. It shows a photo when there is one, initials when there is not, and a neutral placeholder when there is neither.
Preview
onlineMaya Chenonline
awayOmar Haddadaway
offlineLina Parkoffline
When to use
- Beside a name in lists, comments, mentions and account menus, so people are recognised at a glance.
- With a status dot, where presence matters: online, away, busy.
Reach for something else
- For several people at once: that is an Avatar Group or an Avatar Compact Group.
Anatomy
- 1
Frame
A circle at a fixed size; the image or initials are clipped to it.
- 2
Image
Cropped to cover, never stretched.
- 3
Initials
One or two letters on a soft tint, when there is no image.
- 4
Placeholder
A generic person glyph, when there is no image and no name.
- 5
Status dot
Optional, at the lower right, with a white ring to lift it off the image.
States
Image
The person's photo.
Initials
Falls back to letters if the image is missing or fails to load.
Placeholder
Nothing is known about the person yet.
With status
Online in green, away in amber, offline in grey.
Accessibility
- An image avatar has alt text naming the person; beside a visible name, it is decorative and takes alt="".
- Initials are hidden from assistive tech when the full name is already on screen.
- The status is never colour alone: it carries a text label, such as "Online", for screen readers.
Source
The Avatars is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
See it in a block