diff --git a/package.json b/package.json
index 2abd5cc83..ccabf61de 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "examples:preview": "vite preview examples",
     "examples:storybook": "vite examples --host --clearScreen false --mode storybook",
     "preexamples:preview": "npm run examples:build",
-    "generate": "svgr --out-dir src/lib/icons -- assets/icons",
+    "generate": "svgr --icon --out-dir src/lib/icons -- assets/icons",
     "pregenerate": "del src/lib/icons",
     "postgenerate": "eslint --fix src/lib/icons",
     "format": "eslint --ignore-path .gitignore --fix .",
diff --git a/src/lib/icons/AccessCodeKey.tsx b/src/lib/icons/AccessCodeKey.tsx
index bc2a2b2fc..590685eef 100644
--- a/src/lib/icons/AccessCodeKey.tsx
+++ b/src/lib/icons/AccessCodeKey.tsx
@@ -7,9 +7,10 @@ export function AccessCodeKeyIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Add.tsx b/src/lib/icons/Add.tsx
index 5c5fc45ad..c93112df7 100644
--- a/src/lib/icons/Add.tsx
+++ b/src/lib/icons/Add.tsx
@@ -7,9 +7,10 @@ export function AddIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ArrowBack.tsx b/src/lib/icons/ArrowBack.tsx
index c1a0b5ecd..847b8ee54 100644
--- a/src/lib/icons/ArrowBack.tsx
+++ b/src/lib/icons/ArrowBack.tsx
@@ -7,9 +7,10 @@ export function ArrowBackIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ArrowRestart.tsx b/src/lib/icons/ArrowRestart.tsx
index 6ecfcc30c..fda368f3b 100644
--- a/src/lib/icons/ArrowRestart.tsx
+++ b/src/lib/icons/ArrowRestart.tsx
@@ -7,9 +7,10 @@ export function ArrowRestartIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ArrowRight.tsx b/src/lib/icons/ArrowRight.tsx
index 29f98e84d..506696c15 100644
--- a/src/lib/icons/ArrowRight.tsx
+++ b/src/lib/icons/ArrowRight.tsx
@@ -7,9 +7,10 @@ export function ArrowRightIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/BatteryLevelCritical.tsx b/src/lib/icons/BatteryLevelCritical.tsx
index 2ca781b84..309fa22b4 100644
--- a/src/lib/icons/BatteryLevelCritical.tsx
+++ b/src/lib/icons/BatteryLevelCritical.tsx
@@ -9,9 +9,10 @@ export function BatteryLevelCriticalIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <rect
diff --git a/src/lib/icons/BatteryLevelFull.tsx b/src/lib/icons/BatteryLevelFull.tsx
index 410a6c148..5245be74d 100644
--- a/src/lib/icons/BatteryLevelFull.tsx
+++ b/src/lib/icons/BatteryLevelFull.tsx
@@ -9,9 +9,10 @@ export function BatteryLevelFullIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <rect
diff --git a/src/lib/icons/BatteryLevelHigh.tsx b/src/lib/icons/BatteryLevelHigh.tsx
index 43a1c0ef5..ace7710d7 100644
--- a/src/lib/icons/BatteryLevelHigh.tsx
+++ b/src/lib/icons/BatteryLevelHigh.tsx
@@ -9,9 +9,10 @@ export function BatteryLevelHighIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <rect
diff --git a/src/lib/icons/BatteryLevelLow.tsx b/src/lib/icons/BatteryLevelLow.tsx
index 36f4680d2..42d378990 100644
--- a/src/lib/icons/BatteryLevelLow.tsx
+++ b/src/lib/icons/BatteryLevelLow.tsx
@@ -9,9 +9,10 @@ export function BatteryLevelLowIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <rect
diff --git a/src/lib/icons/BatteryLevelWired.tsx b/src/lib/icons/BatteryLevelWired.tsx
index f8e1b3239..422e46731 100644
--- a/src/lib/icons/BatteryLevelWired.tsx
+++ b/src/lib/icons/BatteryLevelWired.tsx
@@ -9,9 +9,10 @@ export function BatteryLevelWiredIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/Bee.tsx b/src/lib/icons/Bee.tsx
index c4b8735a9..0f1c6d5f2 100644
--- a/src/lib/icons/Bee.tsx
+++ b/src/lib/icons/Bee.tsx
@@ -7,9 +7,10 @@ export function BeeIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={33}
-      height={33}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 33 33'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Check.tsx b/src/lib/icons/Check.tsx
index e644471bf..fa25a9584 100644
--- a/src/lib/icons/Check.tsx
+++ b/src/lib/icons/Check.tsx
@@ -7,9 +7,10 @@ export function CheckIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/CheckBlack.tsx b/src/lib/icons/CheckBlack.tsx
index cb1572045..52016307d 100644
--- a/src/lib/icons/CheckBlack.tsx
+++ b/src/lib/icons/CheckBlack.tsx
@@ -7,9 +7,10 @@ export function CheckBlackIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={14}
-      height={12}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 14 12'
       {...props}
     >
       <path
