diff --git a/src/lib/ui/thermostat/ClimateSettingStatus.tsx b/src/lib/ui/thermostat/ClimateSettingStatus.tsx
index c9511221f..5f0ab4dbc 100644
--- a/src/lib/ui/thermostat/ClimateSettingStatus.tsx
+++ b/src/lib/ui/thermostat/ClimateSettingStatus.tsx
@@ -49,10 +49,12 @@ function ClimateSettingIcon(props: {
 
   return (
     <div
-      className={classNames(
-        'seam-climate-setting-status-icon',
-        `seam-climate-setting-status-icon-${mode}`
-      )}
+      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 />}
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index e9b1a896f..509fef738 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -340,7 +340,7 @@
     align-items: center;
     font-size: 14px;
 
-    .seam-climate-setting-status-icon-heat_cool {
+    .seam-climate-setting-status-icon-heat-cool {
       font-size: 19px;
     }
   }