Avatar
头像
Aliases:头像用户头像圆形头像人员头像账号图片首字母头像名字前面的小圆图
What is it
A small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
Interactive playground
Try it. Make an informed choice.Compare individual, fallback and grouped avatars.
Loading lab…
What to look for
- 01Keep identity recognizable when an image is unavailable.
- 02Indicate additional group members with an overflow count.
✓ When to use
- A stable identity anchor (nav, comments, members)
- Fall back to initials on brand colours when no image exists
- Stacked avatars for teams or multiple owners
✕ When not to use
- Non-personal system objects — use an icon
- The image is the content — use a full image
- Rich personal info needed — use a profile page or card
Variants
Image
图片
An uploaded photo, cropped to fill
Initials
首字母
No-photo fallback; colour derived from the name
Stacked
叠加
Overlapping members plus an overflow count
Implementation
border-radius: 9999pxobject-fit: coverwidthheightCrop photos with object-fit: cover to avoid distortion; hash the name into a fixed palette so a person's initials colour stays stable; status dot absolute at bottom-right with a ring. Common size steps: 24/32/40/48px. Images need alt text; use aria-hidden or empty alt when purely decorative.
Platform API
<img>Related concepts
A small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsSimilarA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsSimilarAn identity-centered page answering "who is this, what do they have, what do they do": cover and avatar establish visual identity, name, bio and stats follow, and tabs switch between content streams like posts, works or articles. Visitors see follow/message actions; the owner sees edit entries — same structure, different actions.
PagesUsed with