diff --git a/src/lib/icons/CheckGreen.tsx b/src/lib/icons/CheckGreen.tsx
index b718774d6..ae18db947 100644
--- a/src/lib/icons/CheckGreen.tsx
+++ b/src/lib/icons/CheckGreen.tsx
@@ -7,9 +7,10 @@ export function CheckGreenIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/CheckboxBlank.tsx b/src/lib/icons/CheckboxBlank.tsx
index 6c77a6bd2..f92850cac 100644
--- a/src/lib/icons/CheckboxBlank.tsx
+++ b/src/lib/icons/CheckboxBlank.tsx
@@ -7,9 +7,10 @@ export function CheckboxBlankIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/CheckboxFilled.tsx b/src/lib/icons/CheckboxFilled.tsx
index e35943bbc..164f955e0 100644
--- a/src/lib/icons/CheckboxFilled.tsx
+++ b/src/lib/icons/CheckboxFilled.tsx
@@ -9,9 +9,10 @@ export function CheckboxFilledIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ChevronDown.tsx b/src/lib/icons/ChevronDown.tsx
index 8880569e2..598733ad5 100644
--- a/src/lib/icons/ChevronDown.tsx
+++ b/src/lib/icons/ChevronDown.tsx
@@ -7,9 +7,10 @@ export function ChevronDownIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={20}
-      height={20}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 20 20'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ChevronRight.tsx b/src/lib/icons/ChevronRight.tsx
index d71480e03..0ef13d26d 100644
--- a/src/lib/icons/ChevronRight.tsx
+++ b/src/lib/icons/ChevronRight.tsx
@@ -7,9 +7,10 @@ export function ChevronRightIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ChevronWide.tsx b/src/lib/icons/ChevronWide.tsx
index 973d9046a..6fdb1611c 100644
--- a/src/lib/icons/ChevronWide.tsx
+++ b/src/lib/icons/ChevronWide.tsx
@@ -7,9 +7,10 @@ export function ChevronWideIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ClimateSettingSchedule.tsx b/src/lib/icons/ClimateSettingSchedule.tsx
index f9af35259..7f21f343d 100644
--- a/src/lib/icons/ClimateSettingSchedule.tsx
+++ b/src/lib/icons/ClimateSettingSchedule.tsx
@@ -9,9 +9,10 @@ export function ClimateSettingScheduleIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={19}
-      height={22}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 19 22'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Clock.tsx b/src/lib/icons/Clock.tsx
index 01830fcb9..5704b3707 100644
--- a/src/lib/icons/Clock.tsx
+++ b/src/lib/icons/Clock.tsx
@@ -7,9 +7,10 @@ export function ClockIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/Close.tsx b/src/lib/icons/Close.tsx
index 52a266455..8158ffba9 100644
--- a/src/lib/icons/Close.tsx
+++ b/src/lib/icons/Close.tsx
@@ -7,9 +7,10 @@ export function CloseIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/CloseWhite.tsx b/src/lib/icons/CloseWhite.tsx
index ee72fe0bb..00dcb77ea 100644
--- a/src/lib/icons/CloseWhite.tsx
+++ b/src/lib/icons/CloseWhite.tsx
@@ -7,9 +7,10 @@ export function CloseWhiteIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/Copy.tsx b/src/lib/icons/Copy.tsx
index 8e571eac1..685ed7b2e 100644
--- a/src/lib/icons/Copy.tsx
+++ b/src/lib/icons/Copy.tsx
@@ -7,9 +7,10 @@ export function CopyIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 25'
       {...props}
     >
       <path
