diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png
new file mode 100644
index 0000000000..f93690b306
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png
new file mode 100644
index 0000000000..b874928bf5
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..c79d779d59
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-default-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-desktop-1-snap.png
new file mode 100644
index 0000000000..357ccec993
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-android-1-snap.png
new file mode 100644
index 0000000000..6e0a52d0d8
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..eaa0c92b09
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/spinner-screenshot-test-tsx-spinner-inverse-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/spinner-screenshot-test.tsx b/src/__screenshot_tests__/spinner-screenshot-test.tsx
new file mode 100644
index 0000000000..1297faafb1
--- /dev/null
+++ b/src/__screenshot_tests__/spinner-screenshot-test.tsx
@@ -0,0 +1,28 @@
+import {openStoryPage, screen} from '../test-utils';
+
+const DEVICES = ['DESKTOP', 'MOBILE_ANDROID', 'MOBILE_IOS'] as const;
+
+test.each(DEVICES)('Spinner - default %s', async (device) => {
+    await openStoryPage({
+        id: 'components-spinner--default',
+        device,
+    });
+
+    const spinner = await screen.findByLabelText('Cargando');
+
+    const image = await spinner.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(DEVICES)('Spinner - inverse %s', async (device) => {
+    await openStoryPage({
+        id: 'components-spinner--default',
+        device,
+        args: {inverse: true},
+    });
+
+    const spinner = await screen.findByLabelText('Cargando');
+
+    const image = await spinner.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__stories__/spinner-story.tsx b/src/__stories__/spinner-story.tsx
index 443797a4e2..087485a56e 100644
--- a/src/__stories__/spinner-story.tsx
+++ b/src/__stories__/spinner-story.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Spinner} from '..';
+import {Box, ResponsiveLayout, Spinner} from '..';
 
 export default {
     title: 'Components/Spinner',
@@ -9,17 +9,26 @@ export default {
             control: {type: 'range', min: 24, max: 100, step: 4},
         },
     },
+    parameters: {fullScreen: true},
 };
 
 type Args = {
     size: number;
+    inverse: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({size}) => {
-    return <Spinner size={size} />;
+export const Default: StoryComponent<Args> = ({size, inverse}) => {
+    return (
+        <ResponsiveLayout isInverse={inverse} fullWidth>
+            <Box padding={16}>
+                <Spinner size={size} />
+            </Box>
+        </ResponsiveLayout>
+    );
 };
 
 Default.storyName = 'Spinner';
 Default.args = {
     size: 24,
+    inverse: false,
 };
diff --git a/src/spinner.tsx b/src/spinner.tsx
index c551994947..8bc2b814aa 100644
--- a/src/spinner.tsx
+++ b/src/spinner.tsx
@@ -5,6 +5,7 @@ import FadeIn from './fade-in';
 import {useAriaId, useTheme} from './hooks';
 import * as styles from './spinner.css';
 import {vars} from './skins/skin-contract.css';
+import {useIsInverseVariant} from './theme-variant-context';
 
 type Props = {
     color?: string;
@@ -17,7 +18,8 @@ type Props = {
 
 const Spinner: React.FC<Props> = ({color, delay = '500ms', size = 24, style, rolePresentation}) => {
     const {texts, platformOverrides} = useTheme();
-    color = color || vars.colors.controlActivated;
+    const isInverse = useIsInverseVariant();
+    color = color || (isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated);
     const spinnerId = useAriaId();
     const withTitle = !rolePresentation;
     const title = texts.loading;