diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts
deleted file mode 100644
index fa2d81bda370..000000000000
--- a/src/common/entity/binary_sensor_icon.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  mdiAlertCircle,
-  mdiBattery,
-  mdiBatteryCharging,
-  mdiBatteryOutline,
-  mdiBrightness5,
-  mdiBrightness7,
-  mdiCheckboxMarkedCircle,
-  mdiCheckNetworkOutline,
-  mdiCloseNetworkOutline,
-  mdiCheckCircle,
-  mdiCropPortrait,
-  mdiDoorClosed,
-  mdiDoorOpen,
-  mdiFire,
-  mdiGarage,
-  mdiGarageOpen,
-  mdiHome,
-  mdiHomeOutline,
-  mdiLock,
-  mdiLockOpen,
-  mdiMusicNote,
-  mdiMusicNoteOff,
-  mdiMotionSensor,
-  mdiMotionSensorOff,
-  mdiPackage,
-  mdiPackageUp,
-  mdiPlay,
-  mdiPowerPlug,
-  mdiPowerPlugOff,
-  mdiRadioboxBlank,
-  mdiSnowflake,
-  mdiSmokeDetector,
-  mdiSmokeDetectorAlert,
-  mdiSmokeDetectorVariant,
-  mdiSmokeDetectorVariantAlert,
-  mdiSquare,
-  mdiSquareOutline,
-  mdiStop,
-  mdiThermometer,
-  mdiVibrate,
-  mdiWater,
-  mdiWaterOff,
-  mdiWindowClosed,
-  mdiWindowOpen,
-} from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
-
-/** Return an icon representing a binary sensor state. */
-
-export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
-  const is_off = state === "off";
-  switch (stateObj?.attributes.device_class) {
-    case "battery":
-      return is_off ? mdiBattery : mdiBatteryOutline;
-    case "battery_charging":
-      return is_off ? mdiBattery : mdiBatteryCharging;
-    case "carbon_monoxide":
-      return is_off ? mdiSmokeDetector : mdiSmokeDetectorAlert;
-    case "cold":
-      return is_off ? mdiThermometer : mdiSnowflake;
-    case "connectivity":
-      return is_off ? mdiCloseNetworkOutline : mdiCheckNetworkOutline;
-    case "door":
-      return is_off ? mdiDoorClosed : mdiDoorOpen;
-    case "garage_door":
-      return is_off ? mdiGarage : mdiGarageOpen;
-    case "power":
-      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
-    case "gas":
-    case "problem":
-    case "safety":
-    case "tamper":
-      return is_off ? mdiCheckCircle : mdiAlertCircle;
-    case "smoke":
-      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
-    case "heat":
-      return is_off ? mdiThermometer : mdiFire;
-    case "light":
-      return is_off ? mdiBrightness5 : mdiBrightness7;
-    case "lock":
-      return is_off ? mdiLock : mdiLockOpen;
-    case "moisture":
-      return is_off ? mdiWaterOff : mdiWater;
-    case "motion":
-      return is_off ? mdiMotionSensorOff : mdiMotionSensor;
-    case "occupancy":
-      return is_off ? mdiHomeOutline : mdiHome;
-    case "opening":
-      return is_off ? mdiSquare : mdiSquareOutline;
-    case "plug":
-      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
-    case "presence":
-      return is_off ? mdiHomeOutline : mdiHome;
-    case "running":
-      return is_off ? mdiStop : mdiPlay;
-    case "sound":
-      return is_off ? mdiMusicNoteOff : mdiMusicNote;
-    case "update":
-      return is_off ? mdiPackage : mdiPackageUp;
-    case "vibration":
-      return is_off ? mdiCropPortrait : mdiVibrate;
-    case "window":
-      return is_off ? mdiWindowClosed : mdiWindowOpen;
-    default:
-      return is_off ? mdiRadioboxBlank : mdiCheckboxMarkedCircle;
-  }
-};
diff --git a/src/components/ha-domain-icon.ts b/src/components/ha-domain-icon.ts
index aa43ff45bfba..d2d140fc1ef6 100644
--- a/src/components/ha-domain-icon.ts
+++ b/src/components/ha-domain-icon.ts
@@ -13,6 +13,8 @@ export class HaDomainIcon extends LitElement {
 
   @property() public domain?: string;
 
+  @property() public deviceClass?: string;
+
   @property() public icon?: string;
 
   @property({ type: Boolean }) public brandFallback?: boolean;
@@ -30,12 +32,14 @@ export class HaDomainIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = domainIcon(this.hass, this.domain).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = domainIcon(this.hass, this.domain, this.deviceClass).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }
diff --git a/src/data/icons.ts b/src/data/icons.ts
index 85b712384ce7..fc7452964eca 100644
--- a/src/data/icons.ts
+++ b/src/data/icons.ts
@@ -248,11 +248,15 @@ export const serviceIcon = async (
 
 export const domainIcon = async (
   hass: HomeAssistant,
-  domain: string
+  domain: string,
+  deviceClass?: string
 ): Promise<string | undefined> => {
   const entityComponentIcons = await getComponentIcons(hass, domain);
   if (entityComponentIcons) {
-    return entityComponentIcons._?.default;
+    const translations =
+      (deviceClass && entityComponentIcons[deviceClass]) ||
+      entityComponentIcons._;
+    return translations?.default;
   }
   return undefined;
 };
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index fd8f89072263..c8deec18490e 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -25,7 +25,6 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { FIXED_DEVICE_CLASS_ICONS, STATES_OFF } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { binarySensorIcon } from "../../../common/entity/binary_sensor_icon";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { navigate } from "../../../common/navigate";
 import {
@@ -36,6 +35,7 @@ import { blankBeforeUnit } from "../../../common/translations/blank_before_unit"
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import { subscribeOne } from "../../../common/util/subscribe-one";
 import "../../../components/ha-card";
+import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import {
@@ -391,7 +391,15 @@ export class HuiAreaCard
           const icon = FIXED_DEVICE_CLASS_ICONS[deviceClass];
           sensors.push(
             html`<div class="sensor">
-              ${icon ? html`<ha-svg-icon .path=${icon}></ha-svg-icon>` : ""}
+              ${icon
+                ? html`
+                    <ha-domain-icon
+                      .hass=${this.hass}
+                      domain="sensor"
+                      .deviceClass=${deviceClass}
+                    ></ha-domain-icon>
+                  `
+                : nothing}
               ${this._average(domain, deviceClass)}
             </div> `
           );
@@ -434,16 +442,18 @@ export class HuiAreaCard
           <div class="alerts">
             ${ALERT_DOMAINS.map((domain) => {
               if (!(domain in entitiesByDomain)) {
-                return "";
+                return nothing;
               }
               return this._deviceClasses[domain].map((deviceClass) => {
                 const entity = this._isOn(domain, deviceClass);
                 return entity
-                  ? html`<ha-svg-icon
-                      class="alert"
-                      .path=${DOMAIN_ICONS[domain][deviceClass] ||
-                      binarySensorIcon(entity.state, entity)}
-                    ></ha-svg-icon>`
+                  ? html`
+                      <ha-state-icon
+                        class="alert"
+                        .hass=${this.hass}
+                        .stateObj=${entity}
+                      ></ha-state-icon>
+                    `
                   : nothing;
               });
             })}
@@ -572,7 +582,14 @@ export class HuiAreaCard
         padding: 16px;
       }
 
-      .alerts ha-svg-icon {
+      ha-state-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .alerts ha-state-icon {
         background: var(--accent-color);
         color: var(--text-accent-color, var(--text-primary-color));
         padding: 8px;