# CSS trick to change color of icons?

**URL:** <https://meta.discourse.org/t/css-trick-to-change-color-of-icons/285704>\
**Category:** Development\
**Tags:** css\
**Created:** [November 16, 2023, 11:31am UTC](https://meta.discourse.org/t/css-trick-to-change-color-of-icons/285704 "2023-11-16T11:31:43Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [November 16, 2023, 3:50pm UTC](https://meta.discourse.org/t/css-trick-to-change-color-of-icons/285704/2 "2023-11-16T15:50:09Z")

</div>

The category banner theme component has the option to override the icon color in banners (so it always matches the banner text color)… so you could enable this

![Screenshot 2023-11-16 at 10.44.31 AM](https://global.discourse-cdn.com/meta/original/4X/d/3/5/d352269d4455f14a551b1c16aa0943f99b60d2f7.png)

and set the icon color in the category icons theme component:

![Screenshot 2023-11-16 at 10.45.37 AM](https://global.discourse-cdn.com/meta/original/4X/f/9/5/f9515a2e571011e1546ddd907fd603a7dfa701e7.png)

I could see how setting the color for each icon would be unpleasant for many categories though, so if you want it all one color, you could use CSS instead:

```css
.badge-category__icon .d-icon {
  color: var(--primary-high);
}

```

---

_[View the full topic](https://meta.discourse.org/t/css-trick-to-change-color-of-icons/285704)._