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.

Lin LinM+5

Quick checkChoose the best answer

Several commenters have similar profile photos and some uploaded no photo. How can each author remain easy to identify?

Show only circular photos and put the full name in a hover tooltipUse initials for everyone and remove repeated names from the comment areaKeep the name beside the avatar and fall back to name initials when the image is missing

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 conversation
YReviewer name PublishedAuthorized comment content
Show a team or organization
LMK+5Collaborator count and display scope
Display a compact account control
MMaya LeeFrontend engineer · Shenzhen
Group several collaborators
LMKUse a name initial when no avatar is uploaded

When NOT to use it

Use the image as the only way to identify someone
ABCAn avatar without a name doesn’t identify the member
Stretch photos into the wrong aspect ratio
Cropping a landscape illustration into a circle cuts off both sides
Show broken images without a fallback
FaceA circular crop cuts off half the face in an ID photo
Use a decorative character where a real identity is required
MeMy profile
MeMy posts
On 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

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

Collaborators and access

Lin +5

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.