'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'38'%20r%3D'17'%20fill%3D'%23ffffff'%20fill-opacity%3D'0.65'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'96'%20r%3D'36'%20fill%3D'%23ffffff'%20fill-opacity%3D'0.65'%2F%3E%3C%2Fsvg%3E)
image
Design Systemv1.0COMPONENTS · AVATAR
DESCRIPTION
An avatar is a visual representation of a user or entity, typically displayed as an image, illustration, or initials.
PLAYGROUND MODE
Avatars come in three forms, each with a purpose: Image Avatars, Text Avatars, and Placeholder Avatars.
TYPES
imageSIZE
Avatars start at 16 px and grow by 4 px steps up to 32 px. Then, they increase by 8 px steps up to 48 px.
TOKENS & TYPOGRAPHY
COMPONENT STRUCTURE