diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 651d6aae9c..fabce4dd11 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -27,11 +27,18 @@
   ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
+
+  /* Color the icon if entity is offline */
+  ha-state-icon[data-domain=light][data-online=offline],
+  ha-state-icon[data-domain=switch][data-online=offline],
+  ha-state-icon[data-domain=binary_sensor][data-online=offline] {
+    color: #D3D3D3;
+  }
   </style>
 
   <template>
     <ha-state-icon id='icon' state-obj='[[stateObj]]'
-      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
+      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]' data-online$='[[stateObj.online]]'>
     </ha-state-icon>
   </template>
 </dom-module>