# How to Change Header Icon Color?

**URL:** <https://meta.discourse.org/t/how-to-change-header-icon-color/106098>\
**Category:** Development\
**Created:** [January 9, 2019, 7:11pm UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098 "2019-01-09T19:11:15Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)\
**Post date:** [April 29, 2019, 8:42pm UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/5 "2019-04-29T20:42:46Z")

</div>

I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.

I tried this

> [@awesomerobot](#):
>
> .d-header-icons .d-icon { color: #fff; }

and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/a/2a164ce320feebed111067967223f3aec5edfecc.png)

So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.

I tried

```css
.d-header-icons .d-icon:hover {
   background-color: #b0cee8; 
   color: #fff;
}

```

but it gives me this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/a/ea32115b98d39cdfff32e7f8b2e2f8acc59c2fa2.png)

How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…

And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:

![image](https://global.discourse-cdn.com/meta/original/3X/c/8/c8286b6c9597000d5b40945a9fa0d96658d5b5aa.png)

My CSS for the button is (and has always been):

```css
@import "common/foundation/variables";

#create-topic {
    background-color: $tertiary;
    color: $secondary;
}

#create-topic:hover {
    background-color: $tertiary-high;
    color: $secondary;
}

```

---

_[View the full topic](https://meta.discourse.org/t/how-to-change-header-icon-color/106098)._