UI components · Data display
Avatar
Also called: Profile picture, Profile photo, User avatar, Avatar group
A small round or rounded-square image that represents a person or account. Without an image, it shows the person's initials or a default icon.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstPut a 32px round user avatar in the top-right corner of the navbar. If there's a profile image, crop it centered. If not, show the user's initials in dark gray on a light gray background. Add an 8px dot at the bottom right for online status. Clicking the avatar opens a dropdown menu with "Profile" and "Sign out." If the image fails to load, fall back to the initials automatically.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Avatar is what you need.
Use Avatar when
- Next to comments, messages, chats, and similar content, where users need to see at a glance who posted it
- In the top-right corner of the navbar to represent the signed-in user and open the account menu
- Member lists, collaborator lists, and other places that show a group of people, where avatars can overlap as a group
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Showing a broken-image icon or an empty circle when there's no picture, instead of falling back to initials
- 02
Avatars of different sizes and shapes in the same list, some round and some square
- 03
Images not cropped to keep their proportions, so they get stretched or squashed into ovals
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A round or rounded-square container holding an image, initials, or a default icon. Can include an online status dot or a badge.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
An avatar is a small round or rounded-square image that represents a user, team member, or account. It often appears in the top-right corner of the navbar, on the left of comments and message lists, and in member lists. When a user hasn't uploaded a picture, it usually shows their initials or a default person icon, on a gray background or a color generated from the name.
Several avatars can overlap in a row to form an avatar group, with a count like "+5" when there are too many. A small dot at the bottom right of an avatar shows online status, and a red number at the top right shows unread messages. Both of these are uses of a badge.
The difference between an avatar and a regular image is purpose. An avatar only identifies "who this is," so it's small and cropped to a uniform circle. Content images like product photos or article illustrations should use an image component.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-avatar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-avatar.el-avatar[class*="MuiAvatar-root"].arco-avatar.t-avatar.n-avatar[data-slot="avatar"]img[alt*="avatar" i]img[alt*="头像"]img[class*="avatar" i]img[src*="avatar" i]img.rounded-circle
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026