diff --git a/app/docs/components/avatar/avatar.mdx b/app/docs/components/avatar/avatar.mdx
index bf396e69d..224d505da 100644
--- a/app/docs/components/avatar/avatar.mdx
+++ b/app/docs/components/avatar/avatar.mdx
@@ -173,7 +173,33 @@ Change the default size of the avatar component by passing the `size` prop. Size
 
 You can override the default image element by passing the `img` prop to the `<Avatar>` component. This is useful if you want to use a different image element like `<Image>` from Next.js.
 
-<CodePreview importFlowbiteReact="Avatar" title="Override image element">
+<CodePreview
+  importFlowbiteReact="Avatar"
+  title="Override image element"
+  code={`<div className="flex flex-wrap gap-2">
+  <Avatar
+    img={(props) => (
+      <Image
+        alt=""
+        height="48"
+        referrerPolicy="no-referrer"
+        src="/images/people/profile-picture-5.jpg"
+        width="48"
+        {...props}
+      />
+    )}
+  />
+  <Avatar
+    img={(props) => (
+      <picture>
+        <source media="(min-width: 900px)" srcSet="/images/people/profile-picture-3.jpg" />
+        <source media="(min-width: 480px)" srcSet="/images/people/profile-picture-4.jpg" />
+        <Image alt="" height="48" src="/images/people/profile-picture-5.jpg" width="48" {...props} />
+      </picture>
+    )}
+  />
+</div>`}
+>
   <div className="flex flex-wrap gap-2">
     <Avatar
       img={(props) => (