lightning:avatar

A visual representation of an object.

A lightning:avatar component is an image that represents an object, such as an account or user. By default, the image renders in medium sizing with a rounded rectangle, which is also known as the square variant.

This component inherits styling from avatars in the Lightning Design System.

Use the class attribute to apply additional styling.

Here is an example.

<aura:component>
    <lightning:avatar src="/images/codey.jpg" alternativeText="Codey Bear"/>
</aura:component>
Handling Invalid Image Paths

The src attribute resolves the relative path to an image, but sometimes the image path doesn't resolve correctly because the app is offline or the image has been deleted. To handle an invalid image path, you can provide fallback initials using the initials attribute. This example displays the initials "Sa" if the image path is invalid.

<lightning:avatar src="/bad/image/url.jpg" initials="Sa" 
      fallbackIconName="standard:account" alternativeText="Salesforce"/>

In the previous example, the fallback icon "standard:account" is displayed if initials are not provided.

Accessibility

Use the alternativeText attribute to describe the avatar, such as a user's initials or name. This description provides the value for the alt attribute in the img HTML tag.

Attributes

Attribute Name Attribute Type Description Required?
alternativeText String The alternative text used to describe the avatar, which is displayed as hover text on the image. Yes
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
fallbackIconName String The Lightning Design System name of the icon used as a fallback when the image fails to load. The initials fallback relies on this for its background color. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed. Only icons from the standard and custom categories are allowed.
initials String 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.
size String The size of the avatar. Valid values are x-small, small, medium, and large. This value defaults to medium.
src String The URL for the image. Yes
variant String The variant changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.