diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 0ccb298b..61b3f571 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -7,14 +7,14 @@ Avatars are used to represent a person or object.
Like [images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), you should always provide `alt` text for avatars as alternate text for assistive devices.
```html preview
-
+
```
```jsx react
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
+
);
```
@@ -27,7 +27,7 @@ To use an image for the avatar, set the `image` and `alt` attributes. This will
```html preview
```
@@ -37,7 +37,7 @@ import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
);
```
@@ -47,14 +47,14 @@ const App = () => (
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
```html preview
-
+
```
```jsx react
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
const App = () => (
-
+
);
```
@@ -63,15 +63,15 @@ const App = () => (
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
```html preview
-
+
-
+
-
+
```
@@ -81,15 +81,15 @@ import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
-
+
-
+
-
+
@@ -101,9 +101,9 @@ const App = () => (
Avatars can be shaped using the `shape` attribute.
```html preview
-
-
-
+
+
+
```
```jsx react
@@ -111,9 +111,9 @@ import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
-
-
-
+
+
+
);
```
@@ -126,22 +126,22 @@ You can group avatars with a few lines of CSS.
@@ -174,22 +174,22 @@ const App = () => (