# Header icons color on mouse hovering issue

**URL:** <https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966>\
**Category:** Product Support\
**Created:** [February 3, 2022, 1:35pm UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966 "2022-02-03T13:35:29Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [February 3, 2022, 2:50pm UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966/2 "2022-02-03T14:50:42Z")

</div>

Hello,

This is a little tricky but I also use something like this on my site, so this might be useful for you too. 🙂

**Common**

```scss
// Header buttons

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}

```

---

_[View the full topic](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966)._