Simple Binary Sensor Lovelace Card

Configuration Frontend
1

I would like to create a simple card displaying an icon if a binary sensor is off and a different icon if the same binary sensor is on. Similar to a button card but with a changing icon.
Any suggestion? Thank you!

2

I am no Lovelace expert but Mushroom Chips card works well and the new badges look great. Quite a lot of threads on them already

3

Check custom:button-card which allows to define an icon in template.

Besides, binary sensors already have different icons for on / off states - and all stock cards show a proper icon.
Do you wish to set some particular another icons?

4

Card-mod can do that:
f.e.

type: entities
entities:
  - entity: input_text.lastactivesensor
    secondary_info: none
    name: 'Last Activated Sensors '
    card_mod:
      style: |
        :host {
          --card-mod-icon: 
            {% if not is_state('sensor.activesensor', 'none') %}
               mdi:motion-play-outline;
            {% else %}
               mdi:motion-pause-outline;
            {% endif %};
        }
5
  1. OP said about “smth like a button card”.
  2. Using card-mod for setting an icon may be not the best way due to instability of “card-mod-icon” in some known cases.
6

He didn’t say something, he said similar…and

Which resembles an entity as far as I know…

And I haven’t had any issues with it so far for my case :wink:

7

Well, the OP has plenty of possible ways: either use STANDARD different icons, or custom-button-card, or card-mod (if you advise), or not mentioned Custom UI.

8

Thank you for the suggestions and my apologies for not having explained my specific usage case.
I have a heat pump that cools down the house in summer and heats it up in winter.
In HA I have a switch.heatpump to turn the pump on or off and a binary_sensor.heatpump_mode which tells me the mode the heat pump is in.
I would like a simple button card that allows me to turn the pump on or off but with a changing icon reflecting the mode. Something like the following:

states
states1255×202 13.7 KB

Right now I achieved this using a conditional card but I reckon it’s neither the most elegant nor efficient way of doing it:

  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: binary_sensor.heatpump_mode
            state: 'on'
        card:
          type: button
          show_name: true
          show_icon: true
          tap_action:
            action: toggle
          entity: switch.heatpump
          name: Heat Pump
          icon: mdi:snowflake
      - type: conditional
        conditions:
          - condition: state
            entity: binary_sensor.heatpump_mode
            state: 'off'
        card:
          type: button
          show_name: true
          show_icon: true
          tap_action:
            action: toggle
          entity: switch.heatpump
          name: Heat Pump
          icon: mdi:fire