diff --git a/app/src/components/common/icons/IconSpinner.tsx b/app/src/components/common/icons/IconSpinner.tsx
new file mode 100644
index 0000000000..1c8a102cac
--- /dev/null
+++ b/app/src/components/common/icons/IconSpinner.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface Props {
+  spinnerSize?: string
+}
+
+export const IconSpinner = (props: Props) => {
+  const { spinnerSize = '40' } = props
+  return (
+    <svg fill="none" height={spinnerSize} viewBox="0 0 40 40" width={spinnerSize} xmlns="http://www.w3.org/2000/svg">
+      <circle cx="20" cy="20" r="19" stroke="#E8EAF6" strokeWidth="2" />
+      <path
+        d="M20 39C30.4934 39 39 30.4934 39 20C39 9.50659 30.4934 1 20 1C9.50659 1 1 9.50659 1 20"
+        stroke="#3F51B5"
+        strokeWidth="2"
+      />
+    </svg>
+  )
+}
diff --git a/app/src/components/common/icons/index.ts b/app/src/components/common/icons/index.ts
index 86293451d0..529e37776f 100644
--- a/app/src/components/common/icons/index.ts
+++ b/app/src/components/common/icons/index.ts
@@ -23,3 +23,4 @@ export { IconSearchGrey } from './IconSearchGrey'
 export { IconKleros } from './IconKleros'
 export { IconExclamation } from './IconExclamation'
 export { IconSchedule } from './IconSchedule'
+export { IconSpinner } from './IconSpinner'
diff --git a/app/src/components/common/spinner/img/spinnerMain.svg b/app/src/components/common/spinner/img/spinnerMain.svg
deleted file mode 100644
index 84338296f8..0000000000
--- a/app/src/components/common/spinner/img/spinnerMain.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="45" height="45" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="22.5" cy="22.5" r="21" stroke="#DCDFF2" stroke-width="2"/><path d="M22.5 43.5c11.598 0 21-9.402 21-21s-9.402-21-21-21-21 9.402-21 21" stroke="#5C6BC0" stroke-width="2"/></svg>
\ No newline at end of file
diff --git a/app/src/components/common/spinner/img/spinnerMainBig.svg b/app/src/components/common/spinner/img/spinnerMainBig.svg
deleted file mode 100644
index 703bce8deb..0000000000
--- a/app/src/components/common/spinner/img/spinnerMainBig.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <circle id="svg_1" stroke-width="2" stroke="#DCDFF2" r="19" cy="21" cx="21"/>
-  <path id="svg_2" stroke-width="2" stroke="#3F51B5" d="m21,40c10.4934,0 19,-8.5066 19,-19c0,-10.4934 -8.5066,-19 -19,-19c-10.4934,0 -19,8.5066 -19,19"/>
-</svg>
\ No newline at end of file
diff --git a/app/src/components/common/spinner/index.tsx b/app/src/components/common/spinner/index.tsx
index fb05613a21..54818bd798 100644
--- a/app/src/components/common/spinner/index.tsx
+++ b/app/src/components/common/spinner/index.tsx
@@ -1,8 +1,7 @@
 import React, { HTMLAttributes } from 'react'
 import styled, { keyframes } from 'styled-components'
 
