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.

Get Tetrisly for Figma

Install Tetrisly for React

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

Appearance

The color, along with the initial, allows for a unique avatar that facilitates user identification.

Use an avatar for a more personalized touch.

Emphasis

According to your needs, you can choose the emphasis of the avatar so that it matches the interface well.

Shape

The different shapes give you the ability to better adapt to your design and maintain consistency.

Size

Different avatar sizes allow the hierarchy in the layout to be maintained and the design to be adapted to the device and screen size.

Status Dot

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

1. Default type
   1. Avatar
   2. Status Dot
2. Square type
   1. Avatar
   2. Status Dot

Best Practices

Avatars allow users to express their individuality and create a sense of personal identity within a digital platform. They provide users with a visual representation that can enhance engagement and make the user experience more enjoyable.

Rounded or Square

Most commonly, rounded avatars are used for representing humans, and square avatars are used for non-humans such as bots, organizations, or companies.

Do

Image undefined

If it is not possible to use a user's photo, do not replace it with random photos or gendered placeholder avatars. Use initials or generic avatars (badges, animals, brand colors, or symbols).

Do

Don't