diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts
index 246b3b22bd..d2a9fcacbf 100644
--- a/demo/src/configs/jimpower/theme.ts
+++ b/demo/src/configs/jimpower/theme.ts
@@ -14,7 +14,7 @@ export const demoThemeJimpower = () => ({
   "paper-grey-200": "#414A59",
   "label-badge-background-color": "#2E333A",
   "paper-card-header-color": "var(--accent-color)",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "sidebar-icon-color": "var(--state-icon-color)",
   "paper-listbox-background-color": "#2E333A",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts
index f61654406c..3f667ef804 100644
--- a/demo/src/configs/teachingbirds/theme.ts
+++ b/demo/src/configs/teachingbirds/theme.ts
@@ -1,5 +1,5 @@
 export const demoThemeTeachingbirds = () => ({
-  "paper-card-header-color": "var(--paper-item-icon-color)",
+  "paper-card-header-color": "var(--state-icon-color)",
   "paper-listbox-background-color": "#202020",
   "paper-grey-50": "var(--primary-text-color)",
   "paper-item-icon-color": "#d3d3d3",
@@ -13,7 +13,7 @@ export const demoThemeTeachingbirds = () => ({
   "card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
-  "sidebar-icon-color": "var(--paper-item-icon-color)",
+  "sidebar-icon-color": "var(--state-icon-color)",
   "secondary-background-color": "#2b2b2b",
   "paper-item-icon-active-color": "#d8bf50",
   "switch-checked-color": "var(--primary-color)",
diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts
index 72aff6663c..90bd998620 100644
--- a/demo/src/custom-cards/cast-demo-row.ts
+++ b/demo/src/custom-cards/cast-demo-row.ts
@@ -75,7 +75,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       }
       ha-svg-icon {
         padding: 8px;
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       .flex {
         flex: 1;
diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts
index d1f804ed60..30fa81babf 100644
--- a/hassio/src/components/hassio-card-content.ts
+++ b/hassio/src/components/hassio-card-content.ts
@@ -76,7 +76,7 @@ class HassioCardContent extends LitElement {
       }
       ha-svg-icon.hassupdate,
       ha-svg-icon.backup {
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       ha-svg-icon.not_available {
         color: var(--error-color);
diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index 4ef0166fc9..68ee65fe01 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -195,7 +195,7 @@ export class StateBadge extends LitElement {
           position: relative;
           display: inline-block;
           width: 40px;
-          color: var(--paper-item-icon-color, #44739e);
+          color: var(--state-icon-color, #44739e);
           border-radius: 50%;
           height: 40px;
           text-align: center;
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index 2854d90110..4c898f0031 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -328,7 +328,7 @@ class MoreInfoWeather extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
         margin-left: 8px;
       }
 
diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts
index fe5f955637..5eb85cf5ad 100644
--- a/src/panels/logbook/ha-logbook-renderer.ts
+++ b/src/panels/logbook/ha-logbook-renderer.ts
@@ -687,7 +687,7 @@ class HaLogbookRenderer extends LitElement {
         }
 
         button.link {
-          color: var(--paper-item-icon-color);
+          color: var(--state-icon-color);
           text-decoration: none;
         }
 
diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 9491dd07e3..19385f96fa 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -317,9 +317,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         ha-state-icon {
           width: 40%;
           height: auto;
-          color: var(--paper-item-icon-color, #44739e);
+          color: var(--state-icon-color, #44739e);
           --mdc-icon-size: 100%;
-          --state-inactive-color: var(--paper-item-icon-color, #44739e);
+          --state-inactive-color: var(--state-icon-color, #44739e);
         }
 
         ha-state-icon + span {
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index 2c8b9bc679..13b86a5c8a 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -274,8 +274,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         }
 
         .icon {
-          color: var(--paper-item-icon-color, #44739e);
-          --state-inactive-color: var(--paper-item-icon-color, #44739e);
+          color: var(--state-icon-color, #44739e);
+          --state-inactive-color: var(--state-icon-color, #44739e);
           line-height: 40px;
         }
 
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index f7112c8fc1..4afd939dea 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -304,7 +304,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       }
 
       .light-button {
-        color: var(--paper-item-icon-color, #44739e);
+        color: var(--state-icon-color, #44739e);
         width: 60%;
         height: auto;
         position: absolute;
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts
index 74c080031a..16580a3680 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/src/panels/lovelace/cards/hui-plant-status-card.ts
@@ -215,7 +215,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
       }
 
       ha-svg-icon {
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
         margin-bottom: 8px;
       }
 
diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts
index f74d444604..758c2be717 100644
--- a/src/panels/lovelace/special-rows/hui-button-row.ts
+++ b/src/panels/lovelace/special-rows/hui-button-row.ts
@@ -79,7 +79,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       }
       ha-state-icon {
         padding: 8px;
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       .flex {
         flex: 1;
diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts
index 35ebe527e8..fc39733d28 100644
--- a/src/panels/lovelace/special-rows/hui-cast-row.ts
+++ b/src/panels/lovelace/special-rows/hui-cast-row.ts
@@ -133,7 +133,7 @@ class HuiCastRow extends LitElement implements LovelaceRow {
       }
       ha-icon {
         padding: 8px;
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       .flex {
         flex: 1;
diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts
index aa1eabff0c..7569e49ee1 100644
--- a/src/panels/lovelace/special-rows/hui-text-row.ts
+++ b/src/panels/lovelace/special-rows/hui-text-row.ts
@@ -35,7 +35,7 @@ class HuiTextRow extends LitElement implements LovelaceRow {
       }
       ha-icon {
         padding: 8px;
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       div {
         flex: 1;
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
index 04d00240f0..f1a5c22e3a 100644
--- a/src/panels/lovelace/special-rows/hui-weblink-row.ts
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -50,7 +50,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
       }
       ha-icon {
         padding: 8px;
-        color: var(--paper-item-icon-color);
+        color: var(--state-icon-color);
       }
       div {
         flex: 1;