diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index feb10f1bf0..924ccc2ba9 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -113,71 +113,74 @@ export class StateBadge extends LitElement {
 
     this.icon = true;
 
-    if (stateObj && this.overrideImage === undefined) {
-      // hide icon if we have entity picture
-      if (
-        (stateObj.attributes.entity_picture_local ||
-          stateObj.attributes.entity_picture) &&
-        !this.overrideIcon
-      ) {
-        let imageUrl =
-          stateObj.attributes.entity_picture_local ||
-          stateObj.attributes.entity_picture;
+    if (stateObj) {
+      const domain = computeDomain(stateObj.entity_id);
+      if (this.overrideImage === undefined) {
+        // hide icon if we have entity picture
+        if (
+          (stateObj.attributes.entity_picture_local ||
+            stateObj.attributes.entity_picture) &&
+          !this.overrideIcon
+        ) {
+          let imageUrl =
+            stateObj.attributes.entity_picture_local ||
+            stateObj.attributes.entity_picture;
+          if (this.hass) {
+            imageUrl = this.hass.hassUrl(imageUrl);
+          }
+          if (domain === "camera") {
+            imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
+          }
+          backgroundImage = `url(${imageUrl})`;
+          this.icon = false;
+        } else if (this.color) {
+          // Externally provided overriding color wins over state color
+          iconStyle.color = this.color;
+        } else if (this._stateColor) {
+          const color = stateColorCss(stateObj);
+          if (color) {
+            iconStyle.color = color;
+          }
+          if (stateObj.attributes.rgb_color) {
+            iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
+          }
+          if (stateObj.attributes.brightness) {
+            const brightness = stateObj.attributes.brightness;
+            if (typeof brightness !== "number") {
+              const errorMessage = `Type error: state-badge expected number, but type of ${
+                stateObj.entity_id
+              }.attributes.brightness is ${typeof brightness} (${brightness})`;
+              // eslint-disable-next-line
+              console.warn(errorMessage);
+            }
+            iconStyle.filter = stateColorBrightness(stateObj);
+          }
+          if (stateObj.attributes.hvac_action) {
+            const hvacAction = stateObj.attributes.hvac_action;
+            if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
+              iconStyle.color = stateColorCss(
+                stateObj,
+                CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
+              )!;
+            } else {
+              delete iconStyle.color;
+            }
+          }
+        }
+      } else if (this.overrideImage) {
+        let imageUrl = this.overrideImage;
         if (this.hass) {
           imageUrl = this.hass.hassUrl(imageUrl);
         }
-        const domain = computeDomain(stateObj.entity_id);
-        if (domain === "camera") {
-          imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
-        }
         backgroundImage = `url(${imageUrl})`;
         this.icon = false;
-        if (domain === "update") {
-          this.style.borderRadius = "0";
-        } else if (domain === "media_player") {
-          this.style.borderRadius = "8%";
-        }
-      } else if (this.color) {
-        // Externally provided overriding color wins over state color
-        iconStyle.color = this.color;
-      } else if (this._stateColor) {
-        const color = stateColorCss(stateObj);
-        if (color) {
-          iconStyle.color = color;
-        }
-        if (stateObj.attributes.rgb_color) {
-          iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`;
-        }
-        if (stateObj.attributes.brightness) {
-          const brightness = stateObj.attributes.brightness;
-          if (typeof brightness !== "number") {
-            const errorMessage = `Type error: state-badge expected number, but type of ${
-              stateObj.entity_id
-            }.attributes.brightness is ${typeof brightness} (${brightness})`;
-            // eslint-disable-next-line
-            console.warn(errorMessage);
-          }
-          iconStyle.filter = stateColorBrightness(stateObj);
-        }
-        if (stateObj.attributes.hvac_action) {
-          const hvacAction = stateObj.attributes.hvac_action;
-          if (hvacAction in CLIMATE_HVAC_ACTION_TO_MODE) {
-            iconStyle.color = stateColorCss(
-              stateObj,
-              CLIMATE_HVAC_ACTION_TO_MODE[hvacAction]
-            )!;
-          } else {
-            delete iconStyle.color;
-          }
-        }
       }
-    } else if (this.overrideImage) {
-      let imageUrl = this.overrideImage;
-      if (this.hass) {
-        imageUrl = this.hass.hassUrl(imageUrl);
+
+      if (domain === "update") {
+        this.style.borderRadius = "0";
+      } else if (domain === "media_player" || domain === "camera") {
+        this.style.borderRadius = "8%";
       }
-      backgroundImage = `url(${imageUrl})`;
-      this.icon = false;
     }
 
     this._iconStyle = iconStyle;