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.
When to use it
- Identify a person in a conversation
- Show a team or organization
- Display a compact account control
- Group several collaborators
When NOT to use it
- Use the image as the only way to identify someone
- Stretch photos into the wrong aspect ratio
- Show broken images without a fallback
- Use a decorative character where a real identity is required
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