---
schema_version: "1"
id: 189312df01d2059e6b7c36aaf177e9762f4be19d7dca2c5aa90c94f525a2fd03
title: Avatar
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/avatar/lightning-avatar.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-avatar.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 550ec1b18e99e506e496cdc23b2eb652300a277c33a5b873d38bdaac0378abc9
products:
  - Lightning Component Reference
---

# Avatar

**`lightning-avatar`**

A visual representation of an object.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="avatar" model="lwc" namespace="lightning"}


:::::

:::::tab

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’s a basic avatar example.

<!-- prettier-ignore-start -->
```html
<lightning-avatar src="/images/codey.jpg" alternative-text="Codey Bear">
</lightning-avatar>
```
<!-- prettier-ignore-end -->

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](https://developer.salesforce.com/docs/platform/lwc/guide/create-resources.html) and use it in the `src` attribute.

## Design

`lightning-avatar` implements the avatar blueprint in the Salesforce Lightning Design System (SLDS). The avatar adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Avatar](https://v1.lightningdesignsystem.com/components/avatar/)                                                                     | [Avatar](https://www.lightningdesignsystem.com/components/avatar/)                                              |
| **For Use In** | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Handle Invalid Image Paths

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 by 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 shown and the
background color of the fallback icon is used as the background color for the initials.
The fallback icon is shown only when the image path is invalid and initials aren’t provided.

This example shows the initials "Sa" if the image path is invalid. The fallback icon
"standard:account" provides the background color for the initials. The icon is one of the
[standard icons](https://v1.lightningdesignsystem.com/icons/#standard)
in SLDS.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-avatar
        src="/bad/image/url.jpg"
        initials="Sa"
        fallback-icon-name="standard:account"
        alternative-text="Salesforce"
    >
    </lightning-avatar>
</template>
```
<!-- prettier-ignore-end -->

## Component Styling

Use a combination of icons, variants, and utility classes to style your avatars.

### Icons

Although SLDS provides several categories of icons, only icons from the [standard](https://v1.lightningdesignsystem.com/icons/#standard) and [custom](https://v1.lightningdesignsystem.com/icons/#custom) categories can be used in `lightning-avatar`.

**note:** When applying SLDS classes or icons, check that they’re
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.

### Variants

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-avatar
        variant="circle"
        src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg"
        fallback-icon-name="standard:person_account"
        alternative-text="Amy Smith"
    ></lightning-avatar>
</template>
```
<!-- prettier-ignore-end -->

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) 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.

<!-- prettier-ignore-start -->
```html
<lightning-avatar
    variant="circle"
    src="https://v1.lightningdesignsystem.com/assets/images/avatar2.jpg"
    fallback-icon-name="standard:person_account"
    alternative-text="Account Name"
    class="slds-m-around_small"
>
</lightning-avatar>
```
<!-- prettier-ignore-end -->

### Styling Hooks

Component styling hooks provide CSS custom properties that use the `--slds-c-*` prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the [SLDS 1 component blueprints](https://v1.lightningdesignsystem.com/components/overview/) for available component styling hooks.

For more information, see [Style Components Using Lightning Design System Styling Hooks](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-custom-properties) in the Lightning Web Components Developer Guide.


## Accessibility

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.


:::::

:::::tab
::component-specification{component="avatar" model="lwc" namespace="lightning"}

:::::

::::::