diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index ecefa9c08..e1f52dbf8 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -67,7 +67,7 @@
     </pre>
     <pre id="diagram4" class="mermaid">
       flowchart TD
-        B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+        B2@{ icon: "logos:aws", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
   </pre
     >
     <pre id="diagram4" class="mermaid">
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index ee0d9c528..05aa8eeda 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -77,8 +77,15 @@ export const icon = async (
           : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY
       })`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
-    iconElem.attr('class', 'icon');
+    iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
+    iconElem
+      .selectAll('path')
+      .nodes()
+      .forEach((path: SVGPathElement) => {
+        if (path.getAttribute('fill') === 'currentColor') {
+          path.setAttribute('class', 'icon');
+        }
+      });
   }
 
   label.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 7879a0937..9e4bd9ac0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -75,8 +75,15 @@ export const iconCircle = async (
     'transform',
     `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
   );
-  iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
-  iconElem.attr('class', 'icon');
+  iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
+  iconElem
+    .selectAll('path')
+    .nodes()
+    .forEach((path: SVGPathElement) => {
+      if (path.getAttribute('fill') === 'currentColor') {
+        path.setAttribute('class', 'icon');
+      }
+    });
   // label.attr(
   //   'transform',
   //   `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})`
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 8050420a9..ded887905 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -45,14 +45,14 @@ export const iconRounded = async (
     iconSize = Math.max(node.width - padding * 2, node.height - padding * 2);
   }
 
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { nodeBorder } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
   const y = -height / 2;
 
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') ?? mainBkg });
+  const options = userNodeOverrides(node, { stroke: 'transparent' });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -87,8 +87,15 @@ export const iconRounded = async (
       'transform',
       `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
-    iconElem.attr('class', 'icon');
+    iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
+    iconElem
+      .selectAll('path')
+      .nodes()
+      .forEach((path: SVGPathElement) => {
+        if (path.getAttribute('fill') === 'currentColor') {
+          path.setAttribute('class', 'icon');
+        }
+      });
   }
 
   label.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 06dd31f9d..5a2a74d6e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -48,14 +48,14 @@ export const iconSquare = async (
 
   //const height = iconSize + padding * 2;
   //const width = iconSize + padding * 2;
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { nodeBorder } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
   const y = -height / 2;
 
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') ?? mainBkg });
+  const options = userNodeOverrides(node, { stroke: 'transparent' });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -89,8 +89,15 @@ export const iconSquare = async (
       'transform',
       `translate(${-iconWidth / 2 - iconX},${topLabel ? -iconSize / 2 : -iconSize / 2})`
     );
-    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') ?? nodeBorder);
-    iconElem.attr('class', 'icon');
+    iconElem.attr('style', `color : ${stylesMap.get('stroke') ?? nodeBorder};`);
+    iconElem
+      .selectAll('path')
+      .nodes()
+      .forEach((path: SVGPathElement) => {
+        if (path.getAttribute('fill') === 'currentColor') {
+          path.setAttribute('class', 'icon');
+        }
+      });
   }
 
   label.attr(
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index a90c737c7..107f7dcbb 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -115,7 +115,7 @@ const getStyles = (
     stroke-width: 1px;
   }
 
-  [data-look="neo"].icon-shape .icon path {
+  [data-look="neo"].icon-shape .icon {
     fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }