diff --git a/src/common/entity/battery_icon.ts b/src/common/entity/battery_icon.ts
index 61539c6c43..f4b1784232 100644
--- a/src/common/entity/battery_icon.ts
+++ b/src/common/entity/battery_icon.ts
@@ -8,12 +8,19 @@ export const batteryIcon = (
   const battery = Number(batteryState.state);
   const battery_charging =
     batteryChargingState && batteryChargingState.state === "on";
+  let icon = "hass:battery";
 
   if (isNaN(battery)) {
-    return "hass:battery-unknown";
+    if (batteryState.state === "off") {
+      icon += "-full";
+    } else if (batteryState.state === "on") {
+      icon += "-alert";
+    } else {
+      icon += "-unknown";
+    }
+    return icon;
   }
 
-  let icon = "hass:battery";
   const batteryRound = Math.round(battery / 10) * 10;
   if (battery_charging && battery > 10) {
     icon += `-charging-${batteryRound}`;
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 9aef24e530..7cd2ba9eba 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -12,6 +12,7 @@ import {
 import { ifDefined } from "lit-html/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { compare } from "../../../common/string/compare";
 import { slugify } from "../../../common/string/slugify";
@@ -160,6 +161,8 @@ export class HaConfigDevicePage extends LitElement {
     const batteryState = batteryEntity
       ? this.hass.states[batteryEntity.entity_id]
       : undefined;
+    const batteryIsBinary = batteryState
+      && computeStateDomain(batteryState) === "binary_sensor";
     const batteryChargingState = batteryChargingEntity
       ? this.hass.states[batteryChargingEntity.entity_id]
       : undefined;
@@ -215,7 +218,7 @@ export class HaConfigDevicePage extends LitElement {
                     batteryState
                       ? html`
                           <div class="battery">
-                            ${batteryState.state}%
+                            ${batteryIsBinary ? "" : batteryState.state + "%"}
                             <ha-battery-icon
                               .hass=${this.hass!}
                               .batteryStateObj=${batteryState}
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index ca82762c01..3c09085b28 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -15,6 +15,7 @@ import {
 import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { computeRTL } from "../../../common/util/compute_rtl";
@@ -293,9 +294,11 @@ export class HaConfigDeviceDashboard extends LitElement {
             batteryEntityPair && batteryEntityPair[1]
               ? this.hass.states[batteryEntityPair[1]]
               : undefined;
-          return battery && !isNaN(battery.state as any)
+          const batteryIsBinary =
+            battery && computeStateDomain(battery) === "binary_sensor";
+          return battery && (batteryIsBinary || !isNaN(battery.state as any))
             ? html`
-                ${battery.state}%
+                ${batteryIsBinary ? "" : battery.state + "%"}
                 <ha-battery-icon
                   .hass=${this.hass!}
                   .batteryStateObj=${battery}