diff --git a/projects/igniteui-angular/badge/src/badge/badge.component.ts b/projects/igniteui-angular/badge/src/badge/badge.component.ts
index 4774c4bed21..45a7132b6ae 100644
--- a/projects/igniteui-angular/badge/src/badge/badge.component.ts
+++ b/projects/igniteui-angular/badge/src/badge/badge.component.ts
@@ -32,9 +32,11 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
  *
  * @example
  * ```html
- * <igx-avatar>
- *   <igx-badge icon="check" type="success"></igx-badge>
- * </igx-avatar>
+ * <div class="wrapper">
+ *  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+ *  <igx-badge icon="check" type="success" shape="square"></igx-badge>
+ * </div>
+ * ```
  */
 @Component({
     selector: 'igx-badge',
diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md
index c63c3c1ac9c..d1debc0ce42 100644
--- a/skills/igniteui-angular-components/references/data-display.md
+++ b/skills/igniteui-angular-components/references/data-display.md
@@ -133,9 +133,10 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 ```html
 <!-- Image avatar with badge overlay -->
-<igx-avatar [src]="user.photo" shape="circle" size="large">
-  <igx-badge igxAvatarBadge [type]="'success'" [icon]="'check'"></igx-badge>
-</igx-avatar>
+<div class="wrapper">
+  <igx-avatar [src]="user.photo" shape="circle" size="large"></igx-avatar>
+  <igx-badge [type]="'success'" [icon]="'check'"></igx-badge>
+</div>
 
 <!-- Initials avatar -->
 <igx-avatar initials="JD" shape="circle"></igx-avatar>