# How to Change Header Icon Color?

**URL:** https://meta.discourse.org/t/how-to-change-header-icon-color/106098
**Category:** Development
**Created:** [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:** 21

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [16 בספטמבר,‏ 2023,‏ 3:06pm UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/21 "2023-09-16T15:06:21Z")

</div>

For the header icons on the right side, in common-css of a theme or theme component:

```scss
.d-header .d-header-icons .d-icon {
    color: <header icons color> !important;
    &:hover {
        color: <header icons hover color> !important;
    }
 }

```

For the hamburger icon in side bar menu mode:

```scss
.d-header .header-sidebar-toggle button .d-icon {
    color: <hamburger icon color> !important;
    &:hover {
        color: <hamburger icon hover color> !important;
    }
}

```

`<header icons color>, <hamburger icons color>, <header icon hover color>, <hamburger icon hover color>` = hex, color name or theme color variables. You can also specify background-color if you wish to change the icon background color.

Note: If you are using the hamburger drop down mode instead of sidebar, the first snippet for the right side header icons will also include the hamburger icon.

---

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