diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 60fe20eb2..d6cdc33ce 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "Avatar",
+                    "to": "/avatar"
+                },
                 {
                     "name": "Checkbox",
                     "to": "/checkbox"
diff --git a/apps/volt/doc/avatar/AvatarGroupDoc.vue b/apps/volt/doc/avatar/AvatarGroupDoc.vue
new file mode 100644
index 000000000..10e62f828
--- /dev/null
+++ b/apps/volt/doc/avatar/AvatarGroupDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/IconDoc.vue b/apps/volt/doc/avatar/IconDoc.vue
new file mode 100644
index 000000000..254b5df45
--- /dev/null
+++ b/apps/volt/doc/avatar/IconDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/ImageDoc.vue b/apps/volt/doc/avatar/ImageDoc.vue
new file mode 100644
index 000000000..af47532db
--- /dev/null
+++ b/apps/volt/doc/avatar/ImageDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/avatar/ImportDoc.vue b/apps/volt/doc/avatar/ImportDoc.vue
new file mode 100644
index 000000000..b098e1981
--- /dev/null
+++ b/apps/volt/doc/avatar/ImportDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import InputText from '@/volt/inputtext';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/avatar/LabelDoc.vue b/apps/volt/doc/avatar/LabelDoc.vue
new file mode 100644
index 000000000..62f86e09a
--- /dev/null
+++ b/apps/volt/doc/avatar/LabelDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A letter Avatar is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/chip/BasicDoc.vue b/apps/volt/doc/chip/BasicDoc.vue
index 1ea935ca7..693acaea6 100644
--- a/apps/volt/doc/chip/BasicDoc.vue
+++ b/apps/volt/doc/chip/BasicDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         <Chip label="Thriller" removable />
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/IconDoc.vue b/apps/volt/doc/chip/IconDoc.vue
index d7f65ad26..ebdaec8c0 100644
--- a/apps/volt/doc/chip/IconDoc.vue
+++ b/apps/volt/doc/chip/IconDoc.vue
@@ -34,5 +34,9 @@ const code = ref(`
         </Chip>
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/ImageDoc.vue b/apps/volt/doc/chip/ImageDoc.vue
index cf8e25c80..3ef9bf0c8 100644
--- a/apps/volt/doc/chip/ImageDoc.vue
+++ b/apps/volt/doc/chip/ImageDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" removable />
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/doc/chip/TemplateDoc.vue b/apps/volt/doc/chip/TemplateDoc.vue
index 11e9604e0..a5529decc 100644
--- a/apps/volt/doc/chip/TemplateDoc.vue
+++ b/apps/volt/doc/chip/TemplateDoc.vue
@@ -24,5 +24,9 @@ const code = ref(`
         </Chip>
     </div>
 </template>
+
+<script setup>
+import Chip from '@/volt/chip';
+<\/script>
 `);
 </script>
diff --git a/apps/volt/pages/avatar/index.vue b/apps/volt/pages/avatar/index.vue
new file mode 100644
index 000000000..c1f1b65f1
--- /dev/null
+++ b/apps/volt/pages/avatar/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" />
+</template>
+
+<script>
+import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc.vue';
+import IconDoc from '@/doc/avatar/IconDoc.vue';
+import ImageDoc from '@/doc/avatar/ImageDoc.vue';
+import ImportDoc from '@/doc/avatar/ImportDoc.vue';
+import LabelDoc from '@/doc/avatar/LabelDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'label',
+                    label: 'Label',
+                    component: LabelDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                },
+                {
+                    id: 'avatargroup',
+                    label: 'AvatarGroup',
+                    component: AvatarGroupDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/tailwind.config.js b/apps/volt/tailwind.config.js
index 7211fe889..bd0cca4cc 100644
--- a/apps/volt/tailwind.config.js
+++ b/apps/volt/tailwind.config.js
@@ -11,6 +11,7 @@ export default {
             addVariant('p-invalid', '&[data-p~="invalid"]');
             addVariant('p-small', '&[data-p~="small"]');
             addVariant('p-large', '&[data-p~="large"]');
+            addVariant('p-xlarge', '&[data-p~="xlarge"]');
             addVariant('p-fluid', '&[data-p~="fluid"]');
             addVariant('p-filled', '&[data-p~="filled"]');
             addVariant('p-horizontal', '&[data-p~="horizontal"]');
@@ -28,6 +29,7 @@ export default {
             addVariant('p-focus-visible', '&[data-p~="focus-visible"]');
             addVariant('p-readonly', '&[data-p~="readonly"]');
             addVariant('p-removable', '&[data-p~="removable"]');
+            addVariant('p-circle', '&[data-p~="circle"]');
         })
     ],
     theme: {
diff --git a/apps/volt/volt/avatar/index.vue b/apps/volt/volt/avatar/index.vue
new file mode 100644
index 000000000..487d57e68
--- /dev/null
+++ b/apps/volt/volt/avatar/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <Avatar
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Avatar>
+</template>
+
+<script setup>
+import Avatar from 'primevue/avatar';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex items-center justify-center
+        w-8 h-8 text-base rounded-md
+        bg-surface-200 dark:bg-surface-700
+        has-[img]:bg-transparent
+        p-circle:rounded-full
+        p-large:w-12 p-large:h-12 p-large:text-2xl
+        p-xlarge:w-16 p-xlarge:h-16 p-xlarge:text-[2rem]`,
+    label: ``,
+    icon: `text-base p-large:text-2xl p-xlarge:text-[2rem]`,
+    image: `p-circle:rounded-full w-full h-full`
+});
+</script>
diff --git a/apps/volt/volt/avatargroup/index.vue b/apps/volt/volt/avatargroup/index.vue
new file mode 100644
index 000000000..9c949d837
--- /dev/null
+++ b/apps/volt/volt/avatargroup/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <AvatarGroup
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </AvatarGroup>
+</template>
+
+<script setup>
+import AvatarGroup from 'primevue/avatargroup';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex items-center *:border-2 *:border-surface-200 dark:*:border-surface-700 *:-ms-3`
+});
+</script>
diff --git a/packages/primevue/src/avatar/Avatar.vue b/packages/primevue/src/avatar/Avatar.vue
index cbe30f81e..4c5a0f026 100644
--- a/packages/primevue/src/avatar/Avatar.vue
+++ b/packages/primevue/src/avatar/Avatar.vue
@@ -1,15 +1,16 @@
 <template>
-    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptmi('root')" :data-p="dataP">
         <slot>
-            <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
+            <span v-if="label" :class="cx('label')" v-bind="ptm('label')" :data-p="dataP">{{ label }}</span>
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
-            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
+            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" :data-p="dataP" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" :data-p="dataP" />
         </slot>
     </div>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseAvatar from './BaseAvatar.vue';
 
 export default {
@@ -21,6 +22,14 @@ export default {
         onError(event) {
             this.$emit('error', event);
         }
+    },
+    computed: {
+        dataP() {
+            return cn({
+                [this.shape]: this.shape,
+                [this.size]: this.size
+            });
+        }
     }
 };
 </script>