Avatar
A visual representation of a user's identity, often displayed as a small image or initials. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces.
Key Features
- Range wide of variants
Numerous variants are provided, offering the ability to customize Avatar by adding extra Status Dot and change Appearance, Emphasis or Shape.
Variants
![](/assets/images/option-1-86a56663933de9fb00c796fe27018b55.png)
The color, along with the initial, allows for a unique avatar that facilitates user identification.
Use an avatar for a more personalized touch.
According to your needs, you can choose the emphasis of the avatar so that it matches the interface well.
![](/assets/images/option-3-01e4b91c6889c3c63e12b53762cee640.png)
The different shapes give you the ability to better adapt to your design and maintain consistency.
![](/assets/images/option-4-9a43abcebede982f52acd8abfbc067c1.png)
Different avatar sizes allow the hierarchy in the layout to be maintained and the design to be adapted to the device and screen size.
![](/assets/images/option-5-45b1c9fa3d0cafb0d84727eb230c4603.png)
Three different appearances of the status dot allow the user to signify current status.
Property | Values | Default value |
---|---|---|
Appearance | Image, Blue, Green, Grey, Red, Orange, Raspberry, Magenta, Purple, Grape, Violet, Cyan, Teal, Aquamarine, Emerald | Image |
Emphasis | High, Low | Low |
Shape | Rounded, Square | Rounded |
Size | Large, Medium, Small, XSmall, 2XSmall | Large |
Status Dot | Yes / No | No |
Anatomy
![avatar anatomy](/assets/images/anatomy-132456176fb71c1908185153f1668f0d.png)
- Default type
- Avatar
- Status Dot
- Square type
- Avatar
- Status Dot
Best Practices
Rounded or Square
![](/assets/images/practice-1-do-0d17ee24db3bf3268bc6856e4a69eb5b.png)
Image undefined