diff --git a/lib/ui/elements/legendIcon.mjs b/lib/ui/elements/legendIcon.mjs
index 059fcbbc2..b18b4d053 100644
--- a/lib/ui/elements/legendIcon.mjs
+++ b/lib/ui/elements/legendIcon.mjs
@@ -96,15 +96,20 @@ function createIconFromArray(style) {
 }
 
 function createIconFromInlineStyle(style) {
+
   const inlineStyle = `
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    width: ${style.width + 'px' || '100%'};
-    height: ${style.height + 'px' || '100%'};
-    background-image: url(${style.icon?.svg || style.svg || style.icon?.url || style.url || mapp.utils.svgSymbols[style.icon?.type || style.type](style.icon || style)})`;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;`
 
-  return mapp.utils.html`<div style=${inlineStyle}>`;
+  const imgInlineStyle = `
+  width: ${(style.width + 'px') || '100%'};
+  height: ${(style.height + 'px') || '100%'};
+  `;
+
+  const src = style.icon?.svg || style.svg || style.icon?.url || style.url || mapp.utils.svgSymbols[style.icon?.type || style.type](style.icon || style);
+
+  return mapp.utils.html`<div style=${inlineStyle}><img style=${imgInlineStyle} src=${src}>`
 }
 
 function createLineSymbol(style) {