diff --git a/src/app/components/avatar/avatar.css b/src/app/components/avatar/avatar.css
index 551dff78fcf..e5850559f60 100755
--- a/src/app/components/avatar/avatar.css
+++ b/src/app/components/avatar/avatar.css
@@ -1,4 +1,7 @@
 @layer primeng {
+    .p-avatar-host{
+        display: inline-flex;
+    }
     .p-avatar {
         display: inline-flex;
         align-items: center;
diff --git a/src/app/components/avatar/avatar.ts b/src/app/components/avatar/avatar.ts
index a88c95f31a8..bd3ebd985a9 100755
--- a/src/app/components/avatar/avatar.ts
+++ b/src/app/components/avatar/avatar.ts
@@ -9,16 +9,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Outp
     template: `
         <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.data-pc-name]="'avatar'">
             <ng-content></ng-content>
-            <span class="p-avatar-text" *ngIf="label; else iconTemplate">{{ label }}</span>
-            <ng-template #iconTemplate><span [class]="icon" [ngClass]="'p-avatar-icon'" *ngIf="icon; else imageTemplate"></span></ng-template>
-            <ng-template #imageTemplate><img [src]="image" *ngIf="image" (error)="imageError($event)" [attr.aria-label]="ariaLabel" /></ng-template>
+            <span class="p-avatar-text" [ngStyle]="labelStyle" *ngIf="label; else iconTemplate">{{ label }}</span>
+            <ng-template #iconTemplate><span [class]="icon" [ngClass]="'p-avatar-icon'" *ngIf="icon"></span></ng-template>
+            <img [src]="image" *ngIf="image && !icon" (error)="imageError($event)" [attr.aria-label]="ariaLabel" />
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['./avatar.css'],
     host: {
-        class: 'p-element'
+        class: 'p-avatar-host p-element'
     }
 })
 export class Avatar {
@@ -87,6 +87,12 @@ export class Avatar {
     imageError(event: Event) {
         this.onImageError.emit(event);
     }
+
+    get labelStyle(){
+        return {
+            'position': this.image ? 'absolute' : undefined
+        }
+    }
 }
 
 @NgModule({
diff --git a/src/app/showcase/doc/avatar/imagedoc.ts b/src/app/showcase/doc/avatar/imagedoc.ts
index fe9b42a023f..9a95b5d401e 100644
--- a/src/app/showcase/doc/avatar/imagedoc.ts
+++ b/src/app/showcase/doc/avatar/imagedoc.ts
@@ -22,6 +22,10 @@ import { Code } from '@domain/code';
                     <h5>Gravatar</h5>
                     <p-avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" styleClass="flex align-items-center justify-content-center mr-2" size="xlarge" />
                 </div>
+                <div class="flex-auto">
+                    <h5>Image with Label</h5>
+                    <p-avatar image="https://hetzner.arematics.com/assets/images/gradient_image.svg" label="UN" styleClass="mr-2 text-white" size="xlarge" shape="circle" />
+                </div>
             </div>
         </div>
         <app-code [code]="code" selector="avatar-image-demo"></app-code>
@@ -29,66 +33,81 @@ import { Code } from '@domain/code';
 })
 export class ImageDoc {
     code: Code = {
-        basic: `<p-avatar 
-    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
-    styleClass="mr-2" 
-    size="xlarge" 
+        basic: `<p-avatar
+    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
+    styleClass="mr-2"
+    size="xlarge"
     shape="circle" />
-<p-avatar 
-    image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
-    styleClass="mr-2" 
-    size="large" 
+<p-avatar
+    image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png"
+    styleClass="mr-2"
+    size="large"
     shape="circle" />
-<p-avatar 
-    image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
-    styleClass="mr-2" 
+<p-avatar
+    image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png"
+    styleClass="mr-2"
     shape="circle" />
 
-<p-avatar 
-    pBadge 
-    value="4" 
-    image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" 
+<p-avatar
+    pBadge
+    value="4"
+    image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg"
     size="xlarge"
     badgeSize="large" />
 
-<p-avatar 
-    image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" 
-    styleClass="flex align-items-center justify-content-center mr-2" 
-    size="xlarge" />`,
+<p-avatar
+    image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
+    styleClass="flex align-items-center justify-content-center mr-2"
+    size="xlarge" />
+
+<p-avatar
+    image="https://hetzner.arematics.com/assets/images/gradient_image.svg"
+    label="UN"
+    styleClass="mr-2 text-white"
+    size="xlarge"
+    shape="circle" />`,
         html: `<div class="card">
     <div class="flex flex-wrap gap-5">
         <div class="flex-auto">
-            <p-avatar 
-                image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
-                styleClass="mr-2" 
-                size="xlarge" 
+            <p-avatar
+                image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
+                styleClass="mr-2"
+                size="xlarge"
                 shape="circle" />
-            <p-avatar 
-                image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
-                styleClass="mr-2" 
-                size="large" 
+            <p-avatar
+                image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png"
+                styleClass="mr-2"
+                size="large"
                 shape="circle" />
-            <p-avatar 
-                image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
-                styleClass="mr-2" 
+            <p-avatar
+                image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png"
+                styleClass="mr-2"
                 shape="circle" />
         </div>
         <div class="flex-auto">
             <h5>Badge</h5>
-            <p-avatar 
-                pBadge 
-                value="4" 
-                image="https://primefaces.org/cdn/primeng/demo/avatar/walter.jpg" 
+            <p-avatar
+                pBadge
+                value="4"
+                image="https://primefaces.org/cdn/primeng/demo/avatar/walter.jpg"
                 size="xlarge"
                 badgeSize="large" />
         </div>
         <div class="flex-auto">
             <h5>Gravatar</h5>
-            <p-avatar 
-                image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" 
-                styleClass="flex align-items-center justify-content-center mr-2" 
+            <p-avatar
+                image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
+                styleClass="flex align-items-center justify-content-center mr-2"
                 size="xlarge" />
         </div>
+        <div class="flex-auto">
+            <h5>Image with Label</h5>
+            <p-avatar image="https://hetzner.arematics.com/assets/images/gradient_image.svg"
+                      label="UN"
+                      styleClass="mr-2 text-white"
+                      size="xlarge"
+                      shape="circle" />
+        </div>
     </div>
 </div>`,
         typescript: `import { Component } from '@angular/core';