Avatar
头像
A small round image that stands in for a person or an entity.
Live Demo
Actually clickableAn avatar always needs a fallback: initials → default icon.
What you just saw:The round portrait at the left of a chat list, the small circle next to a GitHub username, the avatar on every comment row.
What it actually is
An avatar lets users recognize who or what something is at a glance, without reading names. The fallback chain matters enormously: when the image fails to load, show the initials of the name (the surname for Chinese names), and when that fails too, show a generic person icon.
Anatomy · What it's made of
Image图片
Square source cropped to a circle
Fallback降级
Initials / default icon
Ring描边
Presence indicator or VIP marker
Size尺寸
xs 16 / sm 24 / md 32 / lg 40 / xl 64
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| You need to tell different people or entities apart | Yes |
| A list contains multiple people | Yes |
| You need to show who is currently signed in | Yes |
| There is only one person and no confusion is possible | Depends |
An avatar that fails to load and leaves a gray hole makes the page look broken — always have a fallback.
The avatar is not the tap target; the tap target should be the whole row or the name.
Similar Patterns
Don't mix these upAvatarCurrent
头像
A small round image that stands in for a person or an entity.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
In one line:A small round image that stands in for a person or an entity.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
Card
卡片
A rounded, bordered container that bundles one related piece of content — image, title, text — into a single self-contained unit.
Chip
标签
A small rounded pill holding a few words — sometimes selectable, sometimes purely a label.
How to tell AI
Three levels of promptAdd the component name and specifics
Add an avatar to every row in a list: a 28px circle that falls back to the initials of the name (the surname for Chinese names) when the image fails, and to a default person icon if that fails too. Online users get a green ring.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a user avatar.
Say this instead
Add avatars: a circle with object-fit: cover, an onError fallback chain of "initials (surname for Chinese names), then a default person icon", a background color hashed from the name, a white border plus a green ring for presence, and the real name as alt text.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.