# \[Bug\] svg icons rendering problem (black background) **URL:** \ **Category:** Ignition\ **Created:** [June 6, 2023, 1:58pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636 "2023-06-06T13:58:47Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [June 6, 2023, 1:58pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/1 "2023-06-06T13:58:47Z")
Icons in Ignition 8.1.26 are shown with a black background in what seems like a rendering problem when inserted inside a map and any style (for instance a border) is temporarily added. Once the icon has turned to black because of the style even removing the style doesn't fix the background to the original "coloured" one. Below an example of the before and after: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/a/9ad5f313fad423ca1cbe13dc31efe8d820d3896c.jpeg) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6e8d5129987e647ebc50edd64c5f7afad1888aa3.jpeg) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 6, 2023, 2:04pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/2 "2023-06-06T14:04:56Z")
What are the styles being applied by the `button` style class? ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 2:44pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/3 "2023-06-06T14:44:37Z")
The black color in use is not being used by the Icon, rather, it is being used by the File Upload's "button". The File Upload is displaying as a button because the dimensions of the component are such that it is rendering in its "small" layout, where it is just a button with an icon. As suggested by the questioning of @lrose , you should examine the styling you have in place within the `button` Named Style you have created. ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [June 6, 2023, 2:55pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/4 "2023-06-06T14:55:25Z")
Hi, sorry I changed the screenshot and created a proof of concept with a map and an icon over it. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 3:04pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/5 "2023-06-06T15:04:03Z")
Please don't retroactively replace screenshots, as now the helpful comments appear nonsensical as the screenshot they referenced no longer exists; new information or examples should be placed as new comments. What version of Ignition are you using? I don't see the same behavior in the newest versions, but I do remember a behavior like this occurring in the last couple of years. ![Screenshot 2023-06-06 at 8.03.54 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b5cce347bdf8d7a233ee79f0d4e2c6f4a8a44941.png) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 6, 2023, 3:05pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/6 "2023-06-06T15:05:25Z")
> [@cmallonee](#): > > What version of Ignition are you using? > [@r.p](#): > > Icons in Ignition 8.1.26 😉 ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [June 6, 2023, 3:10pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/7 "2023-06-06T15:10:47Z")
Yeah sorry, the original question made no sense as it was formulated so I updated it. I have the following behaviour in Ignition 8.1.26 ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 3:17pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/8 "2023-06-06T15:17:46Z")
Do you have any custom theming applied, or rules defined in the stylesheet.css resource? I don't see the same behavior, even in 8.1.26. ![Screenshot 2023-06-06 at 8.22.51 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/777db7ddeec6c2102f82e6b5cbeb463b3d915227.png) ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 3:39pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/9 "2023-06-06T15:39:10Z")
The best way to check is to actually examine this behavior in the browser session by inspecting the offending icon. Right-click it and select Inspect. Verify the `` element is selected within the `Elements` tab (if not, Inspect the icon again). The `Styles` tab will convey exactly what color is being applied to the icon, and which rule/source the color is originating from. ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [June 6, 2023, 3:58pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/10 "2023-06-06T15:58:00Z")
To reproduce it in the browser make a button which onclick changes the border to solid (see screenshot). Basically to reproduce it you have to change the style of the icon dynamically, once changed the icon becomes black. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75496b8a116ac599317bdb905ca7b8b520cd40bd.jpeg) I have not applied any particular style to my project, it is vanilla and a simple change of a style of the icon triggers the problem. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 5:17pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/11 "2023-06-06T17:17:06Z")
Ah, okay, I see what you're seeing in 8.1.26, though I still don't see it in 8.1.29. I'll investigate when I have time later today. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 6, 2023, 5:40pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/12 "2023-06-06T17:40:09Z")
Okay, this was previously reported [here](https://forum.inductiveautomation.com/t/regression-8-1-25-map-marker-color-property-break-when-the-icon-is-changed/71501). It was [fixed](https://forum.inductiveautomation.com/t/nightly-8-1-changelogs-2023/68524/51) as part of the 8.1.28 release. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 6, 2023, 5:40pm UTC](https://forum.inductiveautomation.com/t/bug-svg-icons-rendering-problem-black-background/74636/13 "2023-06-06T17:40:48Z")
> [@r.p](#): > > Icons in Ignition 8.1.26 are shown with a black background The screenshots in your original post don't have backgrounds on the icons. I see one with black fill color and another with blue fill and black border.