diff --git a/packages/components/src/spinner/index.js b/packages/components/src/spinner/index.js
index cec2053ab27e1..0491e08903069 100644
--- a/packages/components/src/spinner/index.js
+++ b/packages/components/src/spinner/index.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { StyledSpinner } from './styles/spinner-styles';
+
 export default function Spinner() {
-	return <span className="components-spinner" />;
+	return <StyledSpinner className="components-spinner" />;
 }
diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss
deleted file mode 100644
index b674920ed8485..0000000000000
--- a/packages/components/src/spinner/style.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.components-spinner {
-	display: inline-block;
-	background-color: $gray-600;
-	width: $spinner-size;
-	height: $spinner-size;
-	opacity: 0.7;
-	margin: 5px 11px 0;
-	border-radius: 100%;
-	position: relative;
-
-	&::before {
-		/* rtl:begin:ignore */
-		content: "";
-		position: absolute;
-		background-color: $white;
-		top: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
-		left: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
-		width: ( $spinner-size / 4.5 );
-		height: ( $spinner-size / 4.5 );
-		border-radius: 100%;
-		transform-origin: ( $spinner-size / 3 ) ( $spinner-size / 3 );
-		animation: components-spinner__animation 1s infinite linear;
-		/* rtl:end:ignore */
-	}
-}
-
-@keyframes components-spinner__animation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
diff --git a/packages/components/src/spinner/styles/spinner-styles.js b/packages/components/src/spinner/styles/spinner-styles.js
new file mode 100644
index 0000000000000..8f30a9febfbd2
--- /dev/null
+++ b/packages/components/src/spinner/styles/spinner-styles.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { color, config } from '../../utils';
+
+const spinAnimation = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+`;
+
+const topLeft = `calc( ( ${ config( 'spinnerSize' ) } - ${ config(
+	'spinnerSize'
+) } * ( 2 / 3 ) ) / 2 )`;
+
+export const StyledSpinner = styled.span`
+	display: inline-block;
+	background-color: ${ color( 'gray.600' ) };
+	width: ${ config( 'spinnerSize' ) };
+	height: ${ config( 'spinnerSize' ) };
+	opacity: 0.7;
+	margin: 5px 11px 0;
+	border-radius: 100%;
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		background-color: ${ color( 'white' ) };
+		top: ${ topLeft };
+		left: ${ topLeft };
+		width: calc( ${ config( 'spinnerSize' ) } / 4.5 );
+		height: calc( ${ config( 'spinnerSize' ) } / 4.5 );
+		border-radius: 100%;
+		transform-origin: calc( ${ config( 'spinnerSize' ) } / 3 )
+			calc( ${ config( 'spinnerSize' ) } / 3 );
+		animation: ${ spinAnimation } 1s infinite linear;
+	}
+`;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index ed1af2a7d2855..a7b92c1192b13 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -36,7 +36,6 @@
 @import "./scroll-lock/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
-@import "./spinner/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index b9e2313c6bbb4..c22d2ece81397 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -169,6 +169,7 @@ export const COLORS = {
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,
 	blue: merge( {}, BLUE, G2.blue ),
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 8cdad98540154..21311424087ae 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -3,4 +3,5 @@ export default {
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
+	spinnerSize: '18px',
 };