Replace default icons (with states) for all cards

Configuration Frontend
1

I want to replace default icons for a door. But Home Assistant applies the status of the sensor to the icon. How can I make sure that a custom icon has also two states, that show in e.g. my entities card.

Scherm­afbeelding 2025-07-18 om 10.44.30
Scherm­afbeelding 2025-07-18 om 10.44.30358×580 14.7 KB

Scherm­afbeelding 2025-07-18 om 10.46.07
Scherm­afbeelding 2025-07-18 om 10.46.07516×198 1.74 KB

2

You could have voted for this eight months ago:

Basically: there is no method to do what you want other than choosing from a limited set of device classes.

3

Gosh… if I knew it eight months ago. I’m firing up the DeLorean!

:frowning:

4

Before you do…
You could use this: Mariusthvdb/custom-ui: Add templates and icon_color to Home Assistant UI

In customize.yaml with this:

binary_sensor.andreas_in_bed:
  templates:
    icon: if(state === 'off') return 'mdi:bed-empty'; if(state === 'on') return
      'mdi:bed';
    icon_color: if(state === 'on') return 'rgb(0,255,0)'; if(state === 'off') return
      'rgb(255,0,0)';

I get this output:

image
image292×191 6.25 KB

image
image287×203 6.62 KB

5

This is a nice idea and a good workaround. But that would make a lot of template sensors for me! :wink:

6

It’s not template sensors.
It’s just templates to customize the graphics of an entity.

My entity comes from an ESP:

image
image772×533 13.7 KB

And the customize sets the templates part of the entity

image
image1470×527 31.6 KB

7

that would be written like:

binary_sensor.andreas_in_bed:
  templates:
    icon: >
      if (state === 'off') return 'mdi:bed-empty'; 
      return 'mdi:bed';
    icon_color: >
      if (state === 'on') return 'rgb(0,255,0)';
      return 'rgb(255,0,0)';

or my personal preference:

binary_sensor.andreas_in_bed:
  templates:
    icon: >
      return state === 'off' ? 'mdi:bed-empty' : 'mdi:bed';
    icon_color: >
      return state === 'on') ? 'rgb(0,255,0)' : 'rgb(255,0,0)';

having said that, I am supposed to advise against the use of custom-ui (it still works perfectly as far as I tested recently) and should promote the use of card_mod for these modifications:

card_mod:
  style: |
    :host {
      --card-mod-icon:
          mdi:{{'bed' if is_state(config.entity,'on') else
                'bed-empty'}};
      --card-mod-icon-color: {{'rgb(0,255,0)' if is_state(config.entity,'on') else 'rgb(255,0,0)' }}
    }

custom-ui was design for the use in states supporting cards a long time ago, and does not work in all modern cards… card_mod can modify more cards, though even for Tile card you have to pull several tricks out of your sleeve to get it all to behave as you’d like :wink: