diff --git a/src/CheckBox/__tests__/__snapshots__/CheckBox.test.js.snap b/src/CheckBox/__tests__/__snapshots__/CheckBox.test.js.snap
index 26c8de40..3d8820cd 100644
--- a/src/CheckBox/__tests__/__snapshots__/CheckBox.test.js.snap
+++ b/src/CheckBox/__tests__/__snapshots__/CheckBox.test.js.snap
@@ -6,8 +6,8 @@ exports[`<CheckBox /> should render without a problem 1`] = `
   border-image-source: none;
   border-image-width: 0;
   padding: 0;
-  font-size: 1rem;
-  line-height: 1rem;
+  font-size: 10px;
+  line-height: 10px;
 }
 
 .c3 {
@@ -97,15 +97,15 @@ exports[`<CheckBox /> should render without a problem 1`] = `
       <div
         class="c5 c6"
         data-testid="iconContainer"
-        height="1rem"
-        width="1rem"
+        height="10px"
+        width="10px"
       >
         <svg
           data-testid="iconSvg"
-          height="1rem"
+          height="10px"
           style="display: block;"
           viewBox="0 0 512 512"
-          width="1rem"
+          width="10px"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/src/CheckBox/index.js b/src/CheckBox/index.js
index ac429367..433f86e3 100644
--- a/src/CheckBox/index.js
+++ b/src/CheckBox/index.js
@@ -101,7 +101,7 @@ class CheckBox extends PureComponent {
             value={value}
           />
           <StyledCheckbox checked={checked} data-testid="styled-checkBox">
-            <Icon name="check-mark" color={Theme.palette.white} width="1rem" height="1rem" />
+            <Icon name="check-mark" color={Theme.palette.white} width="10px" height="10px" />
           </StyledCheckbox>
           {children}
         </Label>
diff --git a/src/Input/Status/__tests__/__snapshots__/status.test.js.snap b/src/Input/Status/__tests__/__snapshots__/status.test.js.snap
index f12d9529..e99fd014 100644
--- a/src/Input/Status/__tests__/__snapshots__/status.test.js.snap
+++ b/src/Input/Status/__tests__/__snapshots__/status.test.js.snap
@@ -6,8 +6,8 @@ exports[`<Status /> should have different color on icon 1`] = `
   border-image-source: none;
   border-image-width: 0;
   padding: 0;
-  font-size: 2rem;
-  line-height: 2rem;
+  font-size: 20px;
+  line-height: 20px;
   -webkit-animation: iVXCSc 3s linear infinite;
   animation: iVXCSc 3s linear infinite;
 }
@@ -39,15 +39,15 @@ exports[`<Status /> should have different color on icon 1`] = `
   <div
     class="c1"
     data-testid="iconContainer"
-    height="2rem"
-    width="2rem"
+    height="20px"
+    width="20px"
   >
     <svg
       data-testid="iconSvg"
-      height="2rem"
+      height="20px"
       style="display: block;"
       viewBox="0 0 512 512"
-      width="2rem"
+      width="20px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -67,8 +67,8 @@ exports[`<Status /> should have different width and height on icon 1`] = `
   border-image-source: none;
   border-image-width: 0;
   padding: 0;
-  font-size: 1.1rem;
-  line-height: 1.1rem;
+  font-size: 11px;
+  line-height: 11px;
 }
 
 .c0 {
@@ -98,15 +98,15 @@ exports[`<Status /> should have different width and height on icon 1`] = `
   <div
     class="c1"
     data-testid="iconContainer"
-    height="1.1rem"
-    width="1.1rem"
+    height="11px"
+    width="11px"
   >
     <svg
       data-testid="iconSvg"
-      height="1.1rem"
+      height="11px"
       style="display: block;"
       viewBox="0 0 512 512"
-      width="1.1rem"
+      width="11px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -126,8 +126,8 @@ exports[`<Status /> should render without a problem 1`] = `
   border-image-source: none;
   border-image-width: 0;
   padding: 0;
-  font-size: 2rem;
-  line-height: 2rem;
+  font-size: 20px;
+  line-height: 20px;
 }
 
 .c0 {
@@ -157,15 +157,15 @@ exports[`<Status /> should render without a problem 1`] = `
   <div
     class="c1"
     data-testid="iconContainer"
-    height="2rem"
-    width="2rem"
+    height="20px"
+    width="20px"
   >
     <svg
       data-testid="iconSvg"
-      height="2rem"
+      height="20px"
       style="display: block;"
       viewBox="0 0 512 512"
-      width="2rem"
+      width="20px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
diff --git a/src/Input/Status/index.js b/src/Input/Status/index.js
index 8a373852..8a6d9a03 100644
--- a/src/Input/Status/index.js
+++ b/src/Input/Status/index.js
@@ -27,8 +27,8 @@ const Status = ({ className, status }) => (
     <Icon
       color={status === 'loading' ? Theme.palette.primary.default : Theme.palette.white}
       name={statusToIconName[status]}
-      width={['loading', 'info', 'warning'].includes(status) ? '2rem' : '1.1rem'}
-      height={['loading', 'info', 'warning'].includes(status) ? '2rem' : '1.1rem'}
+      width={['loading', 'info', 'warning'].includes(status) ? '20px' : '11px'}
+      height={['loading', 'info', 'warning'].includes(status) ? '20px' : '11px'}
       spin={status === 'loading'}
     />
   </div>
diff --git a/src/Input/TextInput/__tests__/__snapshots__/TextInput.test.js.snap b/src/Input/TextInput/__tests__/__snapshots__/TextInput.test.js.snap
index fec3637f..170909de 100644
--- a/src/Input/TextInput/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/Input/TextInput/__tests__/__snapshots__/TextInput.test.js.snap
@@ -361,8 +361,8 @@ exports[`<TextInput /> should render search status input without problem when fo
   border-image-source: none;
   border-image-width: 0;
   padding: 0;
-  font-size: 1.1rem;
-  line-height: 1.1rem;
+  font-size: 11px;
+  line-height: 11px;
 }
 
 .c2 {
@@ -461,15 +461,15 @@ exports[`<TextInput /> should render search status input without problem when fo
     <div
       class="c3"
       data-testid="iconContainer"
-      height="1.1rem"
-      width="1.1rem"
+      height="11px"
+      width="11px"
     >
       <svg
         data-testid="iconSvg"
-        height="1.1rem"
+        height="11px"
         style="display: block;"
         viewBox="0 0 512 512"
-        width="1.1rem"
+        width="11px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path