diff --git a/docs/data/material/components/avatars/Spacing.js b/docs/data/material/components/avatars/Spacing.js
new file mode 100644
index 00000000000000..c0aebda531a9cf
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx b/docs/data/material/components/avatars/Spacing.tsx
new file mode 100644
index 00000000000000..c0aebda531a9cf
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx.preview b/docs/data/material/components/avatars/Spacing.tsx.preview
new file mode 100644
index 00000000000000..557dd187523778
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.tsx.preview
@@ -0,0 +1,15 @@
+<AvatarGroup spacing="medium">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing="small">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing={24}>
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md
index 08362acff64506..1901658a04164e 100644
--- a/docs/data/material/components/avatars/avatars.md
+++ b/docs/data/material/components/avatars/avatars.md
@@ -77,6 +77,12 @@ The `renderSurplus` prop is useful when you need to render the surplus based on
 
 {{"demo": "CustomSurplusAvatars.js"}}
 
+### Spacing
+
+You can change the spacing between avatars using the `spacing` prop. You can use one of the presets (`"medium"`, the default, or `"small"`) or set a custom numeric value.
+
+{{"demo": "Spacing.js"}}
+
 ## With badge
 
 {{"demo": "BadgeAvatars.js"}}