diff --git a/.changeset/stupid-teachers-jump.md b/.changeset/stupid-teachers-jump.md
new file mode 100644
index 0000000000..38102fc2ce
--- /dev/null
+++ b/.changeset/stupid-teachers-jump.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": minor
+---
+
+Migrate icons sizes from px to remu using new theme `sizing` prop
diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
index 0a16d4fe7b..e6ab49ef5e 100644
--- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
@@ -163,10 +163,10 @@ exports[`DateField > should render correctly 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-12 .fillStroke {
@@ -399,10 +399,10 @@ exports[`DateField > should render correctly disabled 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-12 .fillStroke {
@@ -636,10 +636,10 @@ exports[`DateField > should trigger events 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-12 .fillStroke {
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
index 9dc719b85e..5d9ce834b9 100644
--- a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -209,10 +209,10 @@ exports[`SelectInputField > should display right value on grouped options 1`] =
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1075,10 +1075,10 @@ exports[`SelectInputField > should render correctly 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1343,10 +1343,10 @@ exports[`SelectInputField > should render correctly disabled 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1611,10 +1611,10 @@ exports[`SelectInputField > should render correctly grouped 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1879,10 +1879,10 @@ exports[`SelectInputField > should render correctly multiselect 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
@@ -2145,10 +2145,10 @@ exports[`SelectInputField > should trigger events 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-13 .fillStroke {
diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
index 5055618d23..f3e77475d9 100644
--- a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap
@@ -459,10 +459,10 @@ exports[`UnitInputField > should handles onChange and selection 1`] = `
 .emotion-28 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-28 .fillStroke {
@@ -1090,10 +1090,10 @@ exports[`UnitInputField > should render correctly 1`] = `
 .emotion-26 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-26 .fillStroke {
diff --git a/packages/icons/src/components/Icon/Icon.tsx b/packages/icons/src/components/Icon/Icon.tsx
index da92332b76..b662ecd34b 100644
--- a/packages/icons/src/components/Icon/Icon.tsx
+++ b/packages/icons/src/components/Icon/Icon.tsx
@@ -1,3 +1,4 @@
+import type { Theme } from '@emotion/react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { consoleLightTheme as theme } from '@ultraviolet/themes'
@@ -6,10 +7,10 @@ import { forwardRef } from 'react'
 import capitalize from '../../utils/capitalize'
 
 const SIZES = {
-  small: 16,
-  large: 20,
-  xlarge: 32,
-  xxlarge: 56,
+  small: '200',
+  large: '250',
+  xlarge: '400',
+  xxlarge: '700',
 } as const
 
 type Color = Extract<
@@ -25,15 +26,17 @@ type Color = Extract<
 
 const sizeStyles = ({
   size,
+  theme,
 }: {
   size: keyof typeof SIZES | number | string
+  theme: Theme
 }) => {
   if (typeof size === 'string' && size in SIZES) {
     return css`
-        height: ${SIZES[size as keyof typeof SIZES]}px;
-        width: ${SIZES[size as keyof typeof SIZES]}px;
-        min-width: ${SIZES[size as keyof typeof SIZES]}px;
-        min-height: ${SIZES[size as keyof typeof SIZES]}px;
+        height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        min-width: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
+        min-height: ${theme.sizing[SIZES[size as keyof typeof SIZES]]};
     `
   }
 
diff --git a/packages/icons/src/components/Logo/Icon.tsx b/packages/icons/src/components/Logo/Icon.tsx
index 55bf21bf6f..d1dbb4095e 100644
--- a/packages/icons/src/components/Logo/Icon.tsx
+++ b/packages/icons/src/components/Logo/Icon.tsx
@@ -2,19 +2,19 @@ import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 
 const SIZES = {
-  small: 16,
-  medium: 20,
-  large: 32,
-  xlarge: 56,
-}
+  small: '200',
+  medium: '250',
+  large: '400',
+  xlarge: '700',
+} as const
 
 const StyledIcon = styled('svg', {
   shouldForwardProp: prop => !['size'].includes(prop),
 })<{ size: keyof typeof SIZES }>`
   & {
-    width: ${({ size }) => `${SIZES[size]}px`};
-    min-width: ${({ size }) => `${SIZES[size]}px`}; // This is to avoid the icon to shrink when the text is too long
-    height: ${({ size }) => `${SIZES[size]}px`};
+    width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
+    min-width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`}; // This is to avoid the icon to shrink when the text is too long
+    height: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
   }
 `
 
diff --git a/packages/icons/src/components/ProductIcon/Icon.tsx b/packages/icons/src/components/ProductIcon/Icon.tsx
index 2458a5b0a5..513f5cf373 100644
--- a/packages/icons/src/components/ProductIcon/Icon.tsx
+++ b/packages/icons/src/components/ProductIcon/Icon.tsx
@@ -4,20 +4,20 @@ import type { ReactNode } from 'react'
 type Variants = 'primary' | 'danger' | 'warning' | 'original'
 
 export const SIZES = {
-  xsmall: 24,
-  small: 32,
-  medium: 40,
-  large: 48,
-  xlarge: 64,
+  xsmall: '300',
+  small: '400',
+  medium: '500',
+  large: '600',
+  xlarge: '800',
 } as const
 
 const StyledIcon = styled('svg', {
   shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
 })<{ variant: Variants; disabled?: boolean; size: keyof typeof SIZES }>`
   & {
-    width: ${({ size }) => `${SIZES[size]}px`};
-    min-width: ${({ size }) => `${SIZES[size]}px`}; // This is to avoid the icon to shrink when the text is too long
-    height: ${({ size }) => `${SIZES[size]}px`};
+    width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
+    min-width: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`}; // This is to avoid the icon to shrink when the text is too long
+    height: ${({ size, theme }) => `${theme.sizing[SIZES[size]]}`};
   }
 
   path[fill].fill,
diff --git a/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap
index c8cdd5b13e..1857e747c9 100644
--- a/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap
@@ -378,9 +378,9 @@ exports[`FAQ > should work with productIconName 1`] = `
 }
 
 .emotion-5 {
-  width: 64px;
-  min-width: 64px;
-  height: 64px;
+  width: 4rem;
+  min-width: 4rem;
+  height: 4rem;
 }
 
 .emotion-5 path[fill].fill,
diff --git a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap
index 595b0c5e6d..7a41513f5a 100644
--- a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -1091,9 +1091,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -2262,9 +2262,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -3447,9 +3447,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -4504,9 +4504,9 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -5963,9 +5963,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -7422,9 +7422,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -8895,9 +8895,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
@@ -10354,9 +10354,9 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with
 }
 
 .emotion-4 {
-  width: 32px;
-  min-width: 32px;
-  height: 32px;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
 }
 
 .emotion-4 path[fill].fill,
diff --git a/packages/ui/src/components/Chip/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Chip/__tests__/__snapshots__/index.test.tsx.snap
index fea0b5446f..9418a662db 100644
--- a/packages/ui/src/components/Chip/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Chip/__tests__/__snapshots__/index.test.tsx.snap
@@ -240,10 +240,10 @@ exports[`Checkbox > renders correctly active 1`] = `
 .emotion-6 {
   vertical-align: middle;
   fill: #ffffff;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-6 .fillStroke {
@@ -410,10 +410,10 @@ exports[`Checkbox > renders correctly active disabled 1`] = `
 .emotion-6 {
   vertical-align: middle;
   fill: #f3f3f4;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-6 .fillStroke {
@@ -580,10 +580,10 @@ exports[`Checkbox > renders correctly disabled 1`] = `
 .emotion-6 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-6 .fillStroke {
@@ -750,10 +750,10 @@ exports[`Checkbox > renders correctly large 1`] = `
 .emotion-6 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-6 .fillStroke {
@@ -920,10 +920,10 @@ exports[`Checkbox > renders correctly wiht icon 1`] = `
 .emotion-6 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-6 .fillStroke {
diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
index f6a02203f7..87b51b841c 100644
--- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -241,10 +241,10 @@ exports[`DateInput > render correctly with a array of dates to exclude 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -1573,10 +1573,10 @@ exports[`DateInput > render correctly with a range of date 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -1877,10 +1877,10 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -2200,10 +2200,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -3077,10 +3077,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -3994,10 +3994,10 @@ exports[`DateInput > renders correctly custom format with range 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -4299,10 +4299,10 @@ exports[`DateInput > renders correctly disabled 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -4601,10 +4601,10 @@ exports[`DateInput > renders correctly error 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #b3144d;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-18 .fillStroke {
@@ -4641,10 +4641,10 @@ exports[`DateInput > renders correctly error 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-22 .fillStroke {
@@ -4973,10 +4973,10 @@ exports[`DateInput > renders correctly error disabled 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-18 .fillStroke {
@@ -5013,10 +5013,10 @@ exports[`DateInput > renders correctly error disabled 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-22 .fillStroke {
@@ -5360,10 +5360,10 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
 .emotion-20 {
   vertical-align: middle;
   fill: #ffbbd3;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-20 .fillStroke {
@@ -5400,10 +5400,10 @@ exports[`DateInput > renders correctly error disabled required 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-24 .fillStroke {
@@ -5744,10 +5744,10 @@ exports[`DateInput > renders correctly min-max 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -6061,10 +6061,10 @@ exports[`DateInput > renders correctly required 1`] = `
 .emotion-20 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-20 .fillStroke {
@@ -6393,10 +6393,10 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -7623,10 +7623,10 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -8853,10 +8853,10 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
@@ -10063,10 +10063,10 @@ exports[`DateInput > renders correctly with default props 1`] = `
 .emotion-18 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-18 .fillStroke {
diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
index 1e2a3cd9ed..24178229f1 100644
--- a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
@@ -3984,10 +3984,10 @@ exports[`List > Should render correctly with info 1`] = `
 .emotion-12 {
   vertical-align: middle;
   fill: #727683;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-12 .fillStroke {
diff --git a/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap
index 45e8e13a15..cb0babe53c 100644
--- a/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -1553,10 +1553,10 @@ exports[`SearchInput > renders with error prop 1`] = `
 .emotion-15 {
   vertical-align: middle;
   fill: #b3144d;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-15 .fillStroke {
diff --git a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
index f7f30ef786..f6b8b0a000 100644
--- a/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/SelectableCard/__tests__/__snapshots__/index.test.tsx.snap
@@ -5119,9 +5119,9 @@ exports[`SelectableCard > renders correctly with productIcon 1`] = `
 }
 
 .emotion-26 {
-  width: 48px;
-  min-width: 48px;
-  height: 48px;
+  width: 3rem;
+  min-width: 3rem;
+  height: 3rem;
 }
 
 .emotion-26 path[fill].fill,
diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
index a85fa381e0..0f9c637dd7 100644
--- a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1222,10 +1222,10 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
 .emotion-13 {
   vertical-align: middle;
   fill: #727683;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-13 .fillStroke {
@@ -1800,10 +1800,10 @@ exports[`Table > Should render correctly with info 1`] = `
 .emotion-13 {
   vertical-align: middle;
   fill: #727683;
-  height: 20px;
-  width: 20px;
-  min-width: 20px;
-  min-height: 20px;
+  height: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
 }
 
 .emotion-13 .fillStroke {
diff --git a/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
index 65c8c75842..311cc47e6b 100644
--- a/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TextInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -409,10 +409,10 @@ exports[`TextInputV2 > should render correctly when input  has a error sentiment
 .emotion-14 {
   vertical-align: middle;
   fill: #b3144d;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-14 .fillStroke {
@@ -903,10 +903,10 @@ exports[`TextInputV2 > should render correctly when input has a success sentimen
 .emotion-14 {
   vertical-align: middle;
   fill: #22674e;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-14 .fillStroke {
diff --git a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
index e292d7eca5..be7a2830f9 100644
--- a/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/UnitInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -837,10 +837,10 @@ exports[`UnitInput > renders click 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -851,10 +851,10 @@ exports[`UnitInput > renders click 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -1676,10 +1676,10 @@ exports[`UnitInput > renders with default props 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -2577,10 +2577,10 @@ exports[`UnitInput > renders with default value 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -3482,10 +3482,10 @@ exports[`UnitInput > renders with disabled and placeHolder 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -4400,10 +4400,10 @@ exports[`UnitInput > renders with error  and success 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {
@@ -4414,10 +4414,10 @@ exports[`UnitInput > renders with error  and success 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {
@@ -5358,10 +5358,10 @@ exports[`UnitInput > renders with error 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {
@@ -5372,10 +5372,10 @@ exports[`UnitInput > renders with error 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {
@@ -6338,10 +6338,10 @@ exports[`UnitInput > renders with label and label information 1`] = `
 .emotion-26 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-26 .fillStroke {
@@ -7288,10 +7288,10 @@ exports[`UnitInput > renders with label and no label information 1`] = `
 .emotion-26 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-26 .fillStroke {
@@ -7811,10 +7811,10 @@ exports[`UnitInput > renders with min max 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -8714,10 +8714,10 @@ exports[`UnitInput > renders with no label and label information 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #b5b7bd;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -9618,10 +9618,10 @@ exports[`UnitInput > renders with size large 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -9632,10 +9632,10 @@ exports[`UnitInput > renders with size large 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -10144,10 +10144,10 @@ exports[`UnitInput > renders with size medioum 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -10656,10 +10656,10 @@ exports[`UnitInput > renders with size small 1`] = `
 .emotion-22 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-22 .fillStroke {
@@ -11573,10 +11573,10 @@ exports[`UnitInput > renders with success 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {
@@ -11587,10 +11587,10 @@ exports[`UnitInput > renders with success 1`] = `
 .emotion-24 {
   vertical-align: middle;
   fill: #3f4250;
-  height: 16px;
-  width: 16px;
-  min-width: 16px;
-  min-height: 16px;
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 
 .emotion-24 .fillStroke {