diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index c4ad4de7..02237999 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -19,12 +19,18 @@ const App = () => ;
### Images
To use an image for the avatar, set the `image` and `label` attributes. This will take priority and be shown over initials and icons.
+To lazy load an image you can use the `loading` attribute and set it to `lazy`.
```html preview
+
```
```jsx react
@@ -35,6 +41,11 @@ const App = () => (
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a gray tabby kitten looking down"
/>
+
);
```
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 8c07029a..018e9718 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -39,6 +39,9 @@ export default class SlAvatar extends ShoelaceElement {
/** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
@property() initials = '';
+ /** Indicates how the browser should load the image. */
+ @property() loading: 'eager' | 'lazy' = 'eager';
+
/** The shape of the avatar. */
@property({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';
@@ -76,6 +79,7 @@ export default class SlAvatar extends ShoelaceElement {
part="image"
class="avatar__image"
src="${this.image}"
+ loading="${this.loading}"
alt=""
@error="${() => (this.hasError = true)}"
/>