Avatar

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.

Here is a basic avatar example.

To use an image in your org as an avatar, upload the image as a static resource in the Static Resources setup page. Import the image from the @salesforce/resourceUrl module and use it in the src attribute.

The src attribute resolves the relative path to an image, but sometimes the image path doesn't resolve correctly because the user is offline or the image has been deleted. To handle an invalid image path, you can provide fallback initials using the initials attribute or a fallback icon with the fallback-icon-name attribute. These attributes work together if both are specified.

If initials and fallback icon name are provided, the initials are displayed and the background color of the fallback icon is used as the background color for the initials. The fallback icon is displayed only when the image path is invalid and initials are not provided.

This example displays the initials "Sa" if the image path is invalid. The fallback icon "standard" provides the background color for the initials. The icon is one of the standard icons in Lightning Design System.

lightning-avatar implements the avatar blueprint in the Salesforce Lightning Design System (SLDS).

Although SLDS provides several categories of icons, only icons from the standard and custom categories can be used in lightning-avatar.

When applying SLDS classes or icons, check that they are available in the SLDS release tied to your org. The latest SLDS resources become available only when the new release is available in your org.

Use the variant attribute with one of these values to apply styling.

• square is the default variant, displaying a rectangle avatar with rounded corners
• circle displays a round avatar

This example creates a round avatar.

To apply additional styling, use the SLDS utility classes with the class attribute.

This example adds a margin around the avatar using an SLDS class. The fallback icon is displayed if the image path is invalid.

Component styling hooks use the --slds-c-* prefix and change styling for specific elements or properties of a component. Component-specific styling isn’t recommended, because it’s unsupported for SLDS 2, but existing customizations still work with the original SLDS. If you use component styling hooks, limit the components to SLDS themes until SLDS 2 and the Salesforce Cosmos theme become generally available. See Avatar: Styling Hooks Overview for documentation on component-specific hooks for this component.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

Use the alternative-text 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.