diff --git a/src/lib/icons/DotsEllipsisMore.tsx b/src/lib/icons/DotsEllipsisMore.tsx
index 1243dbcd4..b74fd8d1f 100644
--- a/src/lib/icons/DotsEllipsisMore.tsx
+++ b/src/lib/icons/DotsEllipsisMore.tsx
@@ -9,9 +9,10 @@ export function DotsEllipsisMoreIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/Edit.tsx b/src/lib/icons/Edit.tsx
index fdf0824ac..fb68adcd0 100644
--- a/src/lib/icons/Edit.tsx
+++ b/src/lib/icons/Edit.tsx
@@ -7,9 +7,10 @@ export function EditIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ExclamationCircle.tsx b/src/lib/icons/ExclamationCircle.tsx
index 093a5b904..2819bcc09 100644
--- a/src/lib/icons/ExclamationCircle.tsx
+++ b/src/lib/icons/ExclamationCircle.tsx
@@ -9,9 +9,10 @@ export function ExclamationCircleIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ExclamationCircleOutline.tsx b/src/lib/icons/ExclamationCircleOutline.tsx
index bdba77bca..56176e0dd 100644
--- a/src/lib/icons/ExclamationCircleOutline.tsx
+++ b/src/lib/icons/ExclamationCircleOutline.tsx
@@ -9,9 +9,10 @@ export function ExclamationCircleOutlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/Fan.tsx b/src/lib/icons/Fan.tsx
index a2b1b0a8d..4c49495f0 100644
--- a/src/lib/icons/Fan.tsx
+++ b/src/lib/icons/Fan.tsx
@@ -7,9 +7,10 @@ export function FanIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 18'
       {...props}
     >
       <path
diff --git a/src/lib/icons/FanOutline.tsx b/src/lib/icons/FanOutline.tsx
index 68eef6f64..6e1be200d 100644
--- a/src/lib/icons/FanOutline.tsx
+++ b/src/lib/icons/FanOutline.tsx
@@ -7,9 +7,10 @@ export function FanOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={22}
-      height={22}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 22 22'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Info.tsx b/src/lib/icons/Info.tsx
index 83000aba4..0eb62350f 100644
--- a/src/lib/icons/Info.tsx
+++ b/src/lib/icons/Info.tsx
@@ -7,9 +7,10 @@ export function InfoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/InfoBlue.tsx b/src/lib/icons/InfoBlue.tsx
index bc593f46c..9b4550872 100644
--- a/src/lib/icons/InfoBlue.tsx
+++ b/src/lib/icons/InfoBlue.tsx
@@ -7,9 +7,10 @@ export function InfoBlueIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/InfoDark.tsx b/src/lib/icons/InfoDark.tsx
index 49a0f7390..9057c9330 100644
--- a/src/lib/icons/InfoDark.tsx
+++ b/src/lib/icons/InfoDark.tsx
@@ -7,9 +7,10 @@ export function InfoDarkIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={19}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 19 19'
       {...props}
     >
       <circle cx={9.755} cy={9.416} r={6.655} fill='#E9EDEF' />
