# Avatar

An avatar represents a user, entity, or object. It is typically displayed as an image, initials, or icon, and helps identify ownership, participation, or presence in the interface.


## Overview

### Usage

Use an avatar when you need to represent a user, such as in lists, messages, or account-related contexts. It provides quick visual recognition and helps users understand who is involved in a specific action or piece of content. Avatars are especially useful in collaborative or communication-heavy interfaces where multiple people are present.

### Variants

The avatar comes in two shapes:

- **Circular**  
Used in more prominent or personal contexts, such as the top header or profile-related areas.
- **Squared**  
Used to represent products, accounts, or organizations. This includes cases like specific account types, funds, or company logos.



### Sizes

The avatar is available in four sizes:

- **XS**
- **S**
- **M** 
- **L**



### Grouped avatars

Avatars can be grouped to represent multiple users, for example in shared ownership or collaborative contexts. The avatars are displayed in a horizontal stack with a slight overlap to save space and create a cohesive visual unit.

To maintain clarity, a maximum of three avatars should be visible at the same time. If more users are included, the remaining count is shown as a “+X” indicator, such as “+2”.