# Icons that automatically change background color based on the user's theme

**URL:** <https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962>\
**Category:** Icinga Web\
**Created:** [June 27, 2025, 12:08am UTC](https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962 "2025-06-27T00:08:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinfilipe](https://community.icinga.com/letter_avatar_proxy/v4/letter/k/b5e925/32.png) [@kevinfilipe](https://community.icinga.com/u/kevinfilipe)\
**Post date:** [June 27, 2025, 12:08am UTC](https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962/1 "2025-06-27T00:08:27Z")

</div>

Hi,

I’m using IcingaWeb’s default themes (dark and light) and trying to create icons (for hosts, services, and other module assets) that automatically change their background color based on the user’s theme.

Could anyone tell me if this is possible?

I tried using SVG icons (rendered with the `<svg>` tag and `fill="currentColor"`) in my personal module, and it works fine. Unfortunately, that doesn’t work for SVG or PNG icons rendered using the `<img>` tag.

Has anyone else tried something like this?

- Icinga Web 2 version: `2.12.4`
- Icinga DB version: `v1.4.0`
- Icinga DB Web version: `1.2.0`
- Icinga Redis version: `7.2.9`
- Web browser: `Google Chrome 137.0.7151.120`
- Icinga 2 version: `r2.15.0-1`
- PHP version: `8.3.6`
- Server operating system and version: `Ubuntu Server 24.04.2 LTS`

---

<div class="post-metadata">

**Author:** ![rivad](https://community.icinga.com/user_avatar/community.icinga.com/rivad/32/5852_2.png) [@rivad](https://community.icinga.com/u/rivad)\
**Post date:** [June 27, 2025, 6:40am UTC](https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962/2 "2025-06-27T06:40:47Z")

</div>

I just got the new theme from the @linuxfabrik and somehow they did it.

 ![image](https://community.icinga.com/uploads/default/original/2X/9/99969463f2cb6afe3edca21f91971ffc8efa1d9a.png)  
 ![image](https://community.icinga.com/uploads/default/original/2X/9/923a857470f252721b4a0b750440d05346c3de22.png)

---

<div class="post-metadata">

**Author:** ![linuxfabrik](https://community.icinga.com/user_avatar/community.icinga.com/linuxfabrik/32/2683_2.png) [@linuxfabrik](https://community.icinga.com/u/linuxfabrik)\
**Post date:** [June 27, 2025, 7:19am UTC](https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962/3 "2025-06-27T07:19:31Z")

</div>

Hi,

yes, we implemented that in our [Linuxfabrik’s IcingaWeb2 Theme](https://github.com/Linuxfabrik/icingaweb2-theme-linuxfabrik). We provide transparent SVGs with the icon itself in black (e.g. [global icons](https://github.com/Linuxfabrik/monitoring-plugins/tree/main/assets/icons) as well as for each check individually, e.g. [apache-httpd-status](https://github.com/Linuxfabrik/monitoring-plugins/tree/main/check-plugins/apache-httpd-status/icon)), and then invert them based on the theme via css: [icingaweb2-theme-linuxfabrik/public/css/themes/linuxfabrik.less at 7a9b7bbc5f0d573949c455df3fd7345d8aa000f3 · Linuxfabrik/icingaweb2-theme-linuxfabrik · GitHub](https://github.com/Linuxfabrik/icingaweb2-theme-linuxfabrik/blob/7a9b7bbc5f0d573949c455df3fd7345d8aa000f3/public/css/themes/linuxfabrik.less#L21)

You can test the effect on our [Icinga demo instance](https://icinga-demo.linuxfabrik.ch/).

Hope this helps 🙂

---

<div class="post-metadata">

**Author:** ![kevinfilipe](https://community.icinga.com/letter_avatar_proxy/v4/letter/k/b5e925/32.png) [@kevinfilipe](https://community.icinga.com/u/kevinfilipe)\
**Post date:** [June 27, 2025, 11:33pm UTC](https://community.icinga.com/t/icons-that-automatically-change-background-color-based-on-the-users-theme/14962/4 "2025-06-27T23:33:28Z")

</div>

Hi,

Thanks, Dominik and Linuxfabrik! That was really helpful. I followed your tips and it’s working now.