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

Ok I will test as you suggest.

For the template : you can leave out all ‘else’s.

I got this working on most of my entities, using the following code in customize.yaml:

  icon: mdi:washing-machine
    hs_color: >
      if (state === 'Running') return [48,76,251];

This makes my washing machine icon yellow if it’s running and the default if it’s not.

However the icons on my light entities from the Philips Hue integration are automatically dimmed according to the dim % of the bulb. I would like the brightness on these to be at 100% as long as the bulb is turned on, regardless of dim %.

I tried the following code without any success. It seems that the Hue config itself is overriding my customization?

  icon: mdi:ceiling-lamp
    hs_color: >
      if (state === 'on') return [48,76,251];

The state shows as on in the states page when the bulb is on.


  icon: mdi:quadcopter
    hs_color: >
      if (state === 'cool') return [48,76,251];

Using customizer_ui is great and all… …but shouldn’t something as basic as changing the icon color or entity text color etc based on state be built in into Home assistant?

I don’t want to install customizer that sometimes hangs my HA, just to have some unique icon colors here and there. I like how you can configure it in customize_global file if you have customizer_ui, if that can be built in that would be amazing :slight_smile:


This would be great to have.

I am running home assistant in docker-compose and installing external scripts is always a bit of a hassle. Especially when updating containers.

Would also be a great addition to the input_select template entity.
I think this would make interfaces less cluttered and much easier to read.

Well looks like we got “state_color” in latest reslease. …but you can’t apply it globally or overide the color. Would be great if it can be added to customize_glob.yaml and overide color variable. So “true” can be default color but you can also add a hex/rgb value for different color

You can set the color in the theme or maybe use card-mod

you still can do that using custom-ui…?

yeah custom ui still works

For how long? Doesn’t it rely on the states UI?

From what I can tell it doesn’t. It just some js that replaces color so it should continue working when states UI is removed. It is rather buggy though so would be great if we didn’t have to use it

I’m a little bit confused at the moment…
Is there a way with V107+ to set an icon color in an entity card individualy, depending on it’s state (e.g. a switch/sensor becomes green when active/above a value, another switch/sensor becomes yellow when active/above a value)

You can use:

Here is the state logic:

    - entity_id: sensor.fib_*_battery_level
        style: |
          :host {
           {% if states(config.entity)|float <= 20 %} 
           {% elif states(config.entity)|float <= 35 %}
           {% else %}
             var( ---state-icon-color )
           {% endif %}

Thank you very much. This is working. :grinning:
Just one issue. It is not updating if the value changes,i.e. the color is not adapted continously.
After reloading the page, the color is adapted top the corresponding value.Is there a way to make it updating?

I honestly thought it would update when state change, but I have not researched this. Maybe it’s a browser issue?

Now it is updating. Don’t know what i have done. I restarted and refreshed (CTRL + F5) a few times before the last post.
I’m happy and thanks again for the help :+1:

Hi guys,
i would change status color of my washing machine.
I’ve tried with this code:

- entity: input_select.lavatrice_status
      style: |
        :host {
         if (state === 'In funzione') return [255,0,0]
         if (state === 'Finitura') return [255,255,0]
         else if (state === 'Panni Puliti') return [0,128,0];
    type: state-label

but without success.

Washing machine state is:

  name: Lavatrice
    - Spenta
    - In funzione
    - Finitura
    - Panni puliti
  initial: Spenta

Please, could you give me an hand?
Thanks in advance,


Skip the “return [X;Y;Z]” and use HEX: #008000, or like this: rgba(200, 0, 0, 0.5)

I’ve tried like this:


but it doesn’t work :frowning: