diff --git a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/TimelineHeader.test.tsx b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/TimelineHeader.test.tsx
index c6e70478424..bb1f77bdb40 100644
--- a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/TimelineHeader.test.tsx
+++ b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/TimelineHeader.test.tsx
@@ -83,9 +83,11 @@ describe('TimelineHeader', () => {
   });
 
   it('should render timeline icon in both expanded and collapsed states', () => {
+    const isHostElement = (instance: { type: unknown }) => typeof instance.type === 'string';
+
     // Test expanded
     const expandedComponent = renderWithIntl(defaultProps);
-    const expandedIcons = expandedComponent.root.findAllByProps({ className: 'timeline-icon' });
+    const expandedIcons = expandedComponent.root.findAllByProps({ className: 'timeline-icon' }).filter(isHostElement);
     expect(expandedIcons).toHaveLength(1);
 
     // Test collapsed
@@ -93,7 +95,7 @@ describe('TimelineHeader', () => {
       ...defaultProps,
       isExpanded: false,
     });
-    const collapsedIcons = collapsedComponent.root.findAllByProps({ className: 'timeline-icon' });
+    const collapsedIcons = collapsedComponent.root.findAllByProps({ className: 'timeline-icon' }).filter(isHostElement);
     expect(collapsedIcons).toHaveLength(1);
   });
 
diff --git a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineButtons.test.tsx.snap b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineButtons.test.tsx.snap
index 0bcc9f45cfa..b5e8caa8074 100644
--- a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineButtons.test.tsx.snap
+++ b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineButtons.test.tsx.snap
@@ -13,34 +13,9 @@ exports[`TimelineButtons > should render collapsed (not expanded) 1`] = `
     <span
       className="fui-Button__icon rywnvv2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
   </button>
   <button
@@ -52,34 +27,9 @@ exports[`TimelineButtons > should render collapsed (not expanded) 1`] = `
     <span
       className="fui-Button__icon rywnvv2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
   </button>
 </div>
@@ -98,34 +48,9 @@ exports[`TimelineButtons > should render with default props 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Previous task
   </button>
@@ -138,34 +63,9 @@ exports[`TimelineButtons > should render with default props 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Next task
   </button>
@@ -185,34 +85,9 @@ exports[`TimelineButtons > should render with disabled buttons when fetching rep
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Previous task
   </button>
@@ -225,34 +100,9 @@ exports[`TimelineButtons > should render with disabled buttons when fetching rep
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Next task
   </button>
@@ -272,34 +122,9 @@ exports[`TimelineButtons > should render with disabled buttons when no repetitio
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Previous task
   </button>
@@ -312,34 +137,9 @@ exports[`TimelineButtons > should render with disabled buttons when no repetitio
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Next task
   </button>
@@ -359,34 +159,9 @@ exports[`TimelineButtons > should render with disabled next button at last task
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Previous task
   </button>
@@ -399,34 +174,9 @@ exports[`TimelineButtons > should render with disabled next button at last task
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Next task
   </button>
@@ -446,34 +196,9 @@ exports[`TimelineButtons > should render with disabled previous button at first
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.2 12.27a.75.75 0 0 1 .03-1.06l5.25-5a.75.75 0 0 1 1.04 0l5.25 5a.75.75 0 0 1-1.04 1.08L10 7.8l-4.73 4.5a.75.75 0 0 1-1.06-.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.15 12.35a.5.5 0 0 1 0-.7L9.6 6.16a.55.55 0 0 1 .78 0l5.46 5.49a.5.5 0 0 1-.7.7L10 7.2l-5.15 5.16a.5.5 0 0 1-.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Previous task
   </button>
@@ -486,34 +211,9 @@ exports[`TimelineButtons > should render with disabled previous button at first
     <span
       className="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.8 7.73c.28.3.27.78-.03 1.06l-5.25 5a.75.75 0 0 1-1.04 0l-5.25-5a.75.75 0 0 1 1.04-1.08L10 12.2l4.73-4.5a.75.75 0 0 1 1.06.02Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Next task
   </button>
diff --git a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineContent.test.tsx.snap b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineContent.test.tsx.snap
index be4da623a7f..b939127e101 100644
--- a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineContent.test.tsx.snap
+++ b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineContent.test.tsx.snap
@@ -107,20 +107,10 @@ exports[`TimelineContent > should render error carets for failed repetitions 1`]
   <div
     className="error-caret-container"
   >
-    <svg
-      aria-hidden={true}
-      className="error-caret ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M13 14.2a1 1 0 0 1-1.63.78l-4.72-3.81a1.5 1.5 0 0 1 0-2.34l4.72-3.81A1 1 0 0 1 13 5.8v8.4Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      className="error-caret"
+      data-icon-name="CaretLeftFilled"
+    />
     <div />
   </div>
 </div>
@@ -198,11 +188,8 @@ exports[`TimelineContent > should render no repetitions state 1`] = `
     }
   }
 >
-  <svg
-    aria-hidden={true}
-    className="___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-    fill="currentColor"
-    height="1em"
+  <span
+    data-icon-name="BorderNoneRegular"
     style={
       {
         "color": "var(--colorNeutralForeground3)",
@@ -210,15 +197,7 @@ exports[`TimelineContent > should render no repetitions state 1`] = `
         "width": "30px",
       }
     }
-    viewBox="0 0 20 20"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8 3.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-2.46.55a2 2 0 0 0-1.5 1.55.5.5 0 0 1-.59.4.5.5 0 0 1-.38-.66 3 3 0 0 1 2.34-2.29.5.5 0 0 1 .6.4.5.5 0 0 1-.47.6Zm0 11.9a2 2 0 0 1-1.5-1.55.5.5 0 0 0-.59-.4.5.5 0 0 0-.38.66 3 3 0 0 0 2.34 2.29.5.5 0 0 0 .6-.4.5.5 0 0 0-.47-.6Zm9.05-12.9a3 3 0 0 1 2.36 2.36.5.5 0 0 1-.4.6.5.5 0 0 1-.6-.47 2 2 0 0 0-1.55-1.5.5.5 0 0 1-.4-.59.5.5 0 0 1 .6-.4Zm-.13 12.9a2 2 0 0 0 1.5-1.55.5.5 0 0 1 .59-.4.5.5 0 0 1 .38.66 3 3 0 0 1-2.34 2.29.5.5 0 0 1-.6-.4.5.5 0 0 1 .47-.6ZM16 11.5a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-1 0v3ZM3.5 12a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v3a.5.5 0 0 1-.5.5Zm5 4a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Z"
-      fill="currentColor"
-    />
-  </svg>
+  />
   <span
     className="fui-Text ___g0or4u0_dhwpsw0 fk6fouc fkhj508 f1i3iumi fl43uef fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
     style={
@@ -243,11 +222,8 @@ exports[`TimelineContent > should render no repetitions state when collapsed 1`]
     }
   }
 >
-  <svg
-    aria-hidden={true}
-    className="___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-    fill="currentColor"
-    height="1em"
+  <span
+    data-icon-name="BorderNoneRegular"
     style={
       {
         "color": "var(--colorNeutralForeground3)",
@@ -255,15 +231,7 @@ exports[`TimelineContent > should render no repetitions state when collapsed 1`]
         "width": "30px",
       }
     }
-    viewBox="0 0 20 20"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8 3.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-2.46.55a2 2 0 0 0-1.5 1.55.5.5 0 0 1-.59.4.5.5 0 0 1-.38-.66 3 3 0 0 1 2.34-2.29.5.5 0 0 1 .6.4.5.5 0 0 1-.47.6Zm0 11.9a2 2 0 0 1-1.5-1.55.5.5 0 0 0-.59-.4.5.5 0 0 0-.38.66 3 3 0 0 0 2.34 2.29.5.5 0 0 0 .6-.4.5.5 0 0 0-.47-.6Zm9.05-12.9a3 3 0 0 1 2.36 2.36.5.5 0 0 1-.4.6.5.5 0 0 1-.6-.47 2 2 0 0 0-1.55-1.5.5.5 0 0 1-.4-.59.5.5 0 0 1 .6-.4Zm-.13 12.9a2 2 0 0 0 1.5-1.55.5.5 0 0 1 .59-.4.5.5 0 0 1 .38.66 3 3 0 0 1-2.34 2.29.5.5 0 0 1-.6-.4.5.5 0 0 1 .47-.6ZM16 11.5a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-1 0v3ZM3.5 12a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v3a.5.5 0 0 1-.5.5Zm5 4a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Z"
-      fill="currentColor"
-    />
-  </svg>
+  />
 </div>
 `;
 
@@ -340,20 +308,10 @@ exports[`TimelineContent > should render with default props 1`] = `
   >
     <div />
     <div />
-    <svg
-      aria-hidden={true}
-      className="error-caret ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M13 14.2a1 1 0 0 1-1.63.78l-4.72-3.81a1.5 1.5 0 0 1 0-2.34l4.72-3.81A1 1 0 0 1 13 5.8v8.4Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      className="error-caret"
+      data-icon-name="CaretLeftFilled"
+    />
   </div>
 </div>
 `;
@@ -489,20 +447,10 @@ exports[`TimelineContent > should render with multiple task groups 1`] = `
     <div />
     <div />
     <div />
-    <svg
-      aria-hidden={true}
-      className="error-caret ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M13 14.2a1 1 0 0 1-1.63.78l-4.72-3.81a1.5 1.5 0 0 1 0-2.34l4.72-3.81A1 1 0 0 1 13 5.8v8.4Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      className="error-caret"
+      data-icon-name="CaretLeftFilled"
+    />
   </div>
 </div>
 `;
diff --git a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineGroup.test.tsx.snap b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineGroup.test.tsx.snap
index 5bef0c7cde1..2dd983efd62 100644
--- a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineGroup.test.tsx.snap
+++ b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineGroup.test.tsx.snap
@@ -23,34 +23,9 @@ exports[`TimelineGroup > should render as collapsed group initially 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
@@ -80,34 +55,9 @@ exports[`TimelineGroup > should render as expanded group when taskId matches tra
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
@@ -199,34 +149,9 @@ exports[`TimelineGroup > should render with default props when timeline is expan
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
@@ -256,34 +181,9 @@ exports[`TimelineGroup > should render with different task number 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #6
   </button>
@@ -313,34 +213,9 @@ exports[`TimelineGroup > should render with empty repetitions 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
@@ -370,34 +245,9 @@ exports[`TimelineGroup > should render with no selected repetition 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
@@ -427,34 +277,9 @@ exports[`TimelineGroup > should render with single repetition 1`] = `
     <span
       className="fui-Button__icon rywnvv2 ___14u6ce1_ubi7uv0 f1nizpg2 fe5j1ua fjamq6b f64fuq3 fbaiahx"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.3 4.3a1 1 0 0 0 0 1.4l6.29 6.3-6.3 6.3a1 1 0 1 0 1.42 1.4l7-7a1 1 0 0 0 0-1.4l-7-7a1 1 0 0 0-1.42 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.47 4.22c-.3.3-.3.77 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25c.3-.3.3-.77 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
     Task #1
   </button>
diff --git a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineHeader.test.tsx.snap b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineHeader.test.tsx.snap
index 0345f9f4030..25b7099d475 100644
--- a/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineHeader.test.tsx.snap
+++ b/libs/designer/src/lib/ui/MonitoringTimeline/__tests__/__snapshots__/TimelineHeader.test.tsx.snap
@@ -11,20 +11,10 @@ exports[`TimelineHeader > should not render title text when collapsed 1`] = `
     }
   }
 >
-  <svg
-    aria-hidden={true}
-    className="timeline-icon ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-    fill="currentColor"
-    height="1em"
-    viewBox="0 0 20 20"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.5 3C2.67 3 2 3.67 2 4.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 4.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm.5 6.5c-.83 0-1.5.67-1.5 1.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 12.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm14-.06a2 2 0 0 1-1-3.88 2 2 0 0 1 1 3.88ZM16.5 3c.28 0 .5.22.5.5v4.04a3.02 3.02 0 0 0-1 0V3.5c0-.28.22-.5.5-.5Zm0 10.5c-.17 0-.34-.01-.5-.04v4.04a.5.5 0 0 0 1 0v-4.04c-.16.03-.33.04-.5.04Z"
-      fill="currentColor"
-    />
-  </svg>
+  <span
+    className="timeline-icon"
+    data-icon-name="TimelineRegular"
+  />
 </div>
 `;
 
@@ -39,20 +29,10 @@ exports[`TimelineHeader > should render when collapsed 1`] = `
     }
   }
 >
-  <svg
-    aria-hidden={true}
-    className="timeline-icon ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-    fill="currentColor"
-    height="1em"
-    viewBox="0 0 20 20"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.5 3C2.67 3 2 3.67 2 4.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 4.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm.5 6.5c-.83 0-1.5.67-1.5 1.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 12.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm14-.06a2 2 0 0 1-1-3.88 2 2 0 0 1 1 3.88ZM16.5 3c.28 0 .5.22.5.5v4.04a3.02 3.02 0 0 0-1 0V3.5c0-.28.22-.5.5-.5Zm0 10.5c-.17 0-.34-.01-.5-.04v4.04a.5.5 0 0 0 1 0v-4.04c-.16.03-.33.04-.5.04Z"
-      fill="currentColor"
-    />
-  </svg>
+  <span
+    className="timeline-icon"
+    data-icon-name="TimelineRegular"
+  />
 </div>
 `;
 
@@ -68,20 +48,10 @@ exports[`TimelineHeader > should render with default props when expanded 1`] = `
     }
   }
 >
-  <svg
-    aria-hidden={true}
-    className="timeline-icon ___9ctc0p0_1xvj9ao f1w7gpdv fez10in f1dd5bof"
-    fill="currentColor"
-    height="1em"
-    viewBox="0 0 20 20"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.5 3C2.67 3 2 3.67 2 4.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 4.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm.5 6.5c-.83 0-1.5.67-1.5 1.5v4c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-4c0-.83-.67-1.5-1.5-1.5h-9ZM3 12.5c0-.28.22-.5.5-.5h9c.28 0 .5.22.5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4Zm14-.06a2 2 0 0 1-1-3.88 2 2 0 0 1 1 3.88ZM16.5 3c.28 0 .5.22.5.5v4.04a3.02 3.02 0 0 0-1 0V3.5c0-.28.22-.5.5-.5Zm0 10.5c-.17 0-.34-.01-.5-.04v4.04a.5.5 0 0 0 1 0v-4.04c-.16.03-.33.04-.5.04Z"
-      fill="currentColor"
-    />
-  </svg>
+  <span
+    className="timeline-icon"
+    data-icon-name="TimelineRegular"
+  />
   <span
     className="fui-Text ___g0or4u0_dhwpsw0 fk6fouc fkhj508 f1i3iumi fl43uef fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
     style={
@@ -100,34 +70,9 @@ exports[`TimelineHeader > should render with default props when expanded 1`] = `
     <span
       className="fui-Button__icon rywnvv2"
     >
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 10a6 6 0 0 1 9.97-4.5h-1.22a.75.75 0 0 0 0 1.5h3c.41 0 .75-.34.75-.75v-3a.75.75 0 0 0-1.5 0v1.16a7.5 7.5 0 1 0 2.5 5.31.75.75 0 0 0-1.5.06V10a6 6 0 0 1-12 0Z"
-          fill="currentColor"
-        />
-      </svg>
-      <svg
-        aria-hidden={true}
-        className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 10a6 6 0 0 1 10.47-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.6a7 7 0 1 0 1.98 4.36.5.5 0 1 0-1 .08L16 10a6 6 0 0 1-12 0Z"
-          fill="currentColor"
-        />
-      </svg>
+      <span
+        data-testid="fluent-icon"
+      />
     </span>
   </button>
 </div>
diff --git a/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/collapseMenuItem.spec.tsx.snap b/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/collapseMenuItem.spec.tsx.snap
index ff1f85bf58a..692e7dd2232 100644
--- a/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/collapseMenuItem.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/collapseMenuItem.spec.tsx.snap
@@ -14,34 +14,9 @@ exports[`lib/ui/menuItems/collapseMenuItem > should render correctly when isColl
   <span
     className="fui-MenuItem__icon ro9koqv"
   >
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.5 12.5a1 1 0 0 1 1 .89V21a1 1 0 0 1-2 .12V15.9l-5.8 5.8a1 1 0 0 1-1.31.08l-.1-.08a1 1 0 0 1-.08-1.32l.08-.1 5.79-5.78H3a1 1 0 0 1-.12-2h7.62Zm3-10.5a1 1 0 0 1 1 .88V8.1l5.8-5.8a1 1 0 0 1 1.31-.08l.1.08a1 1 0 0 1 .08 1.32l-.08.1-5.8 5.8H21a1 1 0 0 1 .12 1.99H13.5a1 1 0 0 1-1-.88V3a1 1 0 0 1 1-1Z"
-        fill="currentColor"
-      />
-    </svg>
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.25 13c.41 0 .75.34.75.75v7.5a.75.75 0 0 1-1.5 0v-5.69l-6.22 6.22a.75.75 0 1 1-1.06-1.06l6.22-6.22H2.75a.75.75 0 0 1 0-1.5h7.5ZM20.72 2.22a.75.75 0 1 1 1.06 1.06L15.56 9.5h5.69a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1-.75-.75v-7.5a.75.75 0 0 1 1.5 0v5.69l6.22-6.22Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      data-testid="fluent-icon"
+    />
   </span>
   <span
     className="fui-MenuItem__content r1ls86vo"
@@ -65,34 +40,9 @@ exports[`lib/ui/menuItems/collapseMenuItem > should render correctly when isColl
   <span
     className="fui-MenuItem__icon ro9koqv"
   >
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.67 14.92a1 1 0 0 1 1.41 1.42L6.41 19H8a1 1 0 0 1 1 .89V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 1 1 2 0v1.6l2.67-2.68ZM16 21a1 1 0 1 1 0-2h1.59l-2.67-2.66a1 1 0 0 1-.08-1.32l.08-.1a1 1 0 0 1 1.42 0L19 17.6V16a1 1 0 0 1 .89-.99H20a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4ZM8 3a1 1 0 0 1 0 2H6.42l2.66 2.67a1 1 0 0 1 .09 1.32l-.09.1a1 1 0 0 1-1.41 0L5 6.4V8a1 1 0 0 1-.88 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4Zm12 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V6.41l-2.66 2.67a1 1 0 0 1-1.32.09l-.1-.09a1 1 0 0 1 0-1.41L17.6 5H16a1 1 0 0 1-.99-.88V4a1 1 0 0 1 1-1h4Z"
-        fill="currentColor"
-      />
-    </svg>
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.6 15.35a.75.75 0 0 1 1.06 1.06l-3.1 3.1h2.19c.38 0 .7.28.74.64l.01.1c0 .42-.34.75-.75.75h-4a.75.75 0 0 1-.75-.75v-4a.75.75 0 0 1 1.5 0v2.2l3.1-3.1ZM16.25 21a.75.75 0 0 1 0-1.5h2.2l-3.1-3.09a.75.75 0 0 1-.07-.98l.07-.08c.3-.3.77-.3 1.06 0l3.1 3.1v-2.2c0-.38.28-.69.64-.74h.1c.42 0 .75.33.75.74v4c0 .42-.33.75-.75.75h-4ZM7.75 3a.75.75 0 0 1 0 1.5H5.56l3.1 3.1c.26.26.29.68.07.97l-.07.09c-.3.29-.77.29-1.07 0L4.5 5.56v2.19c0 .38-.28.7-.65.74l-.1.01A.75.75 0 0 1 3 7.75v-4c0-.41.34-.75.75-.75h4Zm12.5 0c.42 0 .75.34.75.75v4a.75.75 0 0 1-1.5 0v-2.2l-3.09 3.1a.75.75 0 0 1-.98.08l-.08-.07a.75.75 0 0 1 0-1.07l3.1-3.09h-2.2a.75.75 0 0 1-.74-.65v-.1c0-.41.33-.75.74-.75h4Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      data-testid="fluent-icon"
+    />
   </span>
   <span
     className="fui-MenuItem__content r1ls86vo"
diff --git a/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/pinMenuItem.spec.tsx.snap b/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/pinMenuItem.spec.tsx.snap
index fbd19d387bc..278c594d0ca 100644
--- a/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/pinMenuItem.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/menuItems/__test__/__snapshots__/pinMenuItem.spec.tsx.snap
@@ -14,34 +14,9 @@ exports[`lib/ui/menuItems/pinMenuItem > should render for actions if pinned=fals
   <span
     className="fui-MenuItem__icon ro9koqv"
   >
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m21.07 7.76-4.83-4.83a2.75 2.75 0 0 0-4.4.72L9.4 8.52a.75.75 0 0 1-.42.37L4.8 10.33a1.25 1.25 0 0 0-.48 2.07l3.1 3.1L3 19.94V21h1.06l4.44-4.44 3.1 3.1c.66.66 1.77.4 2.07-.47l1.44-4.17c.06-.18.2-.33.37-.42l4.87-2.44a2.75 2.75 0 0 0 .72-4.4Z"
-        fill="currentColor"
-      />
-    </svg>
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m16.24 2.93 4.83 4.83a2.75 2.75 0 0 1-.72 4.4l-4.87 2.44a.75.75 0 0 0-.37.42l-1.44 4.17a1.25 1.25 0 0 1-2.07.48l-3.1-3.1L4.06 21H3v-1.06l4.44-4.44-3.1-3.1c-.66-.66-.4-1.77.47-2.07l4.17-1.44c.18-.06.34-.2.42-.37l2.44-4.87a2.75 2.75 0 0 1 4.4-.72Zm3.77 5.89-4.83-4.83c-.6-.6-1.62-.44-2 .33l-2.44 4.87c-.26.52-.72.93-1.27 1.12l-3.8 1.3 6.71 6.71 1.31-3.79c.2-.55.6-1.01 1.12-1.27l4.87-2.44c.77-.38.93-1.4.33-2Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      data-testid="fluent-icon"
+    />
   </span>
   <span
     className="fui-MenuItem__content r1ls86vo"
@@ -65,34 +40,9 @@ exports[`lib/ui/menuItems/pinMenuItem > should render for actions if pinned=true
   <span
     className="fui-MenuItem__icon ro9koqv"
   >
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l5.9 5.9-3.3 1.15a1.25 1.25 0 0 0-.49 2.07l3.1 3.1L3 19.94V21h1.06l4.44-4.44 3.1 3.1c.66.66 1.77.4 2.07-.47l1.14-3.31 5.91 5.9a.75.75 0 0 0 1.06-1.06L3.28 2.22Zm17.07 9.94-3.34 1.67L10.17 7l1.67-3.34a2.75 2.75 0 0 1 4.4-.72l4.83 4.83a2.75 2.75 0 0 1-.72 4.4Z"
-        fill="currentColor"
-      />
-    </svg>
-    <svg
-      aria-hidden={true}
-      className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M3.28 2.22a.75.75 0 0 0-1.06 1.06l5.9 5.9-3.3 1.15a1.25 1.25 0 0 0-.49 2.07l3.1 3.1L3 19.94V21h1.06l4.44-4.44 3.1 3.1c.66.66 1.77.4 2.07-.47l1.14-3.31 5.91 5.9a.75.75 0 0 0 1.06-1.06L3.28 2.22ZM13.64 14.7l-1.26 3.62-6.7-6.7 3.62-1.26 4.34 4.34Zm6.04-3.88-3.78 1.9L17 13.82l3.34-1.67a2.75 2.75 0 0 0 .72-4.4l-4.83-4.83a2.75 2.75 0 0 0-4.4.72l-1.67 3.34 1.12 1.11 1.89-3.78c.38-.77 1.4-.93 2-.33l4.83 4.83c.6.6.44 1.62-.33 2Z"
-        fill="currentColor"
-      />
-    </svg>
+    <span
+      data-testid="fluent-icon"
+    />
   </span>
   <span
     className="fui-MenuItem__content r1ls86vo"
diff --git a/libs/designer/src/lib/ui/panel/agentChat/__tests__/__snapshots__/agentChatHeader.spec.tsx.snap b/libs/designer/src/lib/ui/panel/agentChat/__tests__/__snapshots__/agentChatHeader.spec.tsx.snap
index 59895dfcc92..4e34d8cfb45 100644
--- a/libs/designer/src/lib/ui/panel/agentChat/__tests__/__snapshots__/agentChatHeader.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/panel/agentChat/__tests__/__snapshots__/agentChatHeader.spec.tsx.snap
@@ -38,34 +38,9 @@ exports[`AgentChatHeader > renders correctly and matches snapshot when showing s
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.5 2C2.67 2 2 2.67 2 3.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5h-9Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.5 3c.28 0 .5.22.5.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-9c0-.28.22-.5.5-.5h9Zm-9-1C2.67 2 2 2.67 2 3.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5h-9Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
     <button
@@ -80,34 +55,9 @@ exports[`AgentChatHeader > renders correctly and matches snapshot when showing s
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.5 8a4.5 4.5 0 0 1 7.85-3h-1.6a.75.75 0 0 0 0 1.5h3c.41 0 .75-.34.75-.75v-3a.75.75 0 0 0-1.5 0v.78a6 6 0 1 0 1.94 5.32.75.75 0 0 0-1.49-.2A4.5 4.5 0 0 1 3.5 8Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3 8a5 5 0 0 1 9-3h-2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.53A5.99 5.99 0 0 0 2 8a6 6 0 0 0 11.98.54.5.5 0 0 0-1-.08A5 5 0 0 1 3 8Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
     <button
@@ -122,34 +72,9 @@ exports[`AgentChatHeader > renders correctly and matches snapshot when showing s
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.7 4.26a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L11.23 8 7.7 4.26Zm-4 0a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L7.23 8 3.7 4.26Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.65 3.85a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L11.79 8 7.65 3.85Zm-4 0a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L7.79 8 3.65 3.85Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
   </div>
@@ -194,34 +119,9 @@ exports[`AgentChatHeader > renders correctly and matches snapshot with dark mode
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.5 8a4.5 4.5 0 0 1 7.85-3h-1.6a.75.75 0 0 0 0 1.5h3c.41 0 .75-.34.75-.75v-3a.75.75 0 0 0-1.5 0v.78a6 6 0 1 0 1.94 5.32.75.75 0 0 0-1.49-.2A4.5 4.5 0 0 1 3.5 8Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3 8a5 5 0 0 1 9-3h-2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.53A5.99 5.99 0 0 0 2 8a6 6 0 0 0 11.98.54.5.5 0 0 0-1-.08A5 5 0 0 1 3 8Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
     <button
@@ -236,34 +136,9 @@ exports[`AgentChatHeader > renders correctly and matches snapshot with dark mode
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.7 4.26a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L11.23 8 7.7 4.26Zm-4 0a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L7.23 8 3.7 4.26Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.65 3.85a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L11.79 8 7.65 3.85Zm-4 0a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L7.79 8 3.65 3.85Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
   </div>
@@ -308,34 +183,9 @@ exports[`AgentChatHeader > renders correctly when dark mode is on 1`] = `
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.5 8a4.5 4.5 0 0 1 7.85-3h-1.6a.75.75 0 0 0 0 1.5h3c.41 0 .75-.34.75-.75v-3a.75.75 0 0 0-1.5 0v.78a6 6 0 1 0 1.94 5.32.75.75 0 0 0-1.49-.2A4.5 4.5 0 0 1 3.5 8Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3 8a5 5 0 0 1 9-3h-2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.53A5.99 5.99 0 0 0 2 8a6 6 0 0 0 11.98.54.5.5 0 0 0-1-.08A5 5 0 0 1 3 8Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
     <button
@@ -350,34 +200,9 @@ exports[`AgentChatHeader > renders correctly when dark mode is on 1`] = `
       <span
         className="fui-Button__icon rywnvv2"
       >
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.7 4.26a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L11.23 8 7.7 4.26Zm-4 0a.75.75 0 1 1 1.1-1.02l4 4.25c.27.29.27.73 0 1.02l-4 4.25a.75.75 0 1 1-1.1-1.02L7.23 8 3.7 4.26Z"
-            fill="currentColor"
-          />
-        </svg>
-        <svg
-          aria-hidden={true}
-          className="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7.65 3.85a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L11.79 8 7.65 3.85Zm-4 0a.5.5 0 1 1 .7-.7l4.5 4.5c.2.2.2.5 0 .7l-4.5 4.5a.5.5 0 0 1-.7-.7L7.79 8 3.65 3.85Z"
-            fill="currentColor"
-          />
-        </svg>
+        <span
+          data-testid="fluent-icon"
+        />
       </span>
     </button>
   </div>
diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/inputsPanel.spec.tsx.snap b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/inputsPanel.spec.tsx.snap
index 44d1aabb0ca..0d151c01034 100644
--- a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/inputsPanel.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/inputsPanel.spec.tsx.snap
@@ -20,34 +20,9 @@ exports[`InputsPanel > should render error state 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
         Inputs
       </button>
@@ -59,34 +34,9 @@ exports[`InputsPanel > should render error state 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
       </button>
     </div>
@@ -120,34 +70,9 @@ exports[`InputsPanel > should render error state 1`] = `
                 <span
                   class="fui-Button__icon rywnvv2"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <span
+                    data-testid="fluent-icon"
+                  />
                 </span>
               </button>
             </div>
@@ -199,34 +124,9 @@ exports[`InputsPanel > should render loading state 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
         Inputs
       </button>
@@ -238,34 +138,9 @@ exports[`InputsPanel > should render loading state 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
       </button>
     </div>
@@ -299,34 +174,9 @@ exports[`InputsPanel > should render loading state 1`] = `
                 <span
                   class="fui-Button__icon rywnvv2"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <span
+                    data-testid="fluent-icon"
+                  />
                 </span>
               </button>
             </div>
@@ -378,34 +228,9 @@ exports[`InputsPanel > should render the InputsPanel with inputs 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
         Inputs
       </button>
@@ -417,34 +242,9 @@ exports[`InputsPanel > should render the InputsPanel with inputs 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 20 20"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
       </button>
     </div>
@@ -478,34 +278,9 @@ exports[`InputsPanel > should render the InputsPanel with inputs 1`] = `
                 <span
                   class="fui-Button__icon rywnvv2"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <svg
-                    aria-hidden="true"
-                    class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 20 20"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <span
+                    data-testid="fluent-icon"
+                  />
                 </span>
               </button>
             </div>
@@ -557,34 +332,9 @@ exports[`InputsPanel > should render the InputsPanel with no inputs 1`] = `
         <span
           class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
         >
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-              fill="currentColor"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-              fill="currentColor"
-            />
-          </svg>
+          <span
+            data-testid="fluent-icon"
+          />
         </span>
         Inputs
       </button>
diff --git a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/outputsPanel.spec.tsx.snap b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/outputsPanel.spec.tsx.snap
index 6e2780d24fb..666d3b70e0c 100644
--- a/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/outputsPanel.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/monitoringTab/__tests__/__snapshots__/outputsPanel.spec.tsx.snap
@@ -23,34 +23,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
             Outputs
           </button>
@@ -62,34 +37,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
           </button>
         </div>
@@ -123,34 +73,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
                     <span
                       class="fui-Button__icon rywnvv2"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
+                      <span
+                        data-testid="fluent-icon"
+                      />
                     </span>
                   </button>
                 </div>
@@ -200,34 +125,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
           Outputs
         </button>
@@ -239,34 +139,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
         </button>
       </div>
@@ -300,34 +175,9 @@ exports[`OutputsPanel > Should render OutputsPanel with error state 1`] = `
                   <span
                     class="fui-Button__icon rywnvv2"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    <span
+                      data-testid="fluent-icon"
+                    />
                   </span>
                 </button>
               </div>
@@ -434,34 +284,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
             Outputs
           </button>
@@ -473,34 +298,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
           </button>
         </div>
@@ -534,34 +334,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
                     <span
                       class="fui-Button__icon rywnvv2"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
+                      <span
+                        data-testid="fluent-icon"
+                      />
                     </span>
                   </button>
                 </div>
@@ -611,34 +386,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
           Outputs
         </button>
@@ -650,34 +400,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
         </button>
       </div>
@@ -711,34 +436,9 @@ exports[`OutputsPanel > Should render OutputsPanel with loading state 1`] = `
                   <span
                     class="fui-Button__icon rywnvv2"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    <span
+                      data-testid="fluent-icon"
+                    />
                   </span>
                 </button>
               </div>
@@ -845,34 +545,9 @@ exports[`OutputsPanel > Should render OutputsPanel with no outputs 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
             Outputs
           </button>
@@ -922,34 +597,9 @@ exports[`OutputsPanel > Should render OutputsPanel with no outputs 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
           Outputs
         </button>
@@ -1056,34 +706,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
             Outputs
           </button>
@@ -1095,34 +720,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
           </button>
         </div>
@@ -1156,34 +756,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
                     <span
                       class="fui-Button__icon rywnvv2"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
+                      <span
+                        data-testid="fluent-icon"
+                      />
                     </span>
                   </button>
                 </div>
@@ -1233,34 +808,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
           Outputs
         </button>
@@ -1272,34 +822,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___1yz413i_pen21v0 f1a695kz"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.73 4.2a.75.75 0 0 1 1.06.03l5 5.25c.28.3.28.75 0 1.04l-5 5.25a.75.75 0 1 1-1.08-1.04L12.2 10l-4.5-4.73a.75.75 0 0 1 .02-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 20 20"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
         </button>
       </div>
@@ -1333,34 +858,9 @@ exports[`OutputsPanel > Should render OutputsPanel with outputs 1`] = `
                   <span
                     class="fui-Button__icon rywnvv2"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    <span
+                      data-testid="fluent-icon"
+                    />
                   </span>
                 </button>
               </div>
@@ -1584,34 +1084,9 @@ exports[`OutputsPanel > Should render OutputsPanel without uri 1`] = `
             <span
               class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
             >
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                  fill="currentColor"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                fill="currentColor"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                  fill="currentColor"
-                />
-              </svg>
+              <span
+                data-testid="fluent-icon"
+              />
             </span>
             Outputs
           </button>
@@ -1646,34 +1121,9 @@ exports[`OutputsPanel > Should render OutputsPanel without uri 1`] = `
                     <span
                       class="fui-Button__icon rywnvv2"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <svg
-                        aria-hidden="true"
-                        class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 20 20"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                          fill="currentColor"
-                        />
-                      </svg>
+                      <span
+                        data-testid="fluent-icon"
+                      />
                     </span>
                   </button>
                 </div>
@@ -1723,34 +1173,9 @@ exports[`OutputsPanel > Should render OutputsPanel without uri 1`] = `
           <span
             class="fui-Button__icon rywnvv2 ___963sj20_1qpm2bl f1nizpg2"
           >
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z"
-                fill="currentColor"
-              />
-            </svg>
-            <svg
-              aria-hidden="true"
-              class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M4.22 8.47c.3-.3.77-.3 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25c-.3.3-.77.3-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z"
-                fill="currentColor"
-              />
-            </svg>
+            <span
+              data-testid="fluent-icon"
+            />
           </span>
           Outputs
         </button>
@@ -1785,34 +1210,9 @@ exports[`OutputsPanel > Should render OutputsPanel without uri 1`] = `
                   <span
                     class="fui-Button__icon rywnvv2"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M6 4c0-1.1.9-2 2-2h6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <svg
-                      aria-hidden="true"
-                      class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 20 20"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"
-                        fill="currentColor"
-                      />
-                    </svg>
+                    <span
+                      data-testid="fluent-icon"
+                    />
                   </span>
                 </button>
               </div>
diff --git a/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/advancedSettingsMessage.spec.tsx.snap b/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/advancedSettingsMessage.spec.tsx.snap
index 6d2962bc51b..099a977e2b2 100644
--- a/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/advancedSettingsMessage.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/advancedSettingsMessage.spec.tsx.snap
@@ -19,36 +19,10 @@ exports[`AdvancedSettingsMessage Component > should render correctly and match s
     target="_blank"
   >
     Guideline for agent advanced parameters
-    <svg
-      aria-hidden="true"
-      class="fui-Icon-filled ___yt8pzc0_14cuo7n fjseox fez10in f1dd5bof"
-      fill="currentColor"
-      height="12"
+    <span
+      data-testid="fluent-icon"
       style="position: relative; top: 2px; left: 2px;"
-      viewBox="0 0 12 12"
-      width="12"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 3c0-1.1.9-2 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2V7a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1v1a2 2 0 0 1-2-2V3Zm3 6c0 1.1.9 2 2 2h3a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2v1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1V4a2 2 0 0 0-2 2v3Z"
-        fill="currentColor"
-      />
-    </svg>
-    <svg
-      aria-hidden="true"
-      class="fui-Icon-regular ___9ctc0p0_17npts5 f1w7gpdv fez10in f1dd5bof"
-      fill="currentColor"
-      height="12"
-      style="position: relative; top: 2px; left: 2px;"
-      viewBox="0 0 12 12"
-      width="12"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 3.25C1 2 2 1 3.25 1h2.5c1.22 0 2.2.96 2.25 2.16v2.68a2.25 2.25 0 0 1-1.5 2.03V3.25a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v2.5c0 .33.2.6.5.71v1.53a2.25 2.25 0 0 1-2-2.24v-2.5Zm3 5.5C4 9.99 5 11 6.25 11h2.5C9.99 11 11 10 11 8.75v-2.5c0-1.16-.88-2.11-2-2.24v1.53c.3.1.5.38.5.71v2.5c0 .41-.34.75-.75.75h-2.5a.75.75 0 0 1-.75-.75V4.13C4.63 4.43 4 5.27 4 6.25v2.5Z"
-        fill="currentColor"
-      />
-    </svg>
+    />
   </a>
 </div>
 `;
diff --git a/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/settingsection.spec.tsx.snap b/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/settingsection.spec.tsx.snap
index ad33827afc7..013a2bd4bc3 100644
--- a/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/settingsection.spec.tsx.snap
+++ b/libs/designer/src/lib/ui/settings/__tests__/__snapshots__/settingsection.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`ui/settings/settingsection > should construct 1`] = `
       appearance="subtle"
       aria-label="Collapsed Sample Setting Section, Select to expand"
       className="msla-setting-section-header"
-      icon={<CompoundIcon />}
+      icon={<ForwardRef />}
       onClick={[Function]}
     >
       Sample Setting Section