diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx
index e605e9839d..9d249f5680 100644
--- a/docs/xplat/src/content/en/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx
@@ -32,13 +32,13 @@ Use the avatar to provide a compact visual identity in lists, cards, profile men
 
 <PlatformBlock for="WebComponents, React, Blazor">
 
-<Sample spacing="sm" height={300} src="/layouts/avatar/overview" alt="{Platform} Avatar overview example" />
+<Sample noBackground={false} spacing="sm" height={300} src="/layouts/avatar/overview" alt="{Platform} Avatar overview example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-<Sample spacing="sm" height={300} src="/layouts/avatar-overview" alt="{Platform} Avatar overview example" />
+<Sample noBackground={false} spacing="sm" height={300} src="/layouts/avatar-overview" alt="{Platform} Avatar overview example" />
 
 </PlatformBlock>
 
@@ -224,13 +224,13 @@ Set only the content source you intend to show. The Angular avatar renders `src`
 
 <PlatformBlock for="WebComponents, React, Blazor">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar/variants" alt="{Platform} Avatar variants example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar/variants" alt="{Platform} Avatar variants example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar-variants" alt="{Platform} Avatar variants example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar-variants" alt="{Platform} Avatar variants example" />
 
 </PlatformBlock>
 
@@ -272,13 +272,13 @@ Set <ApiLink pkg="core" type="Avatar" member="shape" label="Shape" /> to `square
 
 <PlatformBlock for="WebComponents, React, Blazor">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar/shape" alt="{Platform} Avatar shape example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar/shape" alt="{Platform} Avatar shape example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar-shape" alt="{Platform} Avatar shape example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar-shape" alt="{Platform} Avatar shape example" />
 
 </PlatformBlock>
 
@@ -306,13 +306,13 @@ igc-avatar {
 
 <PlatformBlock for="WebComponents, React, Blazor">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar/size" alt="{Platform} Avatar size example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar/size" alt="{Platform} Avatar size example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-<Sample position="center" spacing="sm" height={300} src="/layouts/avatar-size" alt="{Platform} Avatar size example" />
+<Sample noBackground={false} position="center" spacing="sm" height={300} src="/layouts/avatar-size" alt="{Platform} Avatar size example" />
 
 </PlatformBlock>
 
@@ -380,13 +380,13 @@ The avatar exposes a small set of inputs for its content and shape.
 
 <PlatformBlock for="WebComponents, React, Blazor">
 
-<Sample spacing="sm" height={420} src="/layouts/avatar/styling" alt="{Platform} styled Avatar example" />
+<Sample noBackground={false} spacing="sm" height={420} src="/layouts/avatar/styling" alt="{Platform} styled Avatar example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-<Sample spacing="sm" height={420} src="/layouts/avatar-styling" alt="{Platform} styled Avatar example" />
+<Sample noBackground={false} spacing="sm" height={420} src="/layouts/avatar-styling" alt="{Platform} styled Avatar example" />
 
 </PlatformBlock>
 
@@ -517,7 +517,7 @@ igx-avatar {
 
 Use Tailwind utility classes with the {ProductName} Avatar when you need utility-first layout styling together with Ignite UI component tokens.
 
-<Sample spacing="sm" height={560} src="/layouts/avatar/tailwind-styling" alt="{Platform} Avatar Tailwind styling example" />
+<Sample noBackground={false} spacing="sm" height={560} src="/layouts/avatar/tailwind-styling" alt="{Platform} Avatar Tailwind styling example" />
 
 </PlatformBlock>
 
@@ -525,7 +525,7 @@ Use Tailwind utility classes with the {ProductName} Avatar when you need utility
 
 Use the Angular Tailwind utility syntax when your application styles Ignite UI components through Tailwind classes.
 
-<Sample height={560} src="/layouts/avatar-tailwind-styling" alt="{Platform} Avatar Tailwind styling example" />
+<Sample noBackground={false} height={560} src="/layouts/avatar-tailwind-styling" alt="{Platform} Avatar Tailwind styling example" />
 
 </PlatformBlock>