Entity Icon color & custom icon color based on state (customise icon_color)

Yes but… I’m not very expert with these mod :sweat_smile:

Couple of Questions :

  1. how can I set the icon color to theme accent color or theme Primary color ? (without using hard coded rgb value)
  2. how do I set icon color based on a another entity value?

thanks for the help

May I add to this thread?

I’d like to have my pictures elements card not to show up sooo yellow, esp. for closed windows. I tried thousands of things, but I cannot change the icon color.

Here’s my code? Anyone with an idea, what’s wrong with the code? That would be awesome.

Using 2022.2.5

#      icon: mdi:garage
      device_class: motion
        icon: >-
          if (state == 'Clear') return 'mdi:garage';
          return 'mdi:account';
        icon_color: >-
          if (state == 'Clear') return 'rgb(0, 0, 255)';
          return 'rgb(255, 0, 0)';


1 Like

I change the color of the picture elements according to the status in the card.
In the style, just add an ha-card and deifine a new variable.
This is working well for me.

      - type: picture-elements
        style: |
          ha-card {
            --my-switch_sdb1_router: {% if states('switch.sdb1_router') == "on" %} red {% else %} blue {% endif %};
          - type: state-icon
            entity: switch.sdb1_router
            icon: mdi:radiator
              top: 23%
              left: 26%
              '--paper-item-icon-color': var(--my-switch_sdb1_router)
            tap_action: none

Thank you so much! Worked for me in a quite similar way.

Just added 2 lines of code for the styling. Needed to add the …-active-… property as well.

- type: state-icon
    entity: binary_sensor.e03_window_left
      top: 17.5%
      left: 97.5%
      '--paper-item-icon-color': red
      '--paper-item-icon-active-color': lightgrey

You are right, I forgot to mention the ‘–paper-item-icon-active-color’ as well.
Nice this could solve your problem.

How can I change background color of a card based on time?

type: custom:button-card
icon: mdi:basket
color: rgb(190, 240, 20)
    - background-color: |
            if (states["calendar.bringmeister_calendar"].attributes.start_time > ???
            return 'rgb(60, 120, 0)';

that depends on what start_time is. Is it a string or datetime object?

It’s a input_datetime object.

I usually thought bout starting a new/own feature request based on

As I found this topic and even it has a slightly other approach (doing stuff in YAML), I would like to show my idea (doing it in the UI which is more the modern HA way of doing things) here too:

Allow to change entity icon based on entity state (binary sensors)

For binary sensors this should be quite easy:

  • field “icon for state on”: mdi:led-on
  • field “icon for state off”: mdi:led-off

In a next iteration the “state” needs to be user defined, e. g. “15” or “running” etc.

As mentioned in Change entity icon based on state this already is implemented in the backend for sensors with supported device class, e. g. binary sensors like door, window etc.

This feature request is about bringing the config options for this to the UI allowing users do define this on their own.

I agree!

Although mushroom card looks amazing, and Paul was just hired wasn’t he! So prehaps something in the future to enable UI icon colors.

This is already a feature request

Thanks for linking. All those are based on entities with two states, with

we could use an almost endless list of states and corresponding icons. Why only limit to two states (which of course would fulfill likely 95 % of all requirements as read so far)? Going that extra mile would create a very powerful customization option.

That’s just the example he used, but his proposal implies other domains. This is indicated by the - under his fake device_class field.

Searched a lot and this seems to be the right place to ask. Is there nowadays a straightforward way to have colored entities for values like e.g. (I mean without addtional coding).

Below 0 Celcius blue and above red with gradient from blue to red, the hotter the more red?
I mean the value (state) of the entity in lovelace.
I have now a long list of temp sensors and like to see them in colors.

Open red, closed green.

1 Like

Would love this too.

Not that I’m aware of, which is why I made this: Dynamic badge label (text) colours.

Hi All,

Wondering if someone can help. I have created a “navigation” button that switches to another dashboard where I can control my lights. See the pictures attached.

Screenshot 2023-01-06 105737

Screenshot 2023-01-06 105811

What i am trying to achieve is that the living zone icon should be grey when all of the light entities are off and a different colour when any of the light entities are on.

Can some one help with this?

Easiest solution I think is to make a light group from those lights. It will have a binary state according to your preferences afaik, so you could use that as the state entity for your button.

I’m trying to color list of the devices, if I use sensor.*_voltage - it works for all card but I need to exclude device which I don’t need to display. If I use exact list of the devices and style, just one device colored, can you assist?

show_empty: false
  type: entities
  show_header_toggle: false
  state_color: true
  title: Voltage
    - entity_id: sensor.temp_1_voltage
    - entity_id: sensor.temp_2_voltage
    - entity_id: sensor.temp_3_voltage
    - entity_id: sensor.door_sensor_voltage
    - entity_id: sensor.ms1_voltage
    - entity_id: sensor.leak_sens_voltage
    - entity_id: sensor.button_voltage
        secondary_info: last-changed
        style: |
          :host {
             {% if states(config.entity)|float < 2900 %} red
             {% elif states(config.entity)|float < 2950 %} OrangeRed
             {% elif states(config.entity)|float < 3000 %} Yellow
             {% elif states(config.entity)|float < 3300 %} Lime
             {% elif states(config.entity)|float < 10000 %} Aqua
             {% else %} azure
             {% endif %}
    - state: unavailable
  method: state
  reverse: true