Avatar

Gives a user an option to assign pictures or default to their initials. For a business with multiple users it can be a useful identifier.

Anatomy

1. Avatar with image
2. Avatar with text

Example

Coded examples

Image avatar

Text avatar

Code snippet

										
<div class="avatar avatar-image">
  <img src="assets/example-avatar.png" alt="Example avatar image">
</div>
<div class="avatar avatar-text">
  AB
</div>
        
									

										
None required
        
									

Figma prototype

Usage guide

Dos and don'ts