Avatar
You might say
Show an avatar in the comments so people can see who's speaking.
Represent a person, team, or organization visuallyAn avatar may be a photo, initials, illustration, or logo; it does not have to be a circular face. Member lists and comments should usually show a name as well, because an image alone is not a reliable identity.
You can say this to an AI Agent
Always show each comment author's avatar and name. Fall back to name initials when the image is missing or fails, but never hide the name. Test duplicate initials, similar photos, and very long names for clear identification.
When to use it
- Identify a person in a conversationYReviewer name PublishedAuthorized comment content
- Show a team or organizationLMK+5Collaborator count and display scope
- Display a compact account controlMMaya LeeFrontend engineer · Shenzhen
- Group several collaboratorsLMKUse a name initial when no avatar is uploaded
When NOT to use it
- Use the image as the only way to identify someoneABCAn avatar without a name doesn’t identify the member
- Stretch photos into the wrong aspect ratioCropping a landscape illustration into a circle cuts off both sides
- Show broken images without a fallbackFaceA circular crop cuts off half the face in an ID photo
- Use a decorative character where a real identity is requiredMeMy profileMeMy postsOn one person’s page, their face appears four times
Anatomy
A round or square container
A user photo, or initials by default
Optional, indicates online/offline
Variants
Circle
Default shape that represents real users
Square
Represents non-personal objects such as teams and applications
Sizes
MMM
Match the avatar size to its context—for example, use a larger avatar on a profile page and a smaller one beside a comment.
Group
A+5
Show the range of participants and provide access to the complete list
Typical use cases
Comment thread
All comments (2)
Alex Chen 2 minutes ago
Example of comment content
M
Maya Lee 1 hour ago
Example of comment content
Team list
Alex Chenyou@example.com
Owner
M
Maya Leeayou@example.com
Member
Build a botbot@example.com
Member
Account menu
Alex Chen
Characters and public information
12Works
348Fans
56Follow
Collaborator group
VibeHub Product Brief
Lin
+5
Collaborators and access
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check