diff --git a/src/lib/icons/LockLocked.tsx b/src/lib/icons/LockLocked.tsx
index 178bd0749..99f4426f0 100644
--- a/src/lib/icons/LockLocked.tsx
+++ b/src/lib/icons/LockLocked.tsx
@@ -7,9 +7,10 @@ export function LockLockedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/LockUnlocked.tsx b/src/lib/icons/LockUnlocked.tsx
index 0e2415dff..d74a00de1 100644
--- a/src/lib/icons/LockUnlocked.tsx
+++ b/src/lib/icons/LockUnlocked.tsx
@@ -7,9 +7,10 @@ export function LockUnlockedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/NoiseLevels.tsx b/src/lib/icons/NoiseLevels.tsx
index 1766cec61..d61efa985 100644
--- a/src/lib/icons/NoiseLevels.tsx
+++ b/src/lib/icons/NoiseLevels.tsx
@@ -7,9 +7,10 @@ export function NoiseLevelsIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <path
diff --git a/src/lib/icons/NoiseLevelsRed.tsx b/src/lib/icons/NoiseLevelsRed.tsx
index 2daeae137..cead1b8c1 100644
--- a/src/lib/icons/NoiseLevelsRed.tsx
+++ b/src/lib/icons/NoiseLevelsRed.tsx
@@ -9,9 +9,10 @@ export function NoiseLevelsRedIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Off.tsx b/src/lib/icons/Off.tsx
index 9adbf3a85..88f0502da 100644
--- a/src/lib/icons/Off.tsx
+++ b/src/lib/icons/Off.tsx
@@ -7,9 +7,10 @@ export function OffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/OnlineStatusAccountOffline.tsx b/src/lib/icons/OnlineStatusAccountOffline.tsx
index 50cbf5fbd..eea1970dd 100644
--- a/src/lib/icons/OnlineStatusAccountOffline.tsx
+++ b/src/lib/icons/OnlineStatusAccountOffline.tsx
@@ -9,9 +9,10 @@ export function OnlineStatusAccountOfflineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/OnlineStatusDeviceOffline.tsx b/src/lib/icons/OnlineStatusDeviceOffline.tsx
index 70f591340..aed4fc8c7 100644
--- a/src/lib/icons/OnlineStatusDeviceOffline.tsx
+++ b/src/lib/icons/OnlineStatusDeviceOffline.tsx
@@ -9,9 +9,10 @@ export function OnlineStatusDeviceOfflineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <path
diff --git a/src/lib/icons/OnlineStatusOnline.tsx b/src/lib/icons/OnlineStatusOnline.tsx
index ecbcf172c..e117a63d4 100644
--- a/src/lib/icons/OnlineStatusOnline.tsx
+++ b/src/lib/icons/OnlineStatusOnline.tsx
@@ -9,9 +9,10 @@ export function OnlineStatusOnlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/RadioChecked.tsx b/src/lib/icons/RadioChecked.tsx
index c6d83df50..0b6bd8474 100644
--- a/src/lib/icons/RadioChecked.tsx
+++ b/src/lib/icons/RadioChecked.tsx
@@ -7,9 +7,10 @@ export function RadioCheckedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/RadioUnchecked.tsx b/src/lib/icons/RadioUnchecked.tsx
index 5d1dd0125..5e16f04c2 100644
--- a/src/lib/icons/RadioUnchecked.tsx
+++ b/src/lib/icons/RadioUnchecked.tsx
@@ -9,9 +9,10 @@ export function RadioUncheckedIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/Seam.tsx b/src/lib/icons/Seam.tsx
index 41d85a51e..99000098f 100644
--- a/src/lib/icons/Seam.tsx
+++ b/src/lib/icons/Seam.tsx
@@ -7,9 +7,10 @@ export function SeamIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={167}
-      height={200}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 167 200'
       {...props}
     >
       <style>{'@media (prefers-color-scheme:dark){path{fill:#fff}}'}</style>
