diff --git a/core/api.txt b/core/api.txt
index f97c5a7328..4eeea12614 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -184,7 +184,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,size,"large" | "medium" | "small" | undefined,undefined,false,false
+ion-avatar,prop,size,"large" | "medium" | "small" | "xsmall" | 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 fdef0c5812..be9bca602a 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -336,9 +336,9 @@ export namespace Components {
*/
"mode"?: "ios" | "md";
/**
- * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+ * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
*/
- "size"?: 'small' | 'medium' | 'large';
+ "size"?: `xsmall` | 'small' | 'medium' | 'large';
/**
* The theme determines the visual appearance of the component.
*/
@@ -5568,9 +5568,9 @@ declare namespace LocalJSX {
*/
"mode"?: "ios" | "md";
/**
- * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+ * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, or to `"large"` for a larger size. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
*/
- "size"?: 'small' | 'medium' | 'large';
+ "size"?: `xsmall` | 'small' | 'medium' | 'large';
/**
* The theme determines the visual appearance of the component.
*/
diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index 83f703fb0a..fbb2af9a6b 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -28,6 +28,20 @@
// Avatar Sizes
// --------------------------------------------------
+:host(.avatar-xsmall) {
+ --padding-end: #{globals.$ionic-space-050};
+ --padding-start: #{globals.$ionic-space-050};
+
+ width: globals.$ionic-scale-600;
+ height: globals.$ionic-scale-600;
+
+ font-size: globals.$ionic-font-size-300;
+
+ font-weight: globals.$ionic-font-weight-medium;
+
+ line-height: globals.$ionic-line-height-500;
+}
+
:host(.avatar-small) {
--padding-end: #{globals.$ionic-space-150};
--padding-start: #{globals.$ionic-space-150};
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index 982f28b91b..7628a19d94 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -20,12 +20,12 @@ export class Avatar implements ComponentInterface {
@Element() el!: HTMLElement;
/**
- * Set to `"small"` for a compact size, `"medium"` for the default height and width, or to
- * `"large"` for a larger size.
+ * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"`
+ * for the default height and width, or to `"large"` for a larger size.
*
* Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
*/
- @Prop() size?: 'small' | 'medium' | 'large';
+ @Prop() size?: `xsmall` | 'small' | 'medium' | 'large';
get hasImage() {
return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts
index 7502a0fa48..75f65222d7 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('xsmall', () => {
+ test('should not have visual regressions when containing text', async ({ page }) => {
+ await page.setContent(
+ `
+ AB
+ `,
+ config
+ );
+
+ const avatar = page.locator('ion-avatar');
+
+ await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-text`));
+ });
+
+ test('should not have visual regressions when containing an icon', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const avatar = page.locator('ion-avatar');
+
+ await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-icon`));
+ });
+
+ test('should not have visual regressions when containing an image', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ `,
+ config
+ );
+
+ const avatar = page.locator('ion-avatar');
+
+ await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-image`));
+ });
+ });
+
test.describe('small', () => {
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-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cc70a57b5c
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ce9e4960f9
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d08fc4c722
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bbb8b4aabd
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb3c201f76
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..adefbb60ab
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfc3fa1a8a
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6423dfa339
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..01b707b35b
Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-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 4acebd512e..1eccfd7e1f 100644
--- a/core/src/components/avatar/test/size/index.html
+++ b/core/src/components/avatar/test/size/index.html
@@ -43,6 +43,7 @@
Text
+
AB
AB
AB
AB
@@ -50,6 +51,9 @@
Icons
+
+
+
@@ -63,6 +67,9 @@
Images
+
+
+