diff --git a/e2etests/regression_test.go b/e2etests/regression_test.go
index 30362e97d..e66d250ed 100644
--- a/e2etests/regression_test.go
+++ b/e2etests/regression_test.go
@@ -1037,6 +1037,7 @@ cf many required: {
 		loadFromFile(t, "grid_oom"),
 		loadFromFile(t, "cylinder_grid_label"),
 		loadFromFile(t, "grid_with_latex"),
+		loadFromFile(t, "icons_on_top"),
 	}
 
 	runa(t, tcs)
diff --git a/e2etests/testdata/files/icons_on_top.d2 b/e2etests/testdata/files/icons_on_top.d2
new file mode 100644
index 000000000..e9ac08830
--- /dev/null
+++ b/e2etests/testdata/files/icons_on_top.d2
@@ -0,0 +1,15 @@
+classes: {
+  GREEN: {style.stroke: "#2b9464"; style.fill: "#2b9464"}
+  RED: {style.stroke: "#d14d28"; style.fill: "#d14d28"}
+  YELLOW: {style.stroke: "#f5df65"; style.fill: "#f5df65"}
+  BLUE: {style.stroke: "#59c8df"; style.fill: "#59c8df"}
+}
+
+grid-rows: 2
+grid-columns: 2
+grid-gap: 0
+
+1: "link" {class: RED; link: "example.com"}
+2: "none" {class: YELLOW}
+3: "link, tooltip" {class: BLUE; link: "example.com"; tooltip: tooltip}
+4: "none" {class: GREEN}
diff --git a/e2etests/testdata/regression/icons_on_top/dagre/board.exp.json b/e2etests/testdata/regression/icons_on_top/dagre/board.exp.json
new file mode 100644
index 000000000..f704138e0
--- /dev/null
+++ b/e2etests/testdata/regression/icons_on_top/dagre/board.exp.json
@@ -0,0 +1,224 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "1",
+      "type": "rectangle",
+      "classes": [
+        "RED"
+      ],
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 191,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#d14d28",
+      "stroke": "#d14d28",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "example.com",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "link",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 27,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "2",
+      "type": "rectangle",
+      "classes": [
+        "YELLOW"
+      ],
+      "pos": {
+        "x": 191,
+        "y": 0
+      },
+      "width": 80,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#f5df65",
+      "stroke": "#f5df65",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "none",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 35,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "3",
+      "type": "rectangle",
+      "classes": [
+        "BLUE"
+      ],
+      "pos": {
+        "x": 0,
+        "y": 66
+      },
+      "width": 191,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#59c8df",
+      "stroke": "#59c8df",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "tooltip",
+      "link": "example.com",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "link, tooltip",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 82,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "4",
+      "type": "rectangle",
+      "classes": [
+        "GREEN"
+      ],
+      "pos": {
+        "x": 191,
+        "y": 66
+      },
+      "width": 80,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#2b9464",
+      "stroke": "#2b9464",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "none",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 35,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}
diff --git a/e2etests/testdata/regression/icons_on_top/dagre/sketch.exp.svg b/e2etests/testdata/regression/icons_on_top/dagre/sketch.exp.svg
new file mode 100644
index 000000000..b4af867be
--- /dev/null
+++ b/e2etests/testdata/regression/icons_on_top/dagre/sketch.exp.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.5.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 273 151"><svg id="d2-svg" class="d2-1627174934" width="273" height="151" viewBox="-1 -18 273 151"><rect x="-1.000000" y="-18.000000" width="273.000000" height="151.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.appendix-icon {
+	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
+}
+.d2-1627174934 .text-bold {
+	font-family: "d2-1627174934-font-bold";
+}
+@font-face {
+	font-family: d2-1627174934-font-bold;
+	src: url("data:application/font-woff;base64,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");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-1627174934 .fill-N1{fill:#0A0F25;}
+		.d2-1627174934 .fill-N2{fill:#676C7E;}
+		.d2-1627174934 .fill-N3{fill:#9499AB;}
+		.d2-1627174934 .fill-N4{fill:#CFD2DD;}
+		.d2-1627174934 .fill-N5{fill:#DEE1EB;}
+		.d2-1627174934 .fill-N6{fill:#EEF1F8;}
+		.d2-1627174934 .fill-N7{fill:#FFFFFF;}
+		.d2-1627174934 .fill-B1{fill:#0D32B2;}
+		.d2-1627174934 .fill-B2{fill:#0D32B2;}
+		.d2-1627174934 .fill-B3{fill:#E3E9FD;}
+		.d2-1627174934 .fill-B4{fill:#E3E9FD;}
+		.d2-1627174934 .fill-B5{fill:#EDF0FD;}
+		.d2-1627174934 .fill-B6{fill:#F7F8FE;}
+		.d2-1627174934 .fill-AA2{fill:#4A6FF3;}
+		.d2-1627174934 .fill-AA4{fill:#EDF0FD;}
+		.d2-1627174934 .fill-AA5{fill:#F7F8FE;}
+		.d2-1627174934 .fill-AB4{fill:#EDF0FD;}
+		.d2-1627174934 .fill-AB5{fill:#F7F8FE;}
+		.d2-1627174934 .stroke-N1{stroke:#0A0F25;}
+		.d2-1627174934 .stroke-N2{stroke:#676C7E;}
+		.d2-1627174934 .stroke-N3{stroke:#9499AB;}
+		.d2-1627174934 .stroke-N4{stroke:#CFD2DD;}
+		.d2-1627174934 .stroke-N5{stroke:#DEE1EB;}
+		.d2-1627174934 .stroke-N6{stroke:#EEF1F8;}
+		.d2-1627174934 .stroke-N7{stroke:#FFFFFF;}
+		.d2-1627174934 .stroke-B1{stroke:#0D32B2;}
+		.d2-1627174934 .stroke-B2{stroke:#0D32B2;}
+		.d2-1627174934 .stroke-B3{stroke:#E3E9FD;}
+		.d2-1627174934 .stroke-B4{stroke:#E3E9FD;}
+		.d2-1627174934 .stroke-B5{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-B6{stroke:#F7F8FE;}
+		.d2-1627174934 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-1627174934 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-1627174934 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-1627174934 .background-color-N1{background-color:#0A0F25;}
+		.d2-1627174934 .background-color-N2{background-color:#676C7E;}
+		.d2-1627174934 .background-color-N3{background-color:#9499AB;}
+		.d2-1627174934 .background-color-N4{background-color:#CFD2DD;}
+		.d2-1627174934 .background-color-N5{background-color:#DEE1EB;}
+		.d2-1627174934 .background-color-N6{background-color:#EEF1F8;}
+		.d2-1627174934 .background-color-N7{background-color:#FFFFFF;}
+		.d2-1627174934 .background-color-B1{background-color:#0D32B2;}
+		.d2-1627174934 .background-color-B2{background-color:#0D32B2;}
+		.d2-1627174934 .background-color-B3{background-color:#E3E9FD;}
+		.d2-1627174934 .background-color-B4{background-color:#E3E9FD;}
+		.d2-1627174934 .background-color-B5{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-B6{background-color:#F7F8FE;}
+		.d2-1627174934 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-1627174934 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-1627174934 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-1627174934 .color-N1{color:#0A0F25;}
+		.d2-1627174934 .color-N2{color:#676C7E;}
+		.d2-1627174934 .color-N3{color:#9499AB;}
+		.d2-1627174934 .color-N4{color:#CFD2DD;}
+		.d2-1627174934 .color-N5{color:#DEE1EB;}
+		.d2-1627174934 .color-N6{color:#EEF1F8;}
+		.d2-1627174934 .color-N7{color:#FFFFFF;}
+		.d2-1627174934 .color-B1{color:#0D32B2;}
+		.d2-1627174934 .color-B2{color:#0D32B2;}
+		.d2-1627174934 .color-B3{color:#E3E9FD;}
+		.d2-1627174934 .color-B4{color:#E3E9FD;}
+		.d2-1627174934 .color-B5{color:#EDF0FD;}
+		.d2-1627174934 .color-B6{color:#F7F8FE;}
+		.d2-1627174934 .color-AA2{color:#4A6FF3;}
+		.d2-1627174934 .color-AA4{color:#EDF0FD;}
+		.d2-1627174934 .color-AA5{color:#F7F8FE;}
+		.d2-1627174934 .color-AB4{color:#EDF0FD;}
+		.d2-1627174934 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="example.com" xlink:href="example.com"><g id="1" class="RED"><g class="shape" ><rect x="0.000000" y="0.000000" width="191.000000" height="66.000000" stroke="#d14d28" fill="#d14d28" style="stroke-width:2;" /></g><text x="95.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link</text><g transform="translate(175 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3440_35088111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3440_35088111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g></g></a><g id="2" class="YELLOW"><g class="shape" ><rect x="191.000000" y="0.000000" width="80.000000" height="66.000000" stroke="#f5df65" fill="#f5df65" style="stroke-width:2;" /></g><text x="231.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><a href="example.com" xlink:href="example.com"><g id="3" class="BLUE"><g class="shape" ><rect x="0.000000" y="66.000000" width="191.000000" height="66.000000" stroke="#59c8df" fill="#59c8df" style="stroke-width:2;" /></g><text x="95.500000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link, tooltip</text><g transform="translate(175 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3427_35082111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 19.998V15.998" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 12H16.0098" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3427_35082111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g><title>tooltip</title><g transform="translate(143 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3440_35088111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3440_35088111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g></g></a><g id="4" class="GREEN"><g class="shape" ><rect x="191.000000" y="66.000000" width="80.000000" height="66.000000" stroke="#2b9464" fill="#2b9464" style="stroke-width:2;" /></g><text x="231.000000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><mask id="d2-1627174934" maskUnits="userSpaceOnUse" x="-1" y="-18" width="273" height="151">
+<rect x="-1" y="-18" width="273" height="151" fill="white"></rect>
+<rect x="82.000000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="213.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="54.500000" y="88.500000" width="82" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="213.500000" y="88.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/regression/icons_on_top/elk/board.exp.json b/e2etests/testdata/regression/icons_on_top/elk/board.exp.json
new file mode 100644
index 000000000..f704138e0
--- /dev/null
+++ b/e2etests/testdata/regression/icons_on_top/elk/board.exp.json
@@ -0,0 +1,224 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "1",
+      "type": "rectangle",
+      "classes": [
+        "RED"
+      ],
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 191,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#d14d28",
+      "stroke": "#d14d28",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "example.com",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "link",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 27,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "2",
+      "type": "rectangle",
+      "classes": [
+        "YELLOW"
+      ],
+      "pos": {
+        "x": 191,
+        "y": 0
+      },
+      "width": 80,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#f5df65",
+      "stroke": "#f5df65",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "none",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 35,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "3",
+      "type": "rectangle",
+      "classes": [
+        "BLUE"
+      ],
+      "pos": {
+        "x": 0,
+        "y": 66
+      },
+      "width": 191,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#59c8df",
+      "stroke": "#59c8df",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "tooltip",
+      "link": "example.com",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "link, tooltip",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 82,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "4",
+      "type": "rectangle",
+      "classes": [
+        "GREEN"
+      ],
+      "pos": {
+        "x": 191,
+        "y": 66
+      },
+      "width": 80,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#2b9464",
+      "stroke": "#2b9464",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "none",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 35,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}
diff --git a/e2etests/testdata/regression/icons_on_top/elk/sketch.exp.svg b/e2etests/testdata/regression/icons_on_top/elk/sketch.exp.svg
new file mode 100644
index 000000000..b4af867be
--- /dev/null
+++ b/e2etests/testdata/regression/icons_on_top/elk/sketch.exp.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.5.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 273 151"><svg id="d2-svg" class="d2-1627174934" width="273" height="151" viewBox="-1 -18 273 151"><rect x="-1.000000" y="-18.000000" width="273.000000" height="151.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.appendix-icon {
+	filter: drop-shadow(0px 0px 32px rgba(31, 36, 58, 0.1));
+}
+.d2-1627174934 .text-bold {
+	font-family: "d2-1627174934-font-bold";
+}
+@font-face {
+	font-family: d2-1627174934-font-bold;
+	src: url("data:application/font-woff;base64,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");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-1627174934 .fill-N1{fill:#0A0F25;}
+		.d2-1627174934 .fill-N2{fill:#676C7E;}
+		.d2-1627174934 .fill-N3{fill:#9499AB;}
+		.d2-1627174934 .fill-N4{fill:#CFD2DD;}
+		.d2-1627174934 .fill-N5{fill:#DEE1EB;}
+		.d2-1627174934 .fill-N6{fill:#EEF1F8;}
+		.d2-1627174934 .fill-N7{fill:#FFFFFF;}
+		.d2-1627174934 .fill-B1{fill:#0D32B2;}
+		.d2-1627174934 .fill-B2{fill:#0D32B2;}
+		.d2-1627174934 .fill-B3{fill:#E3E9FD;}
+		.d2-1627174934 .fill-B4{fill:#E3E9FD;}
+		.d2-1627174934 .fill-B5{fill:#EDF0FD;}
+		.d2-1627174934 .fill-B6{fill:#F7F8FE;}
+		.d2-1627174934 .fill-AA2{fill:#4A6FF3;}
+		.d2-1627174934 .fill-AA4{fill:#EDF0FD;}
+		.d2-1627174934 .fill-AA5{fill:#F7F8FE;}
+		.d2-1627174934 .fill-AB4{fill:#EDF0FD;}
+		.d2-1627174934 .fill-AB5{fill:#F7F8FE;}
+		.d2-1627174934 .stroke-N1{stroke:#0A0F25;}
+		.d2-1627174934 .stroke-N2{stroke:#676C7E;}
+		.d2-1627174934 .stroke-N3{stroke:#9499AB;}
+		.d2-1627174934 .stroke-N4{stroke:#CFD2DD;}
+		.d2-1627174934 .stroke-N5{stroke:#DEE1EB;}
+		.d2-1627174934 .stroke-N6{stroke:#EEF1F8;}
+		.d2-1627174934 .stroke-N7{stroke:#FFFFFF;}
+		.d2-1627174934 .stroke-B1{stroke:#0D32B2;}
+		.d2-1627174934 .stroke-B2{stroke:#0D32B2;}
+		.d2-1627174934 .stroke-B3{stroke:#E3E9FD;}
+		.d2-1627174934 .stroke-B4{stroke:#E3E9FD;}
+		.d2-1627174934 .stroke-B5{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-B6{stroke:#F7F8FE;}
+		.d2-1627174934 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-1627174934 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-1627174934 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-1627174934 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-1627174934 .background-color-N1{background-color:#0A0F25;}
+		.d2-1627174934 .background-color-N2{background-color:#676C7E;}
+		.d2-1627174934 .background-color-N3{background-color:#9499AB;}
+		.d2-1627174934 .background-color-N4{background-color:#CFD2DD;}
+		.d2-1627174934 .background-color-N5{background-color:#DEE1EB;}
+		.d2-1627174934 .background-color-N6{background-color:#EEF1F8;}
+		.d2-1627174934 .background-color-N7{background-color:#FFFFFF;}
+		.d2-1627174934 .background-color-B1{background-color:#0D32B2;}
+		.d2-1627174934 .background-color-B2{background-color:#0D32B2;}
+		.d2-1627174934 .background-color-B3{background-color:#E3E9FD;}
+		.d2-1627174934 .background-color-B4{background-color:#E3E9FD;}
+		.d2-1627174934 .background-color-B5{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-B6{background-color:#F7F8FE;}
+		.d2-1627174934 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-1627174934 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-1627174934 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-1627174934 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-1627174934 .color-N1{color:#0A0F25;}
+		.d2-1627174934 .color-N2{color:#676C7E;}
+		.d2-1627174934 .color-N3{color:#9499AB;}
+		.d2-1627174934 .color-N4{color:#CFD2DD;}
+		.d2-1627174934 .color-N5{color:#DEE1EB;}
+		.d2-1627174934 .color-N6{color:#EEF1F8;}
+		.d2-1627174934 .color-N7{color:#FFFFFF;}
+		.d2-1627174934 .color-B1{color:#0D32B2;}
+		.d2-1627174934 .color-B2{color:#0D32B2;}
+		.d2-1627174934 .color-B3{color:#E3E9FD;}
+		.d2-1627174934 .color-B4{color:#E3E9FD;}
+		.d2-1627174934 .color-B5{color:#EDF0FD;}
+		.d2-1627174934 .color-B6{color:#F7F8FE;}
+		.d2-1627174934 .color-AA2{color:#4A6FF3;}
+		.d2-1627174934 .color-AA4{color:#EDF0FD;}
+		.d2-1627174934 .color-AA5{color:#F7F8FE;}
+		.d2-1627174934 .color-AB4{color:#EDF0FD;}
+		.d2-1627174934 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><a href="example.com" xlink:href="example.com"><g id="1" class="RED"><g class="shape" ><rect x="0.000000" y="0.000000" width="191.000000" height="66.000000" stroke="#d14d28" fill="#d14d28" style="stroke-width:2;" /></g><text x="95.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link</text><g transform="translate(175 -16)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3440_35088111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3440_35088111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g></g></a><g id="2" class="YELLOW"><g class="shape" ><rect x="191.000000" y="0.000000" width="80.000000" height="66.000000" stroke="#f5df65" fill="#f5df65" style="stroke-width:2;" /></g><text x="231.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><a href="example.com" xlink:href="example.com"><g id="3" class="BLUE"><g class="shape" ><rect x="0.000000" y="66.000000" width="191.000000" height="66.000000" stroke="#59c8df" fill="#59c8df" style="stroke-width:2;" /></g><text x="95.500000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">link, tooltip</text><g transform="translate(175 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3427_35082111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 19.998V15.998" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 12H16.0098" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3427_35082111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g><title>tooltip</title><g transform="translate(143 50)" class="appendix-icon"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3440_35088111)">
+<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
+<path d="M14.3909 16.7965C14.7364 17.2584 15.1772 17.6406 15.6834 17.9171C16.1896 18.1938 16.7494 18.3582 17.3248 18.3993C17.9001 18.4405 18.4777 18.3575 19.0181 18.1559C19.5586 17.9543 20.0492 17.6389 20.4571 17.2309L22.8708 14.8173C23.6036 14.0586 24.0089 13.0425 23.9998 11.9877C23.9906 10.933 23.5676 9.92404 22.8217 9.17821C22.0759 8.43237 21.067 8.00931 20.0123 8.00015C18.9575 7.99098 17.9413 8.39644 17.1827 9.1292L15.7988 10.505" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.609 15.1874C17.2635 14.7255 16.8227 14.3433 16.3165 14.0667C15.8103 13.7902 15.2505 13.6257 14.6752 13.5845C14.0998 13.5433 13.5223 13.6263 12.9819 13.8279C12.4414 14.0295 11.9506 14.345 11.5428 14.753L9.1292 17.1666C8.39644 17.9252 7.99098 18.9414 8.00015 19.9962C8.00931 21.0509 8.43237 22.0598 9.17821 22.8056C9.92405 23.5515 10.933 23.9745 11.9877 23.9837C13.0425 23.9928 14.0586 23.5875 14.8173 22.8547L16.193 21.4788" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3440_35088111">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</g></g></a><g id="4" class="GREEN"><g class="shape" ><rect x="191.000000" y="66.000000" width="80.000000" height="66.000000" stroke="#2b9464" fill="#2b9464" style="stroke-width:2;" /></g><text x="231.000000" y="104.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">none</text></g><mask id="d2-1627174934" maskUnits="userSpaceOnUse" x="-1" y="-18" width="273" height="151">
+<rect x="-1" y="-18" width="273" height="151" fill="white"></rect>
+<rect x="82.000000" y="22.500000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="213.500000" y="22.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="54.500000" y="88.500000" width="82" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="213.500000" y="88.500000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
+</mask></svg></svg>
\ No newline at end of file