-import SpinnerSVG from './img/spinnerMain.svg'
-import SpinnerBigSVG from './img/spinnerMainBig.svg'
+import { IconSpinner } from '../icons'
 
 const rotate = keyframes`
   from {
@@ -13,37 +12,24 @@ const rotate = keyframes`
   }
 `
 
-const RotatingSpinner = styled.div<{ height: string | undefined; width: string | undefined }>`
+const RotatingSpinner = styled.div`
   animation: ${rotate} 2s linear infinite;
   flex-grow: 0;
   flex-shrink: 0;
-  height: ${props => props.height};
-  width: ${props => props.width};
-`
-
-RotatingSpinner.defaultProps = {
-  height: '42px',
-  width: '42px',
-}
-
-const SpinnerIcon = styled.img`
-  height: 100%;
-  width: 100%;
 `
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   color?: string
-  height?: string | undefined
-  width?: string | undefined
+  size?: string
   big?: boolean | undefined
 }
 
 export const Spinner: React.FC<Props> = (props: Props) => {
-  const { big, color = '#fff', height, width, ...restProps } = props
+  const { big, color = '#fff', size, ...restProps } = props
 
   return (
-    <RotatingSpinner color={color} height={height} width={width} {...restProps}>
-      <SpinnerIcon alt="Loading..." src={big ? SpinnerBigSVG : SpinnerSVG} />
+    <RotatingSpinner color={color} {...restProps}>
+      <IconSpinner spinnerSize={big ? '42' : size ? size : '40'} />
     </RotatingSpinner>
   )
 }
diff --git a/app/src/components/market/common/currency_selector/index.tsx b/app/src/components/market/common/currency_selector/index.tsx
index ddf71d7747..3ea0004e7f 100644
--- a/app/src/components/market/common/currency_selector/index.tsx
+++ b/app/src/components/market/common/currency_selector/index.tsx
@@ -100,7 +100,7 @@ export const CurrencySelector: React.FC<Props> = props => {
         dropdownPosition={DropdownPosition.center}
         items={currencyDropdownData}
         maxHeight={true}
-        placeholder={currency && currentItem === undefined ? <Spinner height={'18px'} width={'18px'} /> : placeholder}
+        placeholder={currency && currentItem === undefined ? <Spinner size="18" /> : placeholder}
         selected={false}
       />
     </Wrapper>
diff --git a/app/src/components/market/common/customizable_tokens_select/modal_collateral.tsx b/app/src/components/market/common/customizable_tokens_select/modal_collateral.tsx
index c671ef54f8..8b8d63bd44 100644
--- a/app/src/components/market/common/customizable_tokens_select/modal_collateral.tsx
+++ b/app/src/components/market/common/customizable_tokens_select/modal_collateral.tsx
@@ -58,7 +58,7 @@ export const ModalCollateral = (props: Props) => {
   }
 
   const spinner = () => {
-    return isSpinnerOn && <SpinnerStyled height={'25px'} width={'25px'} />
+    return isSpinnerOn && <SpinnerStyled size="25" />
   }
 
   const tokenDetails = () => {
diff --git a/app/src/components/market/sections/market_create/steps/items/import_market_content.tsx b/app/src/components/market/sections/market_create/steps/items/import_market_content.tsx
index 514135661f..a768273c63 100644
--- a/app/src/components/market/sections/market_create/steps/items/import_market_content.tsx
+++ b/app/src/components/market/sections/market_create/steps/items/import_market_content.tsx
@@ -341,7 +341,7 @@ export const ImportMarketContent = (props: Props) => {
       <EmptyWrapper>
         {state.loading && (
           <>
-            <SpinnerStyled height={'38px'} width={'38px'} />
+            <SpinnerStyled size="38" />
             <CommentLabel>
               importing market from{' '}
               <a href={realitioBaseUrl} target="_blink">
diff --git a/app/src/components/market/sections/market_verify/market_verify.tsx b/app/src/components/market/sections/market_verify/market_verify.tsx
index 810465ae1a..77227c3082 100644
--- a/app/src/components/market/sections/market_verify/market_verify.tsx
+++ b/app/src/components/market/sections/market_verify/market_verify.tsx
@@ -104,7 +104,7 @@ const MarketVerifyWrapper: React.FC<Props> = (props: Props) => {
     <MarketVerification>
       {loading || !data ? (
         <CurationRow>
-          <CustomInlineLoading big message="Loading Curation Services" />
+          <CustomInlineLoading message="Loading Curation Services" />
         </CurationRow>
       ) : (
         <>