avatar

An avatar component represents an object or entity

About Avatar

An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires .slds-avatar as the base class.

Base

<span class="slds-avatar">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>

Examples

Profile Icon

Person name

<span class="slds-avatar slds-avatar_profile-image-large">
  <span class="slds-assistive-text">Person name</span>
</span>

Group Icon

Group name

<span class="slds-avatar slds-avatar_group-image-large">
  <span class="slds-assistive-text">Group name</span>
</span>

Fallback User Icon

Description of icon when needed

<span class="slds-avatar slds-avatar_circle">
  <span class="slds-icon_container slds-icon-standard-user" title="Description of icon when needed">
    <svg class="slds-icon" aria-hidden="true">

Fallback Entity Icon

Description of icon when needed

<span class="slds-avatar">
  <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
    <svg class="slds-icon" aria-hidden="true">

Fallback User Initials

<span class="slds-avatar slds-avatar_circle">
  <abbr class="slds-avatar__initials slds-icon-standard-user" title="person name">AB</abbr>
</span>

Fallback Entity Initials

<span class="slds-avatar">
  <abbr class="slds-avatar__initials slds-icon-standard-account" title="Company name">Ac</abbr>
</span>

Fallback User Inverse

<span class="slds-avatar slds-avatar_circle">
  <abbr class="slds-avatar__initials slds-avatar__initials_inverse" title="Person name">AB</abbr>
</span>

Linked Avatar

<a href="javascript:void(0);">
  <span class="slds-avatar">
    <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />

Initials

If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback.

<span class="slds-avatar">
  <abbr class="slds-avatar__initials slds-icon-standard-account" title="company name">Ac</abbr>
</span>

Examples

Linked Avatar

<a href="javascript:void(0);">
  <span class="slds-avatar">
    <abbr class="slds-avatar__initials slds-icon-standard-account" title="company name">Ac</abbr>

Layout

Circle

Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the .slds-avatar_circle class. Four additional classes are available for sizing.

<span class="slds-avatar slds-avatar_circle">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>

Sizes

X-Small

<span class="slds-avatar slds-avatar_circle slds-avatar_x-small">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>

Small

<span class="slds-avatar slds-avatar_circle slds-avatar_small">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>

Medium

<span class="slds-avatar slds-avatar_circle slds-avatar_medium">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>

Large

<span class="slds-avatar slds-avatar_circle slds-avatar_large">
  <img alt="Person name" src="/assets/images/avatar2.jpg" title="Person name" />
</span>