diff --git a/core/api.txt b/core/api.txt
index 9f452c896c..caccbf316f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -185,7 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,shadow
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
 ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius,ionic
 ion-avatar,css-prop,--border-radius,ios
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c67c590d56..1ab52a238e 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -340,9 +340,9 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5596,9 +5596,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
          */
-        "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
         /**
           * The theme determines the visual appearance of the component.
          */
diff --git a/core/src/components/avatar/avatar.scss b/core/src/components/avatar/avatar.common.scss
similarity index 100%
rename from core/src/components/avatar/avatar.scss
rename to core/src/components/avatar/avatar.common.scss
diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index 892f67dd60..de3c3e2f8a 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar";
+@import "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -30,6 +30,20 @@
 // Avatar Sizes
 // --------------------------------------------------
 
+/* 2-Extra Small */
+:host(.avatar-xxsmall) {
+  --padding-end: #{globals.$ionic-space-050};
+  --padding-start: #{globals.$ionic-space-050};
+
+  width: globals.$ionic-scale-400;
+  height: globals.$ionic-scale-400;
+
+  font-size: globals.$ionic-font-size-300;
+
+  line-height: globals.$ionic-line-height-500;
+}
+
+/* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ionic-space-050};
   --padding-start: #{globals.$ionic-space-050};
@@ -39,9 +53,10 @@
 
   font-size: globals.$ionic-font-size-300;
 
-  line-height: globals.$ionic-line-height-400;
+  line-height: globals.$ionic-line-height-500;
 }
 
+/* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ionic-space-150};
   --padding-start: #{globals.$ionic-space-150};
@@ -54,6 +69,7 @@
   line-height: globals.$ionic-line-height-600;
 }
 
+/* Medium */
 :host(.avatar-medium) {
   --padding-end: #{globals.$ionic-space-200};
   --padding-start: #{globals.$ionic-space-200};
@@ -64,6 +80,7 @@
   font-size: globals.$ionic-font-size-450;
 }
 
+/* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ionic-space-250};
   --padding-start: #{globals.$ionic-space-250};
@@ -74,6 +91,7 @@
   font-size: globals.$ionic-font-size-500;
 }
 
+/* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ionic-space-300};
   --padding-start: #{globals.$ionic-space-300};
@@ -87,6 +105,7 @@
 // Avatar Shapes
 // --------------------------------------------------
 
+:host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
   --border-radius: #{globals.$ionic-border-radius-100};
diff --git a/core/src/components/avatar/avatar.ios.scss b/core/src/components/avatar/avatar.ios.scss
index bde09052b2..1f3a00782b 100644
--- a/core/src/components/avatar/avatar.ios.scss
+++ b/core/src/components/avatar/avatar.ios.scss
@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.ios.vars";
 
 // iOS Avatar
diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss
index 564901d808..200f570704 100644
--- a/core/src/components/avatar/avatar.md.scss
+++ b/core/src/components/avatar/avatar.md.scss
@@ -1,4 +1,4 @@
-@import "./avatar";
+@import "./avatar.common";
 @import "./avatar.md.vars";
 
 // Material Design Avatar
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index 801ac633c9..b961fa3301 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -20,13 +20,16 @@ export class Avatar implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**
-   * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
-   * for the default height and width, `"large"` for a larger size, or `"xlarge"` for
-   * the largest dimensions.
+   * Set to `"xxsmall"` for the smallest size.
+   * Set to `"xsmall"` for a very small size.
+   * Set to `"small"` for a compact size.
+   * Set to `"medium"` for the default height and width.
+   * Set to `"large"` for a larger size.
+   * Set to `"xlarge"` for the largest dimensions.
    *
    * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
    */
-  @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
   /**
    * Set to `"soft"` for an avatar with slightly rounded corners,
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts
index 8bf6128bb6..d063ee4c44 100644
--- a/core/src/components/avatar/test/shape/avatar.e2e.ts
+++ b/core/src/components/avatar/test/shape/avatar.e2e.ts
@@ -108,6 +108,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
             <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
             <ion-avatar shape="soft" size="small">AB</ion-avatar>
             <ion-avatar shape="soft">AB</ion-avatar>
@@ -132,6 +133,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <ion-icon name="person-outline"></ion-icon>
             </ion-avatar>
@@ -162,6 +166,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           </style>
 
           <div id="container">
+            <ion-avatar shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
             <ion-avatar shape="soft" size="xsmall">
               <img src="/src/components/avatar/test/avatar.svg"/>
             </ion-avatar>
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b3fd1cbdca..df5538ca89 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e11ec6dcc6..780b8073de 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
index f1fcbe8eca..1f20ef93c0 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 78d54a7adc..0110fa9908 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 70b9f8a910..6d15212350 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png
index b65394b67c..fa8ffa89f1 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 93ba05b6f8..241d27a0b6 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 4f283a6812..b5d17d90d9 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png
index a509f95a8a..9756da8553 100644
Binary files a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/shape/index.html b/core/src/components/avatar/test/shape/index.html
index 16434a73b3..4eb659b18f 100644
--- a/core/src/components/avatar/test/shape/index.html
+++ b/core/src/components/avatar/test/shape/index.html
@@ -43,6 +43,7 @@
 
         <h2>Soft</h2>
         <div class="container">
+          <ion-avatar shape="soft" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="soft" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="soft" size="small">AB</ion-avatar>
           <ion-avatar shape="soft" size="medium">AB</ion-avatar>
@@ -52,6 +53,7 @@
 
         <h2>Round</h2>
         <div class="container">
+          <ion-avatar shape="round" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="round" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="round" size="small">AB</ion-avatar>
           <ion-avatar shape="round" size="medium">AB</ion-avatar>
@@ -61,6 +63,7 @@
 
         <h2>Rectangular</h2>
         <div class="container">
+          <ion-avatar shape="rectangular" size="xxsmall">A</ion-avatar>
           <ion-avatar shape="rectangular" size="xsmall">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="small">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="medium">AB</ion-avatar>
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts
index 5838519dc5..f605a44195 100644
--- a/core/src/components/avatar/test/size/avatar.e2e.ts
+++ b/core/src/components/avatar/test/size/avatar.e2e.ts
@@ -6,6 +6,51 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('avatar: size'), () => {
+    test.describe('xxsmall', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">A</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xxsmall-image`));
+      });
+    });
+
     test.describe('xsmall', () => {
       test('should not have visual regressions when containing text', async ({ page }) => {
         await page.setContent(
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e28b07799b
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..68d5a2ae73
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0d99b917f3
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..55a161fdd4
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e4af2bee80
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0d34818dd3
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9687f2abfe
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c2d3f13a02
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..57aa900f90
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xxsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/avatar/test/size/index.html b/core/src/components/avatar/test/size/index.html
index 875d5f7ddf..a06309e282 100644
--- a/core/src/components/avatar/test/size/index.html
+++ b/core/src/components/avatar/test/size/index.html
@@ -43,6 +43,7 @@
 
         <h2>Text</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">A</ion-avatar>
           <ion-avatar size="xsmall">AB</ion-avatar>
           <ion-avatar size="small">AB</ion-avatar>
           <ion-avatar size="medium">AB</ion-avatar>
@@ -52,6 +53,9 @@
 
         <h2>Icons</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <ion-icon name="person-outline"></ion-icon>
           </ion-avatar>
@@ -71,6 +75,9 @@
 
         <h2>Images</h2>
         <div class="container">
+          <ion-avatar size="xxsmall">
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
           <ion-avatar size="xsmall">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>