Avatar

An avatar is a visual representation of an entity, such as a user or an organization.

UsageCodeAccessibility
Class: 1B

Photos by Xia Yang and Toa Heftiba

  <sl-avatar 
    display-name="Anna Jenssen" 
    picture-url="/images/avatar.jpg" 
    size="3xl" 
    orientation="vertical"></sl-avatar>

  <sl-avatar 
    display-name="Tim Jenssen" 
    picture-url="/images/avatar.jpg"  
    size="xl" 
    status="success">Class: 1B</sl-avatar>

When to use

User profiles

Avatars are commonly used to display user profile pictures. Avatars provide a face to a name. When users see their own profile picture, it fosters a sense of ownership and personal connection.

People representation

In the context of contact lists, avatars serve as visual cues that swiftly connect users to their contacts. By associating a face or image with each entry, avatars make the list more relatable and memorable. Whether it’s a colleague, student, or teacher, avatars provide that instant recognition, making interactions more personal and efficient.

When not to use

Intrusive Design

Don’t let avatars distract from essential content. Ensure they enhance, rather than hinder, usability.

Anatomy

ItemNameDescriptionOptional
1AvatarThe avatar is available in three variants: image, initials or iconNo
2BadgeStatus of user or entityYes
3NameDiplays the name of the user or entityYes
4DescriptionDescription is used to show essential information of user or entity which is related to the context of the pageYes

Options

With these options, you can tweak the appearance of the avatar in Figma. They are available in the Design Panel so you can compose the avatar to exactly fit the user experience need for the use case you are working on.

Avatar

ItemOptionsDescription
Sizesm md lg xl 2xl 3xlThe avatar come in six sizes: sm, md, large, xl, 2xl and 3xl providing flexibility to align with your design requirements.
Orientationhorizontal verticalThe avatar has two different lay-out possibilities relating to the positions of the avatar, name and description relative to each other.
Typeinitials photo placeholderChoose if you want to show a photo, a placeholder (icon) or initials in the avatar

Badge

ItemOptionsDescription
BadgebooleanTo indicate if the badge is enabled or disabled
Typesalpha numeric icon emptyChoose how you want to visualize the status within the badge
Backgrounddanger warning success accent grey primaryTo visualize the status color of the badge

Name and Description

ItemOptionsDescription
HeaderbooleanTo show the name of the user or entity
HeadervalueTo insert the name of the user or entity
SubheaderbooleanTo show the description of the user or entity
SubheadervalueTo insert the description of the user or entity
Interactive example