diff --git a/src/lib/icons/Search.tsx b/src/lib/icons/Search.tsx
index 434f8ed89..848c9da67 100644
--- a/src/lib/icons/Search.tsx
+++ b/src/lib/icons/Search.tsx
@@ -7,9 +7,10 @@ export function SearchIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/TemperatureAdd.tsx b/src/lib/icons/TemperatureAdd.tsx
index 8063da4d8..ce8f33e2a 100644
--- a/src/lib/icons/TemperatureAdd.tsx
+++ b/src/lib/icons/TemperatureAdd.tsx
@@ -9,9 +9,10 @@ export function TemperatureAddIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 18'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/TemperatureSubtract.tsx b/src/lib/icons/TemperatureSubtract.tsx
index cf4b26cba..7a99fc0c7 100644
--- a/src/lib/icons/TemperatureSubtract.tsx
+++ b/src/lib/icons/TemperatureSubtract.tsx
@@ -9,9 +9,10 @@ export function TemperatureSubtractIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 18'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ThermostatCool.tsx b/src/lib/icons/ThermostatCool.tsx
index 019636622..a7b3a60e3 100644
--- a/src/lib/icons/ThermostatCool.tsx
+++ b/src/lib/icons/ThermostatCool.tsx
@@ -9,9 +9,10 @@ export function ThermostatCoolIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ThermostatCoolLarge.tsx b/src/lib/icons/ThermostatCoolLarge.tsx
index 160dee971..4675f72b8 100644
--- a/src/lib/icons/ThermostatCoolLarge.tsx
+++ b/src/lib/icons/ThermostatCoolLarge.tsx
@@ -9,9 +9,10 @@ export function ThermostatCoolLargeIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/ThermostatHeat.tsx b/src/lib/icons/ThermostatHeat.tsx
index 005f9f3e2..544533912 100644
--- a/src/lib/icons/ThermostatHeat.tsx
+++ b/src/lib/icons/ThermostatHeat.tsx
@@ -9,9 +9,10 @@ export function ThermostatHeatIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={12}
-      height={14}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 12 14'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ThermostatHeatCool.tsx b/src/lib/icons/ThermostatHeatCool.tsx
index 24cc912e3..2161f1302 100644
--- a/src/lib/icons/ThermostatHeatCool.tsx
+++ b/src/lib/icons/ThermostatHeatCool.tsx
@@ -9,9 +9,10 @@ export function ThermostatHeatCoolIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={19}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 19 18'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ThermostatHeatLarge.tsx b/src/lib/icons/ThermostatHeatLarge.tsx
index 20a3bbc9f..3fa239a72 100644
--- a/src/lib/icons/ThermostatHeatLarge.tsx
+++ b/src/lib/icons/ThermostatHeatLarge.tsx
@@ -9,9 +9,10 @@ export function ThermostatHeatLargeIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path
diff --git a/src/lib/icons/ThermostatOff.tsx b/src/lib/icons/ThermostatOff.tsx
index ee77db303..369450567 100644
--- a/src/lib/icons/ThermostatOff.tsx
+++ b/src/lib/icons/ThermostatOff.tsx
@@ -7,9 +7,10 @@ export function ThermostatOffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={14}
-      height={14}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 14 14'
       {...props}
     >
       <path
