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.

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">
      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>

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">
      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>

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="#">
  <span class="slds-avatar">
    <img alt="Person name" src="/assets/images/avatar2.jpg" title="User avatar" />
  </span>

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="#">
  <span class="slds-avatar">
    <abbr class="slds-avatar__initials slds-icon-standard-account" title="company name">Ac</abbr>
  </span>

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>

Styling Hooks Overview#

The component styling hooks in this table are compatible with Lightning UI, but they aren’t compatible with Enhanced Lightning UI.

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

Category	Styling Hook Name	Value Type(s)	Fallback Value
Color	`--slds-c-avatar-initials-inverse-text-color`	Color	30, #444444
	`--slds-c-avatar-initials-inverse-text-color-hover`	Color	30, #444444
	`--slds-c-avatar-initials-text-color`	Color
	`--slds-c-avatar-initials-text-color-hover`	Color	100, white
	`--slds-c-avatar-text-color`	Color	100, white
	`--slds-c-avatar-text-color-hover`	Color	currentColor
Radius	`--slds-c-avatar-radius-border`	Dimension	0.25rem

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-avatar`
Summary	Creates an avatar component
Support	dev-ready
Restrict	`div, span, a`
Variant	True

Selector	`.slds-avatar_group-image-small`
Summary	Uses the small group image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_group-image-medium`
Summary	Uses the medium group image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_group-image-large`
Summary	Uses the large group image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_profile-image-small`
Summary	Uses the small user avatar image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_profile-image-medium`
Summary	Uses the medium user avatar image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_profile-image-large`
Summary	Uses the large user avatar image as the avatar icon
Restrict	`.slds-avatar`

Selector	`.slds-avatar_x-small`
Summary	Size modifier for avatars - X-Small
Restrict	`.slds-avatar`
Modifier	True

Selector	`.slds-avatar_small`
Summary	Size modifier for avatars - Small
Restrict	`.slds-avatar`
Modifier	True

Selector	`.slds-avatar_medium`
Summary	Size modifier for avatars - Medium
Restrict	`.slds-avatar`
Modifier	True

Selector	`.slds-avatar_large`
Summary	Size modifier for avatars - Large
Restrict	`.slds-avatar`
Modifier	True

Selector	`.slds-avatar_circle`
Summary	Make avatar a circle
Restrict	`.slds-avatar`
Modifier	True

Selector	`.slds-avatar__initials`
Summary	Used for initials inside an avatar
Support	dev-ready
Restrict	`.slds-avatar abbr`
Variant	True

Selector	`.slds-avatar-grouped__initials`
Summary	Modifier for the initials Avatar in an Avatar Group
Restrict	`.slds-avatar__initials`
Modifier	True

Selector	`.slds-avatar__initials_inverse`
Summary	Used for initials that are dark text on light background
Restrict	`.slds-avatar__initials`
Modifier	True

Avatar Release Notes

2.19

Fixed

Fixed base group image, group image medium and group image small hardcoded image paths

2.17.0

Added

Added slds as the default namespace with sds fallbacks for Styling Hooks
Added CSS Custom Property reassignments for variants

2.13.3

Changed

Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. --sds-c-avatar-initials-color-text => --sds-c-avatar-initials-text-color.

2.13.0

Added

Enabled styling hooks for avatar. See avatar's styling hooks overview table for a full listing of the currently available hooks.

2.7.0

Changed

Changed HTML so the Avatar component can be slotted inside of an href vs being the href element

Sections

About Avatar#

Examples#

Profile Icon#

Group Icon#

Fallback User Icon#

Fallback Entity Icon#

Fallback User Initials#

Fallback Entity Initials#

Fallback User Inverse#

Linked Avatar#

Initials#

Examples#

Linked Avatar#

Layout#

Circle#

Sizes#

X-Small#

Small#

Medium#

Large#

Styling Hooks Overview#

Overview of CSS Classes#

What are these categories?

Avatar Release Notes

2.19

Fixed

2.17.0

Added

2.13.3

Changed

2.13.0

Added

2.7.0

Changed