diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index af4d9513b..938e46a7f 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,7 +63,7 @@
   <body>
     <pre id="diagram4" class="mermaid">
       flowchart
-       B2@{ icon: "fa:image", label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ 
+       B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@ 
   </pre
     >
     <script type="module">
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index cf0c4dc4d..5d6632159 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -796,7 +796,7 @@ export const lex = {
 
 const getTypeFromVertex = (vertex: FlowVertex) => {
   if (vertex?.icon) {
-    return 'iconSquare';
+    return 'iconCircle';
   }
   if (vertex.type === 'square') {
     return 'squareRect';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index d0a9f6811..7a1cd3443 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -52,12 +52,14 @@ import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
 import { curlyBraceRight } from './shapes/curlyBraceRight.js';
 import { curlyBraces } from './shapes/curlyBraces.js';
 import { iconSquare } from './shapes/iconSquare.js';
+import { iconCircle } from './shapes/iconCircle.js';
 
 //Use these names as the left side to render shapes.
 const shapes = {
   // States
   state,
   stateStart,
+  iconCircle,
   'small-circle': stateStart,
   'sm-circ': stateStart,
   start: stateStart,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
new file mode 100644
index 000000000..f278d9553
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -0,0 +1,69 @@
+import { log } from '$root/logger.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import { getIconSVG } from '$root/rendering-util/icons.js';
+
+export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    getNodeClasses(node)
+  );
+
+  let width = Math.max(bbox.width + (node.padding ?? 0));
+
+  if (node.width) {
+    width = node.width + (node.padding ?? 0);
+  }
+
+  const radius = width / 2 + halfPadding;
+
+  let circleElem;
+  const { cssStyles } = node;
+
+  if (node.look === 'handDrawn') {
+    // @ts-ignore - rough is not typed
+    const rc = rough.svg(shapeSvg);
+    const options = userNodeOverrides(node, {});
+    const roughNode = rc.circle(0, 0, radius * 2, options);
+
+    circleElem = shapeSvg.insert(() => roughNode, ':first-child');
+    circleElem.attr('class', 'basic label-container').attr('style', cssStyles);
+  } else {
+    circleElem = shapeSvg
+      .insert('circle', ':first-child')
+      .attr('class', 'basic label-container')
+      .attr('style', nodeStyles)
+      .attr('r', radius)
+      .attr('cx', 0)
+      .attr('cy', 0);
+  }
+
+  // Position label at the top
+  label.attr('transform', `translate(0, ${-radius + halfPadding})`);
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: radius + bbox.height, width: radius + bbox.height, fallbackPrefix: '' })}</g>`
+    );
+    iconElem.attr('transform', `translate(${-radius / 2}, ${-radius / 2})`);
+  }
+
+  updateNodeBounds(node, circleElem);
+
+  node.intersect = function (point) {
+    log.info('Circle intersect', node, radius, point);
+    return intersect.circle(node, radius, point);
+  };
+
+  return shapeSvg;
+};
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 9b0acc53c..9599f0407 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -1,5 +1,5 @@
 import { log } from '$root/logger.js';
-import { getNodeClasses, updateNodeBounds } from './util.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 import {
@@ -9,27 +9,33 @@ import {
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { createPathFromPoints } from './util.js';
+import { getIconSVG } from '$root/rendering-util/icons.js';
 
-export const iconSquare = (parent: SVG, node: Node) => {
+export const iconSquare = async (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
-  node.label = '';
   node.labelStyle = labelStyles;
-  const shapeSvg = parent
-    .insert('g')
-    .attr('class', getNodeClasses(node))
-    .attr('id', node.domId ?? node.id);
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const { cssStyles } = node;
-  const width = Math.max(35, node?.width ?? 0);
-  const height = Math.max(35, node?.height ?? 0);
-  const gap = 7;
+
+  let width = Math.max(bbox.width + (node.padding ?? 0));
+  let height = Math.max(bbox.height + (node.padding ?? 0));
+
+  if (node.width) {
+    width = node.width + (node.padding ?? 0);
+  }
+
+  if (node.height) {
+    height = node.height + (node.padding ?? 0);
+  }
+
+  const iconSize = Math.min(width, height);
 
   const points = [
+    { x: 0, y: 0 },
     { x: width, y: 0 },
-    { x: 0, y: height + gap / 2 },
-    { x: width - 2 * gap, y: height + gap / 2 },
-    { x: 0, y: 2 * height },
-    { x: width, y: height - gap / 2 },
-    { x: 2 * gap, y: height - gap / 2 },
+    { x: width, y: height + iconSize + bbox.height + 5 },
+    { x: 0, y: height + iconSize + bbox.height + 5 },
   ];
 
   // @ts-ignore - rough is not typed
@@ -44,24 +50,33 @@ export const iconSquare = (parent: SVG, node: Node) => {
   const linePath = createPathFromPoints(points);
   const lineNode = rc.path(linePath, options);
 
-  const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child');
+  const iconShape = shapeSvg.insert(() => lineNode, ':first-child');
 
   if (cssStyles && node.look !== 'handDrawn') {
-    lightningBolt.selectAll('path').attr('style', cssStyles);
+    iconShape.selectAll('path').attr('style', cssStyles);
   }
 
   if (nodeStyles && node.look !== 'handDrawn') {
-    lightningBolt.selectAll('path').attr('style', nodeStyles);
+    iconShape.selectAll('path').attr('style', nodeStyles);
   }
 
-  lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
+  iconShape.attr('transform', `translate(${-width / 2},${-height / 2})`);
 
-  updateNodeBounds(node, lightningBolt);
+  label.attr('transform', `translate(${-width / 2},${-height / 2})`);
+
+  updateNodeBounds(node, iconShape);
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: height + iconSize, fallbackPrefix: '' })}</g>`
+    );
+    iconElem.attr('transform', `translate(${-iconSize}, ${-iconSize / 2 + bbox.height})`);
+  }
 
   node.intersect = function (point) {
-    log.info('lightningBolt intersect', node, point);
+    log.info('iconSquare intersect', node, point);
     const pos = intersect.polygon(node, points, point);
-
     return pos;
   };
 
