2. Components
3. Avatar

Avatar

An avatar is a visual representation of a user or entity. It helps personalize interactions, making user interfaces more engaging and recognizable. Avatars can display initials, images, or both, ensuring identification even when an image is unavailable.

Usage

Avatars are commonly used in:

• User profiles – Displaying a user's identity in comments, dashboards, or account settings.
• Team lists & messaging – Identifying participants in discussions.
• Navigation & dropdowns – Representing users or entities in UI elements like menus.

Default (Initials Only)

When an avatar image is unavailable or not specified, initials are displayed as a fallback.

<span class="avatar">
	<span class="avatar__initials">AS</span>
</span>

Best for: Ensuring a user or entity is still represented even if no image is available.

Avatar with Source (Image + Initials)

When a profile image is provided, it is displayed above the initials, ensuring a consistent backup in case of image loading errors.

AS

<span class="avatar">
	<span class="avatar__initials">AS</span>
	<span class="avatar__img">
		<img src="images/avatar.png">
	</span>
</span>

Best for: User profiles, personalized dashboards, and team collaborations.

Size: Small (40px)

Small avatars are ideal for compact spaces like:

• Text fields
• Dropdown menus
• Notification indicators

AS

<span class="avatar avatar--s">...</span>

Size: Large (Profile & Entity Representation)

Large avatars are prominent and visually distinct, often used for:

• Profile headers in user account settings
• Main entity identifiers (e.g., Jira projects, Confluence spaces)

AS

<span class="avatar avatar--l">...</span>

Best Practices

• Fallback Handling – Always include initials for cases where images fail to load.
• Context-Appropriate Sizing – Use small avatars for inline interactions and large avatars for profile representations.
• Consistent Shape – Maintain circular avatars for users and square avatars for entities.

Using avatars helps create a recognizable and user-friendly experience across all interfaces. Try implementing different sizes and sources to best fit your design needs!