diff --git a/src/lib/icons/TriangleWarning.tsx b/src/lib/icons/TriangleWarning.tsx
index 0f57766c3..0da400066 100644
--- a/src/lib/icons/TriangleWarning.tsx
+++ b/src/lib/icons/TriangleWarning.tsx
@@ -9,9 +9,10 @@ export function TriangleWarningIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask
diff --git a/src/lib/icons/TriangleWarningOutline.tsx b/src/lib/icons/TriangleWarningOutline.tsx
index 4cc2297c7..e2b3ca999 100644
--- a/src/lib/icons/TriangleWarningOutline.tsx
+++ b/src/lib/icons/TriangleWarningOutline.tsx
@@ -9,9 +9,10 @@ export function TriangleWarningOutlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path fill='#FF9800' d='m12 6.49 7.53 13.01H4.47zm0-3.99-11 19h22z' />
diff --git a/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx b/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx
index 93afa84b3..1d5e466dd 100644
--- a/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx
+++ b/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx
@@ -32,7 +32,9 @@ export function DeviceInfo({
       <DetailRow label={t.manufacturer}>
         <div className='seam-detail-row-hstack'>
           {device.properties.model.manufacturer_display_name}
-          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+          {device.properties.manufacturer === 'ecobee' && (
+            <BeeIcon style={{ fontSize: '33px' }} />
+          )}
         </div>
       </DetailRow>
       {!disableConnectedAccountInformation && (
diff --git a/src/lib/ui/Snackbar/Snackbar.tsx b/src/lib/ui/Snackbar/Snackbar.tsx
index f082ce9e5..a9f7a339b 100644
--- a/src/lib/ui/Snackbar/Snackbar.tsx
+++ b/src/lib/ui/Snackbar/Snackbar.tsx
@@ -67,7 +67,10 @@ export function Snackbar({
           'seam-snackbar-visible': automaticVisibility ? !hidden : visible,
         })}
       >
-        <SnackbarIcon variant={variant} />
+        <span className='seam-snackbar-icon-wrap'>
+          <SnackbarIcon variant={variant} />
+        </span>
+
         <div className='seam-snackbar-message-wrap'>
           <p className='seam-snackbar-message'>{message}</p>
         </div>
diff --git a/src/lib/ui/device/BatteryStatusIndicator.tsx b/src/lib/ui/device/BatteryStatusIndicator.tsx
index 1539d9f93..07b72cce2 100644
--- a/src/lib/ui/device/BatteryStatusIndicator.tsx
+++ b/src/lib/ui/device/BatteryStatusIndicator.tsx
@@ -34,7 +34,7 @@ function Content(props: {
   if (status === 'full') {
     return (
       <>
-        <BatteryLevelFullIcon />
+        <BatteryLevelFullIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.full}
           <Percentage level={level} />
@@ -46,7 +46,7 @@ function Content(props: {
   if (status === 'good') {
     return (
       <>
-        <BatteryLevelHighIcon />
+        <BatteryLevelHighIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.high}
           <Percentage level={level} />
@@ -58,7 +58,7 @@ function Content(props: {
   if (status === 'low') {
     return (
       <>
-        <BatteryLevelLowIcon />
+        <BatteryLevelLowIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.low}
           <Percentage level={level} />
@@ -70,7 +70,7 @@ function Content(props: {
   if (status === 'critical') {
     return (
       <>
-        <BatteryLevelCriticalIcon />
+        <BatteryLevelCriticalIcon style={{ fontSize: '24px' }} />
         <span className='seam-text-danger'>
           {t.critical}
           <Percentage level={level} />
diff --git a/src/lib/ui/device/OnlineStatus.tsx b/src/lib/ui/device/OnlineStatus.tsx
index 640531640..98020c985 100644
--- a/src/lib/ui/device/OnlineStatus.tsx
+++ b/src/lib/ui/device/OnlineStatus.tsx
@@ -25,7 +25,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
 function AccountOfflineContent(): JSX.Element {
   return (
     <>
-      <OnlineStatusAccountOfflineIcon />
+      <OnlineStatusAccountOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.accountOffline}</span>
     </>
   )
@@ -36,7 +36,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
   if (isOnline) {
     return (
       <>
-        <OnlineStatusOnlineIcon />
+        <OnlineStatusOnlineIcon className='seam-font-24' />
         <span className='seam-status-text'>{t.online}</span>
       </>
     )
@@ -44,7 +44,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
 
   return (
     <>
-      <OnlineStatusDeviceOfflineIcon />
+      <OnlineStatusDeviceOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.deviceOffline}</span>
     </>
   )
diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 72aac7f45..1c3289ab8 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -25,7 +25,7 @@ export function ClimateModeMenu({
           <div className='seam-climate-mode-menu-button-icon'>
             <ModeIcon mode={mode} />
           </div>
-          <ChevronDownIcon />
+          <ChevronDownIcon className='seam-climate-mode-menu-button-chevron' />
         </button>
       )}
       verticalOffset={-180}
diff --git a/src/lib/ui/thermostat/ClimateSettingStatus.tsx b/src/lib/ui/thermostat/ClimateSettingStatus.tsx
index 160f22b61..5f0ab4dbc 100644
--- a/src/lib/ui/thermostat/ClimateSettingStatus.tsx
+++ b/src/lib/ui/thermostat/ClimateSettingStatus.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
@@ -46,7 +48,14 @@ function ClimateSettingIcon(props: {
   const { mode } = props
 
   return (
-    <div className='seam-climate-setting-status-icon'>
+    <div
+      className={classNames('seam-climate-setting-status-icon', {
+        'seam-climate-setting-status-icon-cool': mode === 'cool',
+        'seam-climate-setting-status-icon-heat': mode === 'heat',
+        'seam-climate-setting-status-icon-heat-cool': mode === 'heat_cool',
+        'seam-climate-setting-status-icon-off': mode === 'off',
+      })}
+    >
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
       {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}
diff --git a/src/lib/ui/thermostat/TemperatureControlGroup.tsx b/src/lib/ui/thermostat/TemperatureControlGroup.tsx
index 1e6917cd1..d285727a3 100644
--- a/src/lib/ui/thermostat/TemperatureControlGroup.tsx
+++ b/src/lib/ui/thermostat/TemperatureControlGroup.tsx
@@ -138,7 +138,7 @@ export function TemperatureControlGroup({
     <div className='seam-temperature-control-group'>
       {showHeat && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatHeatLargeIcon />
+          <ThermostatHeatLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='heat'
             value={heatValue}
@@ -151,7 +151,7 @@ export function TemperatureControlGroup({
 
       {showCool && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatCoolLargeIcon />
+          <ThermostatCoolLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='cool'
             value={coolValue}
diff --git a/src/styles/_access-code-details.scss b/src/styles/_access-code-details.scss
index a1ce97989..33e26114f 100644
--- a/src/styles/_access-code-details.scss
+++ b/src/styles/_access-code-details.scss
@@ -59,7 +59,7 @@
             }
 
             svg {
-              scale: 0.8333;
+              font-size: 20px;
             }
           }
         }
@@ -141,7 +141,7 @@
               }
 
               svg {
-                scale: 0.8333;
+                font-size: 20px;
               }
             }
           }
diff --git a/src/styles/_alert.scss b/src/styles/_alert.scss
index e173131ae..542df33f0 100644
--- a/src/styles/_alert.scss
+++ b/src/styles/_alert.scss
@@ -80,6 +80,7 @@
     .seam-alert-icon {
       width: 24px;
       height: 24px;
+      font-size: 24px;
     }
 
     .seam-alert-content {
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
index 0c694a206..ff6799f5e 100644
--- a/src/styles/_buttons.scss
+++ b/src/styles/_buttons.scss
@@ -11,17 +11,15 @@
     line-height: 0;
     width: 30px;
     height: 30px;
+    font-size: 18px;
+    color: colors.$primary;
 
-    &:hover {
-      background: rgb(0 122 252 / 8%);
+    path {
+      fill: colors.$primary;
     }
 
-    svg {
-      scale: 0.75;
-
-      * {
-        fill: colors.$primary;
-      }
+    &:hover {
+      background: rgb(0 122 252 / 8%);
     }
   }
 }
diff --git a/src/styles/_checkbox.scss b/src/styles/_checkbox.scss
index e8c7a349a..ccc403d07 100644
--- a/src/styles/_checkbox.scss
+++ b/src/styles/_checkbox.scss
@@ -11,6 +11,7 @@
     > .seam-checkbox-icon {
       height: 24px;
       width: 24px;
+      font-size: 24px;
     }
 
     > input {
diff --git a/src/styles/_device-details.scss b/src/styles/_device-details.scss
index 5faec845c..66b5fed87 100644
--- a/src/styles/_device-details.scss
+++ b/src/styles/_device-details.scss
@@ -123,7 +123,7 @@
               }
 
               svg {
-                scale: 0.75;
+                font-size: 18px !important;
                 margin-right: 8px;
               }
 
diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss
index 8326f911c..cb3661b76 100644
--- a/src/styles/_icons.scss
+++ b/src/styles/_icons.scss
@@ -2,6 +2,8 @@
 
 @mixin all {
   .seam-lock-icon {
+    font-size: 24px;
+
     * {
       fill: colors.$text-gray-1;
     }
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
index af760ff72..407d63587 100644
--- a/src/styles/_inputs.scss
+++ b/src/styles/_inputs.scss
@@ -49,7 +49,7 @@
       align-items: center;
 
       svg {
-        scale: 0.8333;
+        font-size: 22px;
       }
 
       &.seam-start {
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index a0b573e4e..06878e9c9 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -18,6 +18,7 @@
       top: 50%;
       transform: translate(4px, -50%);
       left: 0;
+      font-size: 24px;
       cursor: pointer;
     }
 
@@ -281,6 +282,7 @@
       justify-content: center;
       align-items: center;
       transition: transform 0.2s ease-in-out;
+      font-size: 24px;
     }
   }
 }
diff --git a/src/styles/_radio-field.scss b/src/styles/_radio-field.scss
index 85315aa27..5f9909c46 100644
--- a/src/styles/_radio-field.scss
+++ b/src/styles/_radio-field.scss
@@ -20,6 +20,7 @@
       > .seam-radio-icon {
         height: 24px;
         width: 24px;
+        font-size: 24px;
       }
 
       > .seam-radio-label {
diff --git a/src/styles/_seam-table.scss b/src/styles/_seam-table.scss
index 3bb6b3a28..524d43898 100644
--- a/src/styles/_seam-table.scss
+++ b/src/styles/_seam-table.scss
@@ -34,7 +34,7 @@
           justify-content: center;
           margin-right: 4px;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             width: 40px;
             margin-right: 4px;
           }
@@ -60,7 +60,7 @@
           display: flex;
           flex-wrap: wrap;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             font-size: 14px;
           }
 
@@ -82,7 +82,7 @@
         align-items: center;
         justify-content: center;
 
-        @media only screen and (width >= 768px) {
+        @media only screen and (width >=768px) {
           margin-right: 12px;
         }
       }
@@ -92,6 +92,7 @@
         justify-content: center;
         align-items: center;
         margin-right: 8px;
+        font-size: 25px;
       }
     }
 
diff --git a/src/styles/_snackbar.scss b/src/styles/_snackbar.scss
index 7be47089c..d3a652a80 100644
--- a/src/styles/_snackbar.scss
+++ b/src/styles/_snackbar.scss
@@ -40,6 +40,11 @@
       visibility: visible;
     }
 
+    .seam-snackbar-icon-wrap {
+      font-size: 24px;
+      display: inline-flex;
+    }
+
     .seam-snackbar-message-wrap {
       display: flex;
       max-width: 300px;
@@ -101,6 +106,7 @@
       padding: 0;
       cursor: pointer;
       transition: opacity 0.2s ease-in-out;
+      font-size: 24px;
 
       &:hover {
         opacity: 0.75;
diff --git a/src/styles/_supported-device-table-manufacturer-keys.scss b/src/styles/_supported-device-table-manufacturer-keys.scss
index a7a8b6e4a..75fc3861a 100644
--- a/src/styles/_supported-device-table-manufacturer-keys.scss
+++ b/src/styles/_supported-device-table-manufacturer-keys.scss
@@ -14,6 +14,7 @@
       display: table-cell;
       cursor: pointer;
       padding-left: 10px;
+      font-size: 25px;
     }
   }
 }
diff --git a/src/styles/_supported-device-table.scss b/src/styles/_supported-device-table.scss
index 259e91f0e..951cd9722 100644
--- a/src/styles/_supported-device-table.scss
+++ b/src/styles/_supported-device-table.scss
@@ -187,6 +187,7 @@ $see-all-button-height: 30px;
 
       svg {
         transform: rotate(90deg);
+        font-size: 25px;
       }
     }
 
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
index 9511791bc..60c969704 100644
--- a/src/styles/_tables.scss
+++ b/src/styles/_tables.scss
@@ -88,7 +88,7 @@
       padding: 0;
 
       svg {
-        scale: 0.8333;
+        font-size: 20px;
 
         * {
           fill: colors.$text-gray-1;
@@ -107,7 +107,8 @@
     line-height: 134%;
 
     svg {
-      scale: 0.75;
+      font-size: 19px;
+      margin: 3px 4px;
     }
 
     &.seam-clickable {
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index c4cab8df5..509fef738 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -28,6 +28,10 @@
     align-items: center;
     flex-direction: row;
     gap: 8px;
+
+    .seam-temperature-control-group-block-thermostat-icon {
+      font-size: 24px;
+    }
   }
 }
 
@@ -89,6 +93,10 @@
     align-items: center;
     flex-direction: row;
     gap: 7px;
+
+    svg {
+      font-size: 20px;
+    }
   }
 
   .seam-temperature-range-wrap {
@@ -330,6 +338,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 14px;
+
+    .seam-climate-setting-status-icon-heat-cool {
+      font-size: 19px;
+    }
   }
 }
 
@@ -541,6 +554,10 @@
     cursor: pointer;
     transition: 0.2s ease;
 
+    svg {
+      font-size: 20px;
+    }
+
     &:hover {
       border-color: colors.$text-gray-2;
     }
@@ -556,6 +573,10 @@
       align-items: center;
       flex-direction: row;
       gap: 10px;
+
+      svg {
+        font-size: 22px;
+      }
     }
 
     .seam-fan-mode-menu-button-text {
@@ -594,6 +615,10 @@
       background-color: colors.$bg-c;
       border-color: colors.$text-gray-2;
     }
+
+    .seam-climate-mode-menu-button-chevron {
+      font-size: 20px;
+    }
   }
 
   .seam-climate-mode-menu-button-icon {
@@ -602,6 +627,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 18px;
   }
 }
 
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
index 3577f4049..883b5b978 100644
--- a/src/styles/_typography.scss
+++ b/src/styles/_typography.scss
@@ -55,6 +55,12 @@
   }
 }
 
+@mixin font-size {
+  .seam-font-24 {
+    font-size: 24px;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
@@ -62,4 +68,5 @@
   @include font-family;
   @include defaults;
   @include truncated-text;
+  @include font-size;
 }