diff --git a/core/api.txt b/core/api.txt
index 9551b242b94..51133cd2a78 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2309,10 +2309,7 @@ ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
-ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color,ionic
-ion-spinner,css-prop,--color,ios
-ion-spinner,css-prop,--color,md
+ion-spinner,css-prop,--color
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5bc8b061e63..fc00a149992 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -39,6 +39,7 @@ import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectModalOption } from "./components/select-modal/select-modal-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+import { SpinnerSize } from "./components/spinner/spinner.interfaces";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -77,6 +78,7 @@ export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectModalOption } from "./components/select-modal/select-modal-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
+export { SpinnerSize } from "./components/spinner/spinner.interfaces";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -3881,13 +3883,9 @@ export namespace Components {
          */
         "paused": boolean;
         /**
-          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"`.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: SpinnerSize;
     }
     interface IonSplitPane {
         /**
@@ -9911,13 +9909,9 @@ declare namespace LocalJSX {
          */
         "paused"?: boolean;
         /**
-          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"medium"`.
          */
-        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "size"?: SpinnerSize;
     }
     interface IonSplitPane {
         /**
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index a4f7c6fbd4d..9d8f9071acd 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -81,7 +81,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the fill based on the custom theme config
+   * Get the fill by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get fillValue(): string {
     const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string;
@@ -91,7 +94,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the hue based on the custom theme config
+   * Get the hue by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get hueValue(): string {
     const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as string;
@@ -101,7 +107,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the shape based on the custom theme config
+   * Get the shape by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get shapeValue(): string {
     const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as string;
@@ -111,7 +120,10 @@ export class Chip implements ComponentInterface {
   }
 
   /**
-   * Set the size based on the custom theme config
+   * Get the size by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
    */
   get sizeValue(): string {
     const sizeConfig = config.getObjectValue('IonChip.size', 'large') as string;
diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts
index ecc15c14ef6..43a2a5ff832 100644
--- a/core/src/components/spinner/spinner-configs.ts
+++ b/core/src/components/spinner/spinner-configs.ts
@@ -1,4 +1,4 @@
-import type { SpinnerConfigs } from './spinner-interface';
+import type { SpinnerTemplates } from './spinner.interfaces';
 
 const spinners = {
   bubbles: {
@@ -150,5 +150,5 @@ const spinners = {
   },
 };
 
-export const SPINNERS: SpinnerConfigs = spinners;
+export const SPINNERS: SpinnerTemplates = spinners;
 export type SpinnerTypes = keyof typeof spinners;
diff --git a/core/src/components/spinner/spinner-interface.ts b/core/src/components/spinner/spinner-interface.ts
deleted file mode 100644
index f2ab24691e2..00000000000
--- a/core/src/components/spinner/spinner-interface.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export interface SpinnerConfigs {
-  [spinnerName: string]: SpinnerConfig;
-}
-
-export interface SpinnerConfig {
-  dur: number;
-  circles?: number;
-  lines?: number;
-  elmDuration?: boolean;
-  fn: (dur: number, index: number, total: number) => SpinnerData;
-}
-
-export interface SpinnerData {
-  r?: number;
-  y1?: number;
-  y2?: number;
-  cx?: number;
-  cy?: number;
-  style: { [key: string]: string | undefined };
-  viewBox?: string;
-  transform?: string;
-}
diff --git a/core/src/components/spinner/spinner.interfaces.ts b/core/src/components/spinner/spinner.interfaces.ts
new file mode 100644
index 00000000000..05a109c439e
--- /dev/null
+++ b/core/src/components/spinner/spinner.interfaces.ts
@@ -0,0 +1,78 @@
+export interface SpinnerTemplates {
+  [spinnerName: string]: SpinnerTemplate;
+}
+
+export interface SpinnerTemplate {
+  dur: number;
+  circles?: number;
+  lines?: number;
+  elmDuration?: boolean;
+  fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+
+interface SpinnerData {
+  r?: number;
+  y1?: number;
+  y2?: number;
+  cx?: number;
+  cy?: number;
+  style: { [key: string]: string | undefined };
+  viewBox?: string;
+  transform?: string;
+}
+
+export type IonSpinnerRecipe = {
+  color?: string;
+
+  lines?: {
+    stroke?: {
+      width?: string;
+    };
+
+    small?: {
+      stroke?: {
+        width?: string;
+      };
+    };
+
+    sharp?: {
+      stroke?: {
+        width?: string;
+      };
+
+      small?: {
+        stroke?: {
+          width?: string;
+        };
+      };
+    };
+  };
+
+  circular?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  crescent?: {
+    stroke?: {
+      width?: string;
+    };
+  };
+
+  // Sizes
+  size?: {
+    [K in SpinnerSize]?: IonSpinnerSizeDefinition;
+  };
+};
+
+type IonSpinnerSizeDefinition = {
+  width?: string;
+  height?: string;
+};
+
+export type IonSpinnerConfig = {
+  size?: SpinnerSize;
+};
+
+export type SpinnerSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
diff --git a/core/src/components/spinner/spinner.ionic.scss b/core/src/components/spinner/spinner.ionic.scss
deleted file mode 100644
index f8fe09383f6..00000000000
--- a/core/src/components/spinner/spinner.ionic.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./spinner.common";
-
-// Ionic Spinner
-// --------------------------------------------------
-
-:host {
-  --color: #{globals.$ion-primitives-neutral-800};
-
-  width: globals.$ion-scale-700;
-  height: globals.$ion-scale-700;
-}
-
-:host(.ion-color-medium) {
-  color: #{globals.ion-color(medium, contrast, $subtle: true)};
-}
-
-// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
-// --------------------------------------------------
-
-:host(.spinner-lines) line,
-:host(.spinner-lines-small) line {
-  stroke-width: globals.$ion-scale-150;
-}
-
-:host(.spinner-lines-sharp) line,
-:host(.spinner-lines-sharp-small) line {
-  stroke-width: globals.$ion-scale-100;
-}
-
-// Sizes
-// --------------------------------------------------
-
-/* Extra Small */
-:host(.spinner-xsmall) {
-  width: globals.$ion-scale-600;
-  height: globals.$ion-scale-600;
-}
-
-/* Small */
-:host(.spinner-small) {
-  width: globals.$ion-scale-800;
-  height: globals.$ion-scale-800;
-}
-
-/* Medium */
-:host(.spinner-medium) {
-  width: globals.$ion-scale-1000;
-  height: globals.$ion-scale-1000;
-}
-
-/* Large */
-:host(.spinner-large) {
-  width: globals.$ion-scale-1200;
-  height: globals.$ion-scale-1200;
-}
-
-/* Extra Large */
-:host(.spinner-xlarge) {
-  width: globals.$ion-scale-1400;
-  height: globals.$ion-scale-1400;
-}
diff --git a/core/src/components/spinner/spinner.native.scss b/core/src/components/spinner/spinner.native.scss
deleted file mode 100644
index 03c63c675cf..00000000000
--- a/core/src/components/spinner/spinner.native.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "./spinner.common.scss";
-
-// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
-// --------------------------------------------------
-
-:host(.spinner-lines) line,
-:host(.spinner-lines-small) line {
-  stroke-width: 7px;
-}
-
-:host(.spinner-lines-sharp) line,
-:host(.spinner-lines-sharp-small) line {
-  stroke-width: 4px;
-}
diff --git a/core/src/components/spinner/spinner.common.scss b/core/src/components/spinner/spinner.scss
similarity index 52%
rename from core/src/components/spinner/spinner.common.scss
rename to core/src/components/spinner/spinner.scss
index 2f1cb572c35..70bd1ca84f6 100644
--- a/core/src/components/spinner/spinner.common.scss
+++ b/core/src/components/spinner/spinner.scss
@@ -1,32 +1,29 @@
-@import "../../themes/mixins";
-// Required to use the current-color function
-@import "../../themes/functions.color";
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as colors;
 
-// Spinners
+// Spinner: Common Styles
 // --------------------------------------------------
 
 :host {
   /**
    * @prop --color: Color of the spinner
    */
+  --color: var(--ion-spinner-color);
 
   display: inline-block;
   position: relative;
 
-  width: 28px;
-  height: 28px;
-
   color: var(--color);
 
   user-select: none;
 }
 
 :host(.ion-color) {
-  color: current-color(base);
+  color: colors.current-color(base);
 }
 
 svg {
-  @include transform-origin(center);
+  @include mixins.transform-origin(center);
 
   position: absolute;
 
@@ -45,86 +42,122 @@ svg {
   transform: translateZ(0);
 }
 
-// Spinner: lines / lines-small / lines-sharp / lines-sharp-small
+// Spinner Names
 // --------------------------------------------------
 
-:host(.spinner-lines) line,
-:host(.spinner-lines-small) line,
-:host(.spinner-lines-sharp) line,
-:host(.spinner-lines-sharp-small) line {
+// lines / lines-small / lines-sharp / lines-sharp-small
+:host(.spinner-name-lines) line,
+:host(.spinner-name-lines-small) line,
+:host(.spinner-name-lines-sharp) line,
+:host(.spinner-name-lines-sharp-small) line {
   stroke-linecap: round;
   stroke: currentColor;
 }
 
-:host(.spinner-lines) svg,
-:host(.spinner-lines-small) svg,
-:host(.spinner-lines-sharp) svg,
-:host(.spinner-lines-sharp-small) svg {
+:host(.spinner-name-lines) svg,
+:host(.spinner-name-lines-small) svg,
+:host(.spinner-name-lines-sharp) svg,
+:host(.spinner-name-lines-sharp-small) svg {
   animation: spinner-fade-out 1s linear infinite;
 }
 
-// Spinner: bubbles
-// --------------------------------------------------
+:host(.spinner-name-lines) line {
+  stroke-width: var(--ion-spinner-lines-stroke-width);
+}
+
+:host(.spinner-name-lines-small) line {
+  stroke-width: var(--ion-spinner-lines-small-stroke-width);
+}
+
+:host(.spinner-name-lines-sharp) line {
+  stroke-width: var(--ion-spinner-lines-sharp-stroke-width);
+}
 
-:host(.spinner-bubbles) svg {
+:host(.spinner-name-lines-sharp-small) line {
+  stroke-width: var(--ion-spinner-lines-sharp-small-stroke-width);
+}
+
+// bubbles
+:host(.spinner-name-bubbles) svg {
   animation: spinner-scale-out 1s linear infinite;
   fill: currentColor;
 }
 
-// Spinner: circles
-// --------------------------------------------------
-
-:host(.spinner-circles) svg {
+// circles
+:host(.spinner-name-circles) svg {
   animation: spinner-fade-out 1s linear infinite;
   fill: currentColor;
 }
 
-// Spinner: crescent
-// --------------------------------------------------
-
-:host(.spinner-crescent) circle {
+:host(.spinner-name-crescent) circle {
   fill: transparent;
-  stroke-width: 4px;
+  stroke-width: var(--ion-spinner-crescent-stroke-width);
   stroke-dasharray: 128px;
   stroke-dashoffset: 82px;
   stroke: currentColor;
 }
 
-:host(.spinner-crescent) svg {
+// crescent
+:host(.spinner-name-crescent) svg {
   animation: spinner-rotate 1s linear infinite;
 }
 
-// Spinner: dots
-// --------------------------------------------------
-
-:host(.spinner-dots) circle {
-  stroke-width: 0;
+// dots
+:host(.spinner-name-dots) circle {
+  stroke-width: var(--ion-spinner-dots-stroke-width);
   fill: currentColor;
 }
 
-:host(.spinner-dots) svg {
+:host(.spinner-name-dots) svg {
   animation: spinner-dots 1s linear infinite;
 }
 
-// Spinner: circular
-// --------------------------------------------------
-
-:host(.spinner-circular) svg {
+// circular
+:host(.spinner-name-circular) svg {
   animation: spinner-circular linear infinite;
 }
 
-:host(.spinner-circular) circle {
+:host(.spinner-name-circular) circle {
   animation: spinner-circular-inner ease-in-out infinite;
   stroke: currentColor;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0px;
-  stroke-width: 5.6;
+  stroke-width: var(--ion-spinner-circular-stroke-width);
   fill: none;
 }
 
-// Spinner: paused
+// Spinner Sizes
+// --------------------------------------------------
+
+:host(.spinner-size-xsmall) {
+  width: var(--ion-spinner-size-xsmall-width);
+  height: var(--ion-spinner-size-xsmall-height);
+}
+
+:host(.spinner-size-small) {
+  width: var(--ion-spinner-size-small-width);
+  height: var(--ion-spinner-size-small-height);
+}
+
+:host(.spinner-size-medium) {
+  width: var(--ion-spinner-size-medium-width);
+  height: var(--ion-spinner-size-medium-height);
+}
+
+:host(.spinner-size-large) {
+  width: var(--ion-spinner-size-large-width);
+  height: var(--ion-spinner-size-large-height);
+}
+
+:host(.spinner-size-xlarge) {
+  width: var(--ion-spinner-size-xlarge-width);
+  height: var(--ion-spinner-size-xlarge-height);
+}
+
+// Spinner States
 // --------------------------------------------------
 
+// Paused
 :host(.spinner-paused),
 :host(.spinner-paused) svg,
 :host(.spinner-paused) circle {
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 0cf6cbd006e..1013cf05063 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -3,24 +3,19 @@ import { Component, Host, Prop, h } from '@stencil/core';
 import { createColorClasses } from '@utils/theme';
 
 import { config } from '../../global/config';
-import { getIonTheme, getIonMode } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
 import type { SpinnerTypes } from './spinner-configs';
 import { SPINNERS } from './spinner-configs';
-import type { SpinnerConfig } from './spinner-interface';
+import type { SpinnerSize, SpinnerTemplate } from './spinner.interfaces';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-spinner',
-  styleUrls: {
-    ios: 'spinner.native.scss',
-    md: 'spinner.native.scss',
-    ionic: 'spinner.ionic.scss',
-  },
+  styleUrl: 'spinner.scss',
   shadow: true,
 })
 export class Spinner implements ComponentInterface {
@@ -54,9 +49,9 @@ export class Spinner implements ComponentInterface {
    * Set to `"large"` for a large size.
    * Set to `"xlarge"` for the largest size.
    *
-   * Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+   * Defaults to `"medium"`.
    */
-  @Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  @Prop() size?: SpinnerSize;
 
   private getName(): SpinnerTypes {
     const spinnerName = this.name || config.get('spinner');
@@ -67,29 +62,24 @@ export class Spinner implements ComponentInterface {
     return mode === 'ios' ? 'lines' : 'circular';
   }
 
-  private getSize(): string | undefined {
-    const theme = getIonTheme(this);
-    const { size } = this;
-
-    // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
-    if (theme !== 'ionic') {
-      return undefined;
-    }
-
-    if (size === undefined) {
-      return 'xsmall';
-    }
+  /**
+   * Get the size by checking the instance property,
+   * falling back to the custom theme config.
+   *
+   * If neither is set, it will use a default value.
+   */
+  get sizeValue(): string {
+    const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium') as string;
+    const size = this.size || sizeConfig;
 
     return size;
   }
 
   render() {
-    const self = this;
-    const theme = getIonTheme(self);
-    const spinnerName = self.getName();
-    const size = this.getSize();
+    const { duration: animatedDuration, color, paused, sizeValue } = this;
+    const spinnerName = this.getName();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
-    const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
+    const duration = typeof animatedDuration === 'number' && animatedDuration > 10 ? animatedDuration : spinner.dur;
     const svgs: SVGElement[] = [];
 
     if (spinner.circles !== undefined) {
@@ -104,11 +94,10 @@ export class Spinner implements ComponentInterface {
 
     return (
       <Host
-        class={createColorClasses(self.color, {
-          [theme]: true,
-          [`spinner-${spinnerName}`]: true,
-          'spinner-paused': self.paused || config.getBoolean('_testing'),
-          [`spinner-${size}`]: size !== undefined,
+        class={createColorClasses(color, {
+          [`spinner-name-${spinnerName}`]: true,
+          'spinner-paused': paused || config.getBoolean('_testing'),
+          [`spinner-size-${sizeValue}`]: true,
         })}
         role="progressbar"
         style={spinner.elmDuration ? { animationDuration: duration + 'ms' } : {}}
@@ -119,7 +108,7 @@ export class Spinner implements ComponentInterface {
   }
 }
 
-const buildCircle = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
+const buildCircle = (spinner: SpinnerTemplate, duration: number, index: number, total: number) => {
   const data = spinner.fn(duration, index, total);
   data.style['animation-duration'] = duration + 'ms';
 
@@ -136,7 +125,7 @@ const buildCircle = (spinner: SpinnerConfig, duration: number, index: number, to
   );
 };
 
-const buildLine = (spinner: SpinnerConfig, duration: number, index: number, total: number) => {
+const buildLine = (spinner: SpinnerTemplate, duration: number, index: number, total: number) => {
   const data = spinner.fn(duration, index, total);
   data.style['animation-duration'] = duration + 'ms';
 
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts b/core/src/components/spinner/test/basic/spinner.e2e.ts
index c1e148b28cc..8a4a61c15ac 100644
--- a/core/src/components/spinner/test/basic/spinner.e2e.ts
+++ b/core/src/components/spinner/test/basic/spinner.e2e.ts
@@ -10,7 +10,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setIonViewport();
 
-        await expect(page).toHaveScreenshot(screenshot(`spinner-basic-diff`));
+        await expect(page).toHaveScreenshot(screenshot('spinner-basic'));
       });
     });
   });
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/spinner/test/color/index.html b/core/src/components/spinner/test/color/index.html
index 4a068f45f20..dc204f811ef 100644
--- a/core/src/components/spinner/test/color/index.html
+++ b/core/src/components/spinner/test/color/index.html
@@ -12,6 +12,14 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+        gap: 20px;
+        margin-top: 40px;
+      }
+    </style>
   </head>
 
   <body>
@@ -23,37 +31,52 @@
       </ion-header>
 
       <ion-content id="content">
-        <ion-list>
-          <ion-item
-            ><ion-spinner color="primary" slot="start" name="lines"></ion-spinner><code>lines</code> (primary)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="secondary" slot="start" name="lines-small"></ion-spinner
-            ><code>lines-small</code> (secondary)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="tertiary" slot="start" name="circular"></ion-spinner
-            ><code>circular</code> (tertiary)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="success" slot="start" name="dots"></ion-spinner><code>dots</code> (success)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="warning" slot="start" name="bubbles"></ion-spinner
-            ><code>bubbles</code> (warning)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="danger" slot="start" name="circles"></ion-spinner
-            ><code>circles</code> (danger)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="dark" slot="start" name="crescent"></ion-spinner><code>crescent</code> (dark)</ion-item
-          >
-          <ion-item
-            ><ion-spinner color="medium" slot="start" name="lines" paused></ion-spinner><code>lines</code> (paused,
-            medium)</ion-item
-          >
-        </ion-list>
+        <div class="grid">
+          <div class="grid-item">
+            <ion-spinner name="lines" color="primary"></ion-spinner>
+            <p>Primary</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="lines-small" color="secondary"></ion-spinner>
+            <p>Secondary</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="lines-sharp" color="tertiary"></ion-spinner>
+            <p>Tertiary</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="lines-sharp-small" color="success"></ion-spinner>
+            <p>Success</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="circular" color="warning"></ion-spinner>
+            <p>Warning</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="dots" color="danger"></ion-spinner>
+            <p>Danger</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="bubbles" color="light"></ion-spinner>
+            <p>Light</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="circles" color="medium"></ion-spinner>
+            <p>Medium</p>
+          </div>
+
+          <div class="grid-item">
+            <ion-spinner name="crescent" color="dark"></ion-spinner>
+            <p>Dark</p>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts b/core/src/components/spinner/test/color/spinner.e2e.ts
index 89e1ce0e35a..db7d60d7dbf 100644
--- a/core/src/components/spinner/test/color/spinner.e2e.ts
+++ b/core/src/components/spinner/test/color/spinner.e2e.ts
@@ -6,15 +6,27 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('spinner: color'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/spinner/test/color', config);
-    });
-    test.describe('spinner: visual regression tests', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.setIonViewport();
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+          <div class="container">
+            <ion-spinner name="lines" color="primary"></ion-spinner>
+            <ion-spinner name="lines-small" color="secondary"></ion-spinner>
+            <ion-spinner name="lines-sharp" color="tertiary"></ion-spinner>
+            <ion-spinner name="lines-sharp-small" color="success"></ion-spinner>
+            <ion-spinner name="circular" color="warning"></ion-spinner>
+            <ion-spinner name="dots" color="danger"></ion-spinner>
+            <ion-spinner name="bubbles" color="light"></ion-spinner>
+            <ion-spinner name="circles" color="medium"></ion-spinner>
+            <ion-spinner name="crescent" color="dark"></ion-spinner>
+          </div>
+        `,
+        config
+      );
+
+      const container = page.locator('.container');
 
-        await expect(page).toHaveScreenshot(screenshot(`spinner-color-diff`));
-      });
+      await expect(container).toHaveScreenshot(screenshot('spinner-color'));
     });
   });
 });
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index f745a35fc42..00000000000
Binary files a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index a3d8e1fe23b..00000000000
Binary files a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 3185f162f26..00000000000
Binary files a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0648870133e
Binary files /dev/null and b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c008d7b7d4c
Binary files /dev/null and b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d4cfa2f02e2
Binary files /dev/null and b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/resize/spinner.e2e.ts b/core/src/components/spinner/test/resize/spinner.e2e.ts
index 5874f05181c..8f43c22161c 100644
--- a/core/src/components/spinner/test/resize/spinner.e2e.ts
+++ b/core/src/components/spinner/test/resize/spinner.e2e.ts
@@ -9,29 +9,35 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
     test.beforeEach(async ({ page }) => {
       await page.setViewportSize({ width: 320, height: 340 });
     });
-    test('should not have visual regressions', async ({ page }) => {
+    test('should not have visual regressions', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/18115',
+      });
+
       await page.setContent(
         `
-        <style>
-          ion-spinner {
-            width: 100px;
-            height: 100px;
-          }
-        </style>
-        <ion-spinner name="lines"></ion-spinner>
-        <ion-spinner name="lines-small"></ion-spinner>
-        <ion-spinner name="lines-sharp"></ion-spinner>
-        <ion-spinner name="lines-sharp-small"></ion-spinner>
-        <ion-spinner name="circular"></ion-spinner>
-        <ion-spinner name="dots"></ion-spinner>
-        <ion-spinner name="bubbles"></ion-spinner>
-        <ion-spinner name="circles"></ion-spinner>
-        <ion-spinner name="crescent"></ion-spinner>
-      `,
+          <style>
+            ion-spinner.spinner-size-medium {
+              --ion-spinner-size-medium-width: 100px;
+              --ion-spinner-size-medium-height: 100px;
+            }
+          </style>
+
+          <ion-spinner size="medium" name="lines"></ion-spinner>
+          <ion-spinner size="medium" name="lines-small"></ion-spinner>
+          <ion-spinner size="medium" name="lines-sharp"></ion-spinner>
+          <ion-spinner size="medium" name="lines-sharp-small"></ion-spinner>
+          <ion-spinner size="medium" name="circular"></ion-spinner>
+          <ion-spinner size="medium" name="dots"></ion-spinner>
+          <ion-spinner size="medium" name="bubbles"></ion-spinner>
+          <ion-spinner size="medium" name="circles"></ion-spinner>
+          <ion-spinner size="medium" name="crescent"></ion-spinner>
+        `,
         config
       );
 
-      await expect(page).toHaveScreenshot(screenshot(`spinner-resize-diff`));
+      await expect(page).toHaveScreenshot(screenshot('spinner-resize'));
     });
   });
 });
diff --git a/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/spinner/test/resize/spinner.e2e.ts-snapshots/spinner-resize-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/spinner/test/size/index.html b/core/src/components/spinner/test/size/index.html
index f045932d4ca..75e7ec00800 100644
--- a/core/src/components/spinner/test/size/index.html
+++ b/core/src/components/spinner/test/size/index.html
@@ -12,6 +12,14 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+        gap: 20px;
+        margin-bottom: 40px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,34 +30,79 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-spinner slot="start"></ion-spinner>
-            <p>Default</p>
-          </ion-item>
-          <ion-item>
-            <ion-spinner slot="start" size="xsmall"></ion-spinner>
-            <p>xsmall</p>
-          </ion-item>
-          <ion-item>
-            <ion-spinner slot="start" size="small"></ion-spinner>
-            <p>small</p>
-          </ion-item>
-          <ion-item>
-            <ion-spinner slot="start" size="medium"></ion-spinner>
-            <p>medium</p>
-          </ion-item>
-          <ion-item>
-            <ion-spinner slot="start" size="large"></ion-spinner>
-            <p>large</p>
-          </ion-item>
-          <ion-item>
-            <ion-spinner slot="start" size="xlarge"></ion-spinner>
-            <p>xlarge</p>
-          </ion-item>
-        </ion-list>
-      </ion-content>
+      <ion-content id="content"> </ion-content>
     </ion-app>
+
+    <script>
+      const sections = [
+        {
+          id: 'lines-container',
+          spinners: ['lines', 'lines-small', 'lines-sharp', 'lines-sharp-small'],
+        },
+        {
+          id: 'radial-container',
+          spinners: ['circular', 'crescent'],
+        },
+        {
+          id: 'dots-container',
+          spinners: ['bubbles', 'circles', 'dots'],
+        },
+      ];
+
+      const spinnerSizes = [
+        { value: undefined, label: 'Default' },
+        { value: 'xsmall', label: 'Extra Small' },
+        { value: 'small', label: 'Small' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'large', label: 'Large' },
+        { value: 'xlarge', label: 'Extra Large' },
+      ];
+
+      // Helper to turn 'lines-sharp-small' into 'Lines Sharp Small'
+      const formatTitle = (str) => {
+        return str
+          .split('-')
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
+      };
+
+      const contentEl = document.getElementById('content');
+
+      sections.forEach((section) => {
+        const sectionDiv = document.createElement('div');
+        sectionDiv.id = section.id;
+
+        section.spinners.forEach((spinnerName) => {
+          const heading = document.createElement('h2');
+          heading.textContent = formatTitle(spinnerName);
+          sectionDiv.appendChild(heading);
+
+          const grid = document.createElement('div');
+          grid.className = 'grid';
+
+          spinnerSizes.forEach((size) => {
+            const item = document.createElement('div');
+            item.className = 'grid-item';
+
+            const spinner = document.createElement('ion-spinner');
+            spinner.setAttribute('name', spinnerName);
+            if (size.value) {
+              spinner.setAttribute('size', size.value);
+            }
+
+            const label = document.createElement('p');
+            label.textContent = size.label;
+
+            item.appendChild(spinner);
+            item.appendChild(label);
+            grid.appendChild(item);
+          });
+
+          sectionDiv.appendChild(grid);
+        });
+
+        contentEl.appendChild(sectionDiv);
+      });
+    </script>
   </body>
 </html>
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts b/core/src/components/spinner/test/size/spinner.e2e.ts
index bb62285cba0..79452e7b885 100644
--- a/core/src/components/spinner/test/size/spinner.e2e.ts
+++ b/core/src/components/spinner/test/size/spinner.e2e.ts
@@ -3,14 +3,16 @@ import { configs, test } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across directions.
+ *
+ * `ios` does not differ from `md`.
  */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
   test.describe(title('spinner: size'), () => {
     test('should render xsmall spinner', async ({ page }) => {
       await page.setContent(
         `
-        <ion-spinner size="xsmall"></ion-spinner>
-      `,
+          <ion-spinner size="xsmall"></ion-spinner>
+        `,
         config
       );
 
@@ -22,8 +24,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
     test('should render small spinner', async ({ page }) => {
       await page.setContent(
         `
-        <ion-spinner size="small"></ion-spinner>
-      `,
+          <ion-spinner size="small"></ion-spinner>
+        `,
         config
       );
 
@@ -35,8 +37,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
     test('should render medium spinner', async ({ page }) => {
       await page.setContent(
         `
-        <ion-spinner size="medium"></ion-spinner>
-      `,
+          <ion-spinner size="medium"></ion-spinner>
+        `,
         config
       );
 
@@ -48,8 +50,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
     test('should render large spinner', async ({ page }) => {
       await page.setContent(
         `
-        <ion-spinner size="large"></ion-spinner>
-      `,
+          <ion-spinner size="large"></ion-spinner>
+        `,
         config
       );
 
@@ -61,8 +63,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
     test('should render xlarge spinner', async ({ page }) => {
       await page.setContent(
         `
-        <ion-spinner size="xlarge"></ion-spinner>
-      `,
+          <ion-spinner size="xlarge"></ion-spinner>
+        `,
         config
       );
 
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50a012eb4da
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0d49fa723f2
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..545d00d08d6
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-large-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7f2d0ea6801
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..48a527a9e7b
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..208df033c13
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-medium-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2958f7f88a4
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b844d7104ac
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..adde2f79659
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-small-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1695dbf30cd
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5f7414866ce
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..570231fd198
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xlarge-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4e94dd353c3
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7a457da8bfd
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Safari-linux.png b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8f5903e82c8
Binary files /dev/null and b/core/src/components/spinner/test/size/spinner.e2e.ts-snapshots/spinner-size-xsmall-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index 10687c955ea..3f6403146de 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -25,6 +25,10 @@ export const defaultTheme: DefaultTheme = {
         shape: 'round',
         size: 'large',
       },
+
+      IonSpinner: {
+        size: 'xsmall',
+      },
     },
   },
 
@@ -261,5 +265,73 @@ export const defaultTheme: DefaultTheme = {
         },
       },
     },
+
+    IonSpinner: {
+      color: '#626262',
+
+      lines: {
+        stroke: {
+          width: 'var(--ion-scaling-150)',
+        },
+
+        small: {
+          stroke: {
+            width: 'var(--ion-scaling-150)',
+          },
+        },
+
+        sharp: {
+          stroke: {
+            width: 'var(--ion-scaling-100)',
+          },
+
+          small: {
+            stroke: {
+              width: 'var(--ion-scaling-100)',
+            },
+          },
+        },
+      },
+
+      circular: {
+        stroke: {
+          width: '5.6',
+        },
+      },
+
+      crescent: {
+        stroke: {
+          width: 'var(--ion-scaling-100)',
+        },
+      },
+
+      // Sizes
+      size: {
+        xsmall: {
+          width: 'var(--ion-scaling-xs)',
+          height: 'var(--ion-scaling-xs)',
+        },
+
+        small: {
+          width: 'var(--ion-scaling-md)',
+          height: 'var(--ion-scaling-md)',
+        },
+
+        medium: {
+          width: 'var(--ion-scaling-lg)',
+          height: 'var(--ion-scaling-lg)',
+        },
+
+        large: {
+          width: 'var(--ion-scaling-xl)',
+          height: 'var(--ion-scaling-xl)',
+        },
+
+        xlarge: {
+          width: 'var(--ion-scaling-xxl)',
+          height: 'var(--ion-scaling-xxl)',
+        },
+      },
+    },
   },
 };
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index c426ff9ab65..41c60aa3db3 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -32,6 +32,10 @@ export const defaultTheme: DefaultTheme = {
         shape: 'soft',
         size: 'large',
       },
+
+      IonSpinner: {
+        size: 'medium',
+      },
     },
   },
 
@@ -400,5 +404,73 @@ export const defaultTheme: DefaultTheme = {
         },
       },
     },
+
+    IonSpinner: {
+      color: 'var(--ion-text-color, #000)',
+
+      lines: {
+        stroke: {
+          width: '7px',
+        },
+
+        small: {
+          stroke: {
+            width: '7px',
+          },
+        },
+
+        sharp: {
+          stroke: {
+            width: 'var(--ion-scaling-100)',
+          },
+
+          small: {
+            stroke: {
+              width: 'var(--ion-scaling-100)',
+            },
+          },
+        },
+      },
+
+      circular: {
+        stroke: {
+          width: '5.6',
+        },
+      },
+
+      crescent: {
+        stroke: {
+          width: 'var(--ion-scaling-100)',
+        },
+      },
+
+      // Sizes
+      size: {
+        xsmall: {
+          width: 'var(--ion-scaling-400)',
+          height: 'var(--ion-scaling-400)',
+        },
+
+        small: {
+          width: 'var(--ion-scaling-xxs)',
+          height: 'var(--ion-scaling-xxs)',
+        },
+
+        medium: {
+          width: 'var(--ion-scaling-sm)',
+          height: 'var(--ion-scaling-sm)',
+        },
+
+        large: {
+          width: 'var(--ion-scaling-lg)',
+          height: 'var(--ion-scaling-lg)',
+        },
+
+        xlarge: {
+          width: 'var(--ion-scaling-xxxl)',
+          height: 'var(--ion-scaling-xxxl)',
+        },
+      },
+    },
   },
 };
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 6de8c3c547b..61617bd3817 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -35,6 +35,10 @@ export const defaultTheme: DefaultTheme = {
         shape: 'soft',
         size: 'large',
       },
+
+      IonSpinner: {
+        size: 'medium',
+      },
     },
   },
 
@@ -397,5 +401,73 @@ export const defaultTheme: DefaultTheme = {
         },
       },
     },
+
+    IonSpinner: {
+      color: 'var(--ion-text-color, #000)',
+
+      lines: {
+        stroke: {
+          width: '7px',
+        },
+
+        small: {
+          stroke: {
+            width: '7px',
+          },
+        },
+
+        sharp: {
+          stroke: {
+            width: 'var(--ion-scaling-100)',
+          },
+
+          small: {
+            stroke: {
+              width: 'var(--ion-scaling-100)',
+            },
+          },
+        },
+      },
+
+      circular: {
+        stroke: {
+          width: '5.6',
+        },
+      },
+
+      crescent: {
+        stroke: {
+          width: 'var(--ion-scaling-100)',
+        },
+      },
+
+      // Sizes
+      size: {
+        xsmall: {
+          width: 'var(--ion-scaling-xxxs)',
+          height: 'var(--ion-scaling-xxxs)',
+        },
+
+        small: {
+          width: 'var(--ion-scaling-xxs)',
+          height: 'var(--ion-scaling-xxs)',
+        },
+
+        medium: {
+          width: 'var(--ion-scaling-sm)',
+          height: 'var(--ion-scaling-sm)',
+        },
+
+        large: {
+          width: 'var(--ion-scaling-lg)',
+          height: 'var(--ion-scaling-lg)',
+        },
+
+        xlarge: {
+          width: 'var(--ion-scaling-xxxl)',
+          height: 'var(--ion-scaling-xxxl)',
+        },
+      },
+    },
   },
 };
diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts
index dd236fff88b..5cbf366e37b 100644
--- a/core/src/themes/themes.interfaces.ts
+++ b/core/src/themes/themes.interfaces.ts
@@ -1,4 +1,5 @@
-import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces';
+import type { IonChipConfig, IonChipRecipe } from '../components/chip/chip.interfaces';
+import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces';
 import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
 
 // Platform-specific theme
@@ -245,6 +246,7 @@ export type BaseTheme = {
 export type IonicConfig = IonicGlobalConfig & {
   components?: {
     IonChip?: IonChipConfig;
+    IonSpinner?: IonSpinnerConfig;
   };
 };
 
@@ -282,6 +284,7 @@ export type DefaultTheme = BaseTheme & {
 
 type Components = {
   IonChip?: IonChipRecipe;
+  IonSpinner?: IonSpinnerRecipe;
 
   IonCard?: any;
   IonItem?: any;
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 19731f54a06..b74882e957e 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -2286,14 +2286,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size'],
 })
 export class IonSpinner {
   protected el: HTMLIonSpinnerElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 15cfacbfdc1..49ce468b73f 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -2023,14 +2023,14 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSpinner,
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme']
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size']
 })
 @Component({
   selector: 'ion-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size', 'theme'],
+  inputs: ['color', 'duration', 'mode', 'name', 'paused', 'size'],
   standalone: true
 })
 export class IonSpinner {