For recognizing people or groups
Profile pictures should not be the only way to identify a user.
Avatar Design system
Show identity and provide controlled photo updates.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
For recognizing people or groups
The member list displays both the avatar and the name "Linh Nguyen".
Variants and use cases
Avatar shape
Choose a consistent shape for the same object type and keep important image areas when cropping.
Try edge-to-edge portraits and horizontal logos; Do not cut off the part that helps recognize the object.
Example User has circular photo; The organization has a square frame with rounded corners.
Size scale
Define avatar sizes for lists, comments and profiles rather than resizing them arbitrarily on each screen.
Compare avatars in compact rows and profile headers; small images must not unexpectedly increase row height.
Example Lists use 32px, profiles use 80px with the same cropping method.
Status indicator
Place the status next to the image and add the status name so users don't have to guess the color.
Check light and dark themes and a view without color; the online status must remain understandable.
Example The green dot labeled “Online” in the user information.
Missing image
Preserve size and identity when image URLs are incorrect, missing, or loading.
Block the image request. The row must stay in place and the person must remain identifiable.
Example If the account image fails, show the initials AN for Anh Nguyen.
AN
Fallback image