Default blue icon color changed to white after 2025.5 update

Configuration Frontend
1

The default blue icon color changed to white after 2025.5 update

2

https://community.home-assistant.io/t/2025-5-two-million-strong-and-getting-better/886760/29?u=tom_l

3

I’m not sure, but I don’t think it’s that.
The entire “–icon-primary-color” seems to have disappeared from the stylesheet.
(that’s the reason the icons are now white)

(yes, I did clear browser cache, tried different browsers, rebooted, etc.)

4

It is exactly that.

–paper-item-icon-color → --state-icon-color

5 Likes
5

Then you’re probably right.
Just curious why there are not more comments about this. This is after all part of the default HA theme, which I think most of us use? So the majority of users would all see this same change in icon color.

6

I’ve seen three people comment about it in the release topic and there is a whole other topic on its own. Interestingly this has been mostly noticed by people who use their own themes or card-mod.

1 Like
7

Yes I found that it was “custom:button-card” that had the problem.

I went and add the following to the yaml that sorted the problem.

state:

  • value: “off”
    color: rgb(85, 120, 155)
8

I’ve just updated and already noticed right away that the icons are now white…

9

Hello.

I’m surprised, mine were white (mushroom +custom theme) and they’ve turned blue now.

10

also my installation has changed the default color of the icons now they are blue.
I tried to search in the entries of my theme and I changed this option that before was with the color blue, but without result

      state-default-color: '#6e7f8a' # Grey
11

For the third time this is the new variable:

12

Thanks Tom it works, sorry I didn’t try your solution before

13

Sorry, tom…

I need more…

What do I do with “–state-icon-color”?
Where do I make the change?

1 Like
15

Sorry for being ignorant. I used colors like this:

--paper-item-icon-color: var(--state-active-color);

Now it’s

--state-icon-color: var(--state-active-color);

No problem, works fine. But I also used the color --state-icon-color (as defined in ha-style.ts, line 61 or color.global.ts line 51):

050    /* states icon */
051    --state-icon-color: #44739e;
...
114    /* state color */
115    --state-active-color: var(--amber-color);

--paper-item-icon-color: var(--state-icon-color);

Now it’s self referencing:

--state-icon-color: var(--state-icon-color);

And it’s white (as in “not defined”), not blue.

Is it possible that renaming this variable to an already existing (color) variable broke this?

16

Will not work.

17

That is what I wrote, yes.

18

Hi Gary,
if you are using custom-button-card, just add a state color control to force the card to point to the new CSS value.

state:
  - value: "off"
    color: var(--state-icon-color)

Alternatively, you can specify a color as suggested by @Willem.Goosen

1 Like
20

Where do you change “–state-icon-color” value or which file?