From f0ea34a57ea73a186105f1bbf8e4f7572e5c7e68 Mon Sep 17 00:00:00 2001
From: coliff <christianoliff@pm.me>
Date: Tue, 12 Dec 2023 22:15:58 +0900
Subject: [PATCH 1/3] Fix Icon Inconsistent colors and class names

Partial fix for #1889
---
 .../icons/icon-accessibility-circle.tsx        |  2 +-
 .../src/components/icons/icon-add.tsx          |  4 ++--
 .../src/components/icons/icon-apps.tsx         |  7 ++-----
 .../src/components/icons/icon-arrow-down.tsx   |  7 +++----
 .../src/components/icons/icon-arrow-up.tsx     |  8 ++++----
 .../src/components/icons/icon-calendar.tsx     |  7 ++-----
 .../src/components/icons/icon-cancel.tsx       | 18 +++++++-----------
 .../src/components/icons/icon-caret-down.tsx   |  6 +++---
 .../src/components/icons/icon-caret-up.tsx     |  6 +++---
 .../icons/icon-check-circle-outline.tsx        |  7 ++-----
 .../src/components/icons/icon-check-circle.tsx |  7 ++-----
 .../src/components/icons/icon-check.tsx        |  3 +--
 .../icons/icon-chevron-double-down.tsx         |  2 +-
 .../icons/icon-chevron-double-up.tsx           |  8 ++++----
 .../icons/icon-chevron-left-thick.tsx          |  7 ++-----
 .../icons/icon-chevron-right-thick.tsx         |  7 +------
 .../src/components/icons/icon-close.tsx        |  2 +-
 .../src/components/icons/icon-collapse-all.tsx |  8 ++------
 .../src/components/icons/icon-copy.tsx         |  8 ++------
 .../src/components/icons/icon-drag-handle.tsx  | 12 +++++-------
 .../src/components/icons/icon-drag.tsx         |  7 ++-----
 .../src/components/icons/icon-edit.tsx         |  7 ++-----
 .../src/components/icons/icon-error.tsx        |  4 ++--
 .../src/components/icons/icon-expand-all.tsx   |  8 ++------
 .../src/components/icons/icon-export.tsx       |  8 ++++----
 .../components/icons/icon-file-bar-graph.tsx   |  2 +-
 .../src/components/icons/icon-folder.tsx       |  2 +-
 .../src/components/icons/icon-help.tsx         |  7 ++-----
 .../src/components/icons/icon-history.tsx      |  8 ++++----
 .../icons/icon-horizontal-ellipsis.tsx         |  9 +++++----
 .../components/icons/icon-indeterminate.tsx    |  6 +++---
 .../src/components/icons/icon-info-outline.tsx |  2 +-
 .../src/components/icons/icon-info.tsx         |  2 +-
 .../src/components/icons/icon-menu.tsx         |  4 ++--
 .../src/components/icons/icon-moon.tsx         |  9 +++------
 .../components/icons/icon-notifications.tsx    |  7 ++-----
 .../src/components/icons/icon-pencil.tsx       |  9 +++------
 .../src/components/icons/icon-pin.tsx          |  7 ++-----
 .../src/components/icons/icon-refresh.tsx      |  8 ++------
 .../src/components/icons/icon-remove.tsx       |  2 +-
 .../src/components/icons/icon-search.tsx       |  7 ++-----
 .../src/components/icons/icon-shield.tsx       |  7 ++-----
 .../src/components/icons/icon-sort-a-z.tsx     | 10 +++++-----
 .../src/components/icons/icon-sort-z-a.tsx     |  2 +-
 .../src/components/icons/icon-sun.tsx          |  7 ++-----
 .../components/icons/icon-timer-countdown.tsx  |  9 +++------
 .../components/icons/icon-triangle-down.tsx    |  4 ++--
 .../components/icons/icon-triangle-left.tsx    |  4 ++--
 .../src/components/icons/icon-tune.tsx         |  6 +++---
 .../src/components/icons/icon-upload-cloud.tsx | 10 +++++-----
 .../icons/icon-vertical-ellipsis.tsx           |  5 +++--
 .../components/icons/icon-visibility-off.tsx   |  2 +-
 .../src/components/icons/icon-visibility.tsx   |  2 +-
 .../components/icons/icon-warning-outline.tsx  |  4 ++--
 .../src/components/icons/icon-warning.tsx      |  3 +--
 .../src/components/icons/icon.spec.tsx         | 16 ++++++++--------
 .../modus-button/modus-button.spec.ts          |  2 +-
 .../modus-checkbox/modus-checkbox.spec.tsx     |  2 +-
 .../modus-content-tree.spec.tsx                |  2 +-
 .../modus-file-dropzone.spec.ts                |  2 +-
 .../modus-message/modus-message.spec.ts        |  2 +-
 .../components/modus-modal/modus-modal.spec.ts |  2 +-
 .../modus-sentiment-scale.tsx                  |  1 +
 .../components/modus-toast/modus-toast.spec.ts |  2 +-
 64 files changed, 146 insertions(+), 221 deletions(-)

diff --git a/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx b/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx
index 800627ef8..4b139b24e 100644
--- a/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx
+++ b/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx
@@ -9,7 +9,7 @@ export const IconAccessibilityCircle: FunctionalComponent<IconProps> = (props: I
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill={props.color ?? '#6A6976'}
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.53 2 12 2Zm0 2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5Zm6 5.25h-3.75v9c0 .41-.34.75-.75.75s-.75-.34-.75-.75V15h-1.5v3.75c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-9H6c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h12c.41 0 .75.34.75.75s-.34.75-.75.75Z" />
   </svg>
diff --git a/stencil-workspace/src/components/icons/icon-add.tsx b/stencil-workspace/src/components/icons/icon-add.tsx
index 9f3d50788..ea8aa9a80 100644
--- a/stencil-workspace/src/components/icons/icon-add.tsx
+++ b/stencil-workspace/src/components/icons/icon-add.tsx
@@ -9,8 +9,8 @@ export const IconAdd: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" fill={props.color ?? '#6A6976'} />
+    <path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-apps.tsx b/stencil-workspace/src/components/icons/icon-apps.tsx
index a486a440d..d5cf48c4e 100644
--- a/stencil-workspace/src/components/icons/icon-apps.tsx
+++ b/stencil-workspace/src/components/icons/icon-apps.tsx
@@ -15,11 +15,8 @@ export const IconApps: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-arrow-down.tsx b/stencil-workspace/src/components/icons/icon-arrow-down.tsx
index 64289ac13..3655a4e09 100644
--- a/stencil-workspace/src/components/icons/icon-arrow-down.tsx
+++ b/stencil-workspace/src/components/icons/icon-arrow-down.tsx
@@ -12,13 +12,12 @@ interface IconProps {
 export const IconArrowDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-arrow-down"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    data-test-id="iconArrowDown"
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M15 12h3.79c.45 0 .67.54.35.85l-6.44 6.44a.996.996 0 0 1-1.41 0l-6.44-6.44A.5.5 0 0 1 5.2 12h3.79V5c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v7Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-arrow-up.tsx b/stencil-workspace/src/components/icons/icon-arrow-up.tsx
index a55cf3e0c..413393fb7 100644
--- a/stencil-workspace/src/components/icons/icon-arrow-up.tsx
+++ b/stencil-workspace/src/components/icons/icon-arrow-up.tsx
@@ -12,13 +12,13 @@ interface IconProps {
 export const IconArrowUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-arrow-up"
-    xmlns="http://www.w3.org/2000/svg"
+    data-test-id="iconArrowUp"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    data-test-id="iconArrowUp"
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M14 20h-4c-.55 0-1-.45-1-1v-7H5.21c-.45 0-.67-.54-.35-.85l6.44-6.44a.996.996 0 0 1 1.41 0l6.44 6.44a.5.5 0 0 1-.35.85h-3.79v7c0 .55-.45 1-1 1Z" />{' '}
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-calendar.tsx b/stencil-workspace/src/components/icons/icon-calendar.tsx
index 7744bb776..cd01c164e 100644
--- a/stencil-workspace/src/components/icons/icon-calendar.tsx
+++ b/stencil-workspace/src/components/icons/icon-calendar.tsx
@@ -15,11 +15,8 @@ export const IconCalendar: FunctionalComponent<IconProps> = (props: IconProps) =
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill={props.color ?? 'currentColor'}
-      d="M13.5 11h-3v3h3v-3Zm4.5 0h-3v3h3v-3Zm2-8h-2c0-.55-.45-1-1-1s-1 .45-1 1H8c0-.55-.45-1-1-1s-1 .45-1 1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 17H4V9.97h16V20Zm0-12.03H4V5h2v1c0 .55.45 1 1 1s1-.45 1-1V5h8v1c0 .55.45 1 1 1s1-.45 1-1V5h2v2.97ZM9 11H6v3h3v-3Z"
-    />
+    <path d="M13.5 11h-3v3h3v-3Zm4.5 0h-3v3h3v-3Zm2-8h-2c0-.55-.45-1-1-1s-1 .45-1 1H8c0-.55-.45-1-1-1s-1 .45-1 1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 17H4V9.97h16V20Zm0-12.03H4V5h2v1c0 .55.45 1 1 1s1-.45 1-1V5h8v1c0 .55.45 1 1 1s1-.45 1-1V5h2v2.97ZM9 11H6v3h3v-3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-cancel.tsx b/stencil-workspace/src/components/icons/icon-cancel.tsx
index dd2ee2ba9..2d2224d5b 100644
--- a/stencil-workspace/src/components/icons/icon-cancel.tsx
+++ b/stencil-workspace/src/components/icons/icon-cancel.tsx
@@ -9,18 +9,14 @@ interface IconProps {
 
 export const IconCancel: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={props.size ?? 16}
-    height={props.size ?? 16}
+    class="icon-cancel"
     fill={props.color ?? 'currentColor'}
-    class="modus-icon"
+    height={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 32 32">
-    <g>
-      <g>
-        <path d="M21.3027,10.6973a1.503,1.503,0,0,0-2.1211,0L16,13.8789l-3.1821-3.1816a1.5,1.5,0,0,0-2.1211,2.1211L13.8789,16l-3.1821,3.1816a1.5012,1.5012,0,0,0,0,2.1211,1.5363,1.5363,0,0,0,2.1211,0L16,18.1211l3.1816,3.1816a1.5,1.5,0,1,0,2.1211-2.1211L18.1211,16l3.1816-3.1816A1.5012,1.5012,0,0,0,21.3027,10.6973Z" />
-        <path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12.0134,12.0134,0,0,1,16,28Z" />
-      </g>
-    </g>
+    viewBox="0 0 32 32"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.3027,10.6973a1.503,1.503,0,0,0-2.1211,0L16,13.8789l-3.1821-3.1816a1.5,1.5,0,0,0-2.1211,2.1211L13.8789,16l-3.1821,3.1816a1.5012,1.5012,0,0,0,0,2.1211,1.5363,1.5363,0,0,0,2.1211,0L16,18.1211l3.1816,3.1816a1.5,1.5,0,1,0,2.1211-2.1211L18.1211,16l3.1816-3.1816A1.5012,1.5012,0,0,0,21.3027,10.6973Z" />
+    <path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12.0134,12.0134,0,0,1,16,28Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-caret-down.tsx b/stencil-workspace/src/components/icons/icon-caret-down.tsx
index 31fc8e10b..4137bd3aa 100644
--- a/stencil-workspace/src/components/icons/icon-caret-down.tsx
+++ b/stencil-workspace/src/components/icons/icon-caret-down.tsx
@@ -10,12 +10,12 @@ interface IconProps {
 export const IconCaretDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-caret-down"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="m12.6 14.74 4.22-4.58c.43-.46.06-1.16-.6-1.16H7.78c-.66 0-1.03.7-.6 1.16l4.22 4.58c.31.34.89.34 1.2 0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-caret-up.tsx b/stencil-workspace/src/components/icons/icon-caret-up.tsx
index afde90b80..548e74973 100644
--- a/stencil-workspace/src/components/icons/icon-caret-up.tsx
+++ b/stencil-workspace/src/components/icons/icon-caret-up.tsx
@@ -10,12 +10,12 @@ interface IconProps {
 export const IconCaretUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-caret-up"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="m11.4 9.26-4.22 4.58c-.43.46-.06 1.16.6 1.16h8.43c.66 0 1.03-.7.6-1.16l-4.22-4.58a.833.833 0 0 0-1.2 0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx b/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx
index 60e02ae1b..482043638 100644
--- a/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx
+++ b/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx
@@ -14,11 +14,8 @@ export const IconCheckCircleOutline: FunctionalComponent<IconProps> = (props: Ic
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4ZM12 18.36C15.531 18.36 18.4 15.4343 18.4 11.9234C18.4 8.41257 15.531 5.56 12 5.56C8.46897 5.56 5.6 8.48571 5.6 11.9966C5.6 15.5074 8.46897 18.36 12 18.36ZM15.44 10.4L11.28 14.56C11.12 14.72 10.96 14.72 10.8 14.72C10.64 14.72 10.48 14.64 10.32 14.56L8.48 12.72C8.24 12.48 8.24 12.08 8.48 11.84C8.72 11.6 9.12 11.6 9.36 11.84L10.72 13.2L14.48 9.44C14.72 9.2 15.12 9.2 15.36 9.44C15.68 9.68 15.68 10.08 15.44 10.4Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4ZM12 18.36C15.531 18.36 18.4 15.4343 18.4 11.9234C18.4 8.41257 15.531 5.56 12 5.56C8.46897 5.56 5.6 8.48571 5.6 11.9966C5.6 15.5074 8.46897 18.36 12 18.36ZM15.44 10.4L11.28 14.56C11.12 14.72 10.96 14.72 10.8 14.72C10.64 14.72 10.48 14.64 10.32 14.56L8.48 12.72C8.24 12.48 8.24 12.08 8.48 11.84C8.72 11.6 9.12 11.6 9.36 11.84L10.72 13.2L14.48 9.44C14.72 9.2 15.12 9.2 15.36 9.44C15.68 9.68 15.68 10.08 15.44 10.4Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check-circle.tsx b/stencil-workspace/src/components/icons/icon-check-circle.tsx
index f769b766f..9305998da 100644
--- a/stencil-workspace/src/components/icons/icon-check-circle.tsx
+++ b/stencil-workspace/src/components/icons/icon-check-circle.tsx
@@ -14,11 +14,8 @@ export const IconCheckCircle: FunctionalComponent<IconProps> = (props: IconProps
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 4C7.584 4 4 7.584 4 12C4 16.416 7.584 20 12 20C16.416 20 20 16.416 20 12C20 7.584 16.416 4 12 4ZM10.4 16L6.4 12L7.528 10.872L10.4 13.736L16.472 7.664L17.6 8.8L10.4 16Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 4C7.584 4 4 7.584 4 12C4 16.416 7.584 20 12 20C16.416 20 20 16.416 20 12C20 7.584 16.416 4 12 4ZM10.4 16L6.4 12L7.528 10.872L10.4 13.736L16.472 7.664L17.6 8.8L10.4 16Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check.tsx b/stencil-workspace/src/components/icons/icon-check.tsx
index b8848785a..831a07d8c 100644
--- a/stencil-workspace/src/components/icons/icon-check.tsx
+++ b/stencil-workspace/src/components/icons/icon-check.tsx
@@ -14,13 +14,12 @@ export const IconCheck: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? () => props.onClick() : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M9.08471 15.4676L5.29164 11.736L4 12.9978L9.08471 18L20 7.26174L18.7175 6L9.08471 15.4676Z"
-      fill={props.color ?? '#6A6976'}
     />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx b/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx
index 86f173fb9..5e08cdb4d 100644
--- a/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx
+++ b/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx
@@ -4,7 +4,7 @@ import { IconProps } from './IconMap';
 
 export const IconChevronDoubleDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-chevron-double-down"
+    class="icon-chevron-double-down"
     xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
diff --git a/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx b/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx
index f8e189a46..aa28ec6b2 100644
--- a/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx
+++ b/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx
@@ -4,13 +4,13 @@ import { IconProps } from './IconMap';
 
 export const IconChevronDoubleUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-chevron-double-up"
-    xmlns="http://www.w3.org/2000/svg"
+    class="icon-chevron-double-up"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M8.11 11.7 12 7.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 5.71a.996.996 0 0 0-1.41 0L6.7 10.29a.996.996 0 1 0 1.41 1.41Zm4.59.6a.996.996 0 0 0-1.41 0L6.7 16.88a.996.996 0 1 0 1.41 1.41L12 14.42l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 12.3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx b/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx
index 7374c97a5..ce71c8912 100644
--- a/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx
+++ b/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx
@@ -13,11 +13,8 @@ export const IconChevronLeftThick: FunctionalComponent<IconProps> = (props: Icon
     height={props.size ?? 16}
     width={props.size ?? 16}
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
+    fill={props.color ?? 'currentColor'}
     viewBox="0 0 32 32">
-    <path
-      d="M21.753 28.06A2.483 2.483 0 0 0 22.864 26c0-.523-.165-1.024-.476-1.45l-.026-.035-.028-.032L14.941 16l7.393-8.483.028-.032.026-.035c.311-.426.476-.927.476-1.45 0-.823-.415-1.593-1.112-2.06-1.135-.76-2.704-.501-3.519.574l-8.572 9.974-.026.03-.024.032a2.445 2.445 0 0 0 0 2.9l.024.032.026.03 8.572 9.974c.816 1.075 2.384 1.335 3.52.574z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M21.753 28.06A2.483 2.483 0 0 0 22.864 26c0-.523-.165-1.024-.476-1.45l-.026-.035-.028-.032L14.941 16l7.393-8.483.028-.032.026-.035c.311-.426.476-.927.476-1.45 0-.823-.415-1.593-1.112-2.06-1.135-.76-2.704-.501-3.519.574l-8.572 9.974-.026.03-.024.032a2.445 2.445 0 0 0 0 2.9l.024.032.026.03 8.572 9.974c.816 1.075 2.384 1.335 3.52.574z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx b/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx
index aeebed0f3..a4d279067 100644
--- a/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx
+++ b/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx
@@ -16,11 +16,6 @@ export const IconChevronRightThick: FunctionalComponent<IconProps> = (props: Ico
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 32 32">
-    <g>
-      <path
-        d="m13.767 27.486 8.572-9.974.026-.03.023-.032a2.444 2.444 0 0 0 0-2.9l-.023-.032-.026-.03-8.572-9.974c-.815-1.075-2.384-1.335-3.52-.574A2.482 2.482 0 0 0 9.136 6c0 .523.164 1.024.476 1.45l.025.035.028.032L17.058 16l-7.392 8.483-.028.032-.026.034A2.442 2.442 0 0 0 9.136 26c0 .823.415 1.594 1.111 2.06 1.136.762 2.704.502 3.52-.573z"
-        fill={props.color ?? '#6A6976'}
-      />
-    </g>
+    <path d="m13.767 27.486 8.572-9.974.026-.03.023-.032a2.444 2.444 0 0 0 0-2.9l-.023-.032-.026-.03-8.572-9.974c-.815-1.075-2.384-1.335-3.52-.574A2.482 2.482 0 0 0 9.136 6c0 .523.164 1.024.476 1.45l.025.035.028.032L17.058 16l-7.392 8.483-.028.032-.026.034A2.442 2.442 0 0 0 9.136 26c0 .823.415 1.594 1.111 2.06 1.136.762 2.704.502 3.52-.573z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-close.tsx b/stencil-workspace/src/components/icons/icon-close.tsx
index c0099036f..79d617758 100644
--- a/stencil-workspace/src/components/icons/icon-close.tsx
+++ b/stencil-workspace/src/components/icons/icon-close.tsx
@@ -20,7 +20,7 @@ export const IconClose: FunctionalComponent<IconProps> = (props: IconProps) => (
     <g clip-path="url(#clip0)">
       <path
         d="M19 7.30929L17.6907 6L12.5 11.1907L7.30929 6L6 7.30929L11.1907 12.5L6 17.6907L7.30929 19L12.5 13.8093L17.6907 19L19 17.6907L13.8093 12.5L19 7.30929Z"
-        fill={props.color ?? '#6A6976'}
+        fill={props.color ?? 'currentColor'}
       />
     </g>
     <defs>
diff --git a/stencil-workspace/src/components/icons/icon-collapse-all.tsx b/stencil-workspace/src/components/icons/icon-collapse-all.tsx
index 4ad827873..953d7ecd5 100644
--- a/stencil-workspace/src/components/icons/icon-collapse-all.tsx
+++ b/stencil-workspace/src/components/icons/icon-collapse-all.tsx
@@ -9,12 +9,8 @@ export const IconCollapseAll: FunctionalComponent<IconProps> = (props: IconProps
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M7.41,18.59,8.83,20,12,16.83,15.17,20l1.41-1.41L12,14ZM16.59,5.41,15.17,4,12,7.17,8.83,4,7.41,5.41,12,10Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M7.41,18.59,8.83,20,12,16.83,15.17,20l1.41-1.41L12,14ZM16.59,5.41,15.17,4,12,7.17,8.83,4,7.41,5.41,12,10Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-copy.tsx b/stencil-workspace/src/components/icons/icon-copy.tsx
index 9ba2c2ec6..dbf56a551 100644
--- a/stencil-workspace/src/components/icons/icon-copy.tsx
+++ b/stencil-workspace/src/components/icons/icon-copy.tsx
@@ -9,12 +9,8 @@ export const IconCopy: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M16,1H4A2.006,2.006,0,0,0,2,3V17H4V3H16Zm3,4H8A2.006,2.006,0,0,0,6,7V21a2.006,2.006,0,0,0,2,2H19a2.006,2.006,0,0,0,2-2V7A2.006,2.006,0,0,0,19,5Zm0,16H8V7H19Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M16,1H4A2.006,2.006,0,0,0,2,3V17H4V3H16Zm3,4H8A2.006,2.006,0,0,0,6,7V21a2.006,2.006,0,0,0,2,2H19a2.006,2.006,0,0,0,2-2V7A2.006,2.006,0,0,0,19,5Zm0,16H8V7H19Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-drag-handle.tsx b/stencil-workspace/src/components/icons/icon-drag-handle.tsx
index 186c308c2..0df6a74d2 100644
--- a/stencil-workspace/src/components/icons/icon-drag-handle.tsx
+++ b/stencil-workspace/src/components/icons/icon-drag-handle.tsx
@@ -21,13 +21,11 @@ export const IconDragHandle: FunctionalComponent<IconProps> = (props: IconProps)
       <g transform="translate(-617.000000, -246.000000)">
         <g transform="translate(100.000000, 100.000000)">
           <g transform="translate(510.000000, 142.000000)">
-            <g>
-              <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-              <path
-                d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
-                id="🔹-Icon-Color"
-                fill={props.color ?? '#6A6976'}></path>
-            </g>
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path
+              d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
+              id="🔹-Icon-Color"
+              fill={props.color ?? 'currentColor'}></path>
           </g>
         </g>
       </g>
diff --git a/stencil-workspace/src/components/icons/icon-drag.tsx b/stencil-workspace/src/components/icons/icon-drag.tsx
index 6eb54fcfa..1849c14ae 100644
--- a/stencil-workspace/src/components/icons/icon-drag.tsx
+++ b/stencil-workspace/src/components/icons/icon-drag.tsx
@@ -9,11 +9,8 @@ export const IconDrag: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-edit.tsx b/stencil-workspace/src/components/icons/icon-edit.tsx
index c25294b50..31e3aca52 100644
--- a/stencil-workspace/src/components/icons/icon-edit.tsx
+++ b/stencil-workspace/src/components/icons/icon-edit.tsx
@@ -9,12 +9,9 @@ export const IconEdit: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-error.tsx b/stencil-workspace/src/components/icons/icon-error.tsx
index bf4ff67fc..e9d575d2d 100644
--- a/stencil-workspace/src/components/icons/icon-error.tsx
+++ b/stencil-workspace/src/components/icons/icon-error.tsx
@@ -19,14 +19,14 @@ export const IconError: FunctionalComponent<IconProps> = (props: IconProps) => (
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3 12C3 7.032 7.032 3 12 3C16.968 3 21 7.032 21 12C21 16.968 16.968 21 12 21C7.032 21 3 16.968 3 12ZM12.9221 12.6706H11.078L10.7707 7.96292H13.2295L12.9221 12.6706ZM12.0001 16.0989C11.3264 16.0989 10.7823 15.5432 10.7823 14.8811C10.7823 14.2191 11.3264 13.6634 12.0001 13.6634C12.6738 13.6634 13.2178 14.2191 13.2178 14.8811C13.2178 15.5432 12.6738 16.0989 12.0001 16.0989Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M3 12C3 7.032 7.032 3 12 3C16.968 3 21 7.032 21 12C21 16.968 16.968 21 12 21C7.032 21 3 16.968 3 12ZM12.9221 12.6706H11.078L10.7707 7.96292H13.2295L12.9221 12.6706ZM12.0001 16.0989C11.3264 16.0989 10.7823 15.5432 10.7823 14.8811C10.7823 14.2191 11.3264 13.6634 12.0001 13.6634C12.6738 13.6634 13.2178 14.2191 13.2178 14.8811C13.2178 15.5432 12.6738 16.0989 12.0001 16.0989Z"
-        fill="white"
+        fill="#fff"
       />
     </mask>
     <g mask="url(#mask0)"></g>
diff --git a/stencil-workspace/src/components/icons/icon-expand-all.tsx b/stencil-workspace/src/components/icons/icon-expand-all.tsx
index e0168ff1a..4e3cf1f5a 100644
--- a/stencil-workspace/src/components/icons/icon-expand-all.tsx
+++ b/stencil-workspace/src/components/icons/icon-expand-all.tsx
@@ -9,12 +9,8 @@ export const IconExpandAll: FunctionalComponent<IconProps> = (props: IconProps)
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="rgba(0,0,0,0)" />
-    <path
-      d="M12,5.83,15.17,9l1.41-1.41L12,3,7.41,7.59,8.83,9Zm0,12.34L8.83,15,7.42,16.41,12,21l4.59-4.59L15.17,15Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M12,5.83,15.17,9l1.41-1.41L12,3,7.41,7.59,8.83,9Zm0,12.34L8.83,15,7.42,16.41,12,21l4.59-4.59L15.17,15Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-export.tsx b/stencil-workspace/src/components/icons/icon-export.tsx
index 58ac99e3b..674a22ff3 100644
--- a/stencil-workspace/src/components/icons/icon-export.tsx
+++ b/stencil-workspace/src/components/icons/icon-export.tsx
@@ -4,13 +4,13 @@ import { IconProps } from './IconMap';
 
 export const IconExport: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-export"
-    xmlns="http://www.w3.org/2000/svg"
+    class="icon-export"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="m14.92 16.79-1.88 1.88h-.01V13c0-.55-.45-1-1-1s-1 .45-1 1v5.67l-1.88-1.88a1 1 0 0 0-1.41 1.41l3.59 3.59c.39.39 1.02.39 1.41 0l3.59-3.59a1 1 0 0 0-1.41-1.41Zm4.79-9.09L14.3 2.29a.99.99 0 0 0-.71-.29H6c-1.1 0-2 .9-2 2v11c0 .55.45 1 1 1s1-.45 1-1V4h6v5c0 .55.45 1 1 1h5v5c0 .55.45 1 1 1s1-.45 1-1V8.41c0-.27-.11-.52-.29-.71ZM14 7.99v-3l3 3h-3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-file-bar-graph.tsx b/stencil-workspace/src/components/icons/icon-file-bar-graph.tsx
index cd0e1d49b..1d61d3bda 100644
--- a/stencil-workspace/src/components/icons/icon-file-bar-graph.tsx
+++ b/stencil-workspace/src/components/icons/icon-file-bar-graph.tsx
@@ -9,7 +9,7 @@ export const IconFileBarGraph: FunctionalComponent<IconProps> = (props: IconProp
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill={props.color ?? '#6A6976'}
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M13.59 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8.41c0-.27-.11-.52-.29-.71L14.3 2.29a.99.99 0 0 0-.71-.29ZM18 20H6V4h6v5c0 .55.45 1 1 1h5v10Zm-9-1c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1s1 .45 1 1v3c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" />
   </svg>
diff --git a/stencil-workspace/src/components/icons/icon-folder.tsx b/stencil-workspace/src/components/icons/icon-folder.tsx
index c79cc09ac..6ba647bd8 100644
--- a/stencil-workspace/src/components/icons/icon-folder.tsx
+++ b/stencil-workspace/src/components/icons/icon-folder.tsx
@@ -11,7 +11,7 @@ export const IconFolder: FunctionalComponent<IconProps> = (props: IconProps) =>
   <svg
     class="icon-folder"
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
+    fill={props.color ?? 'currentColor'}
     height={props.size ?? 24}
     width={props.size ?? 24}
     viewBox="0 0 32 32">
diff --git a/stencil-workspace/src/components/icons/icon-help.tsx b/stencil-workspace/src/components/icons/icon-help.tsx
index 0c3619978..119a90828 100644
--- a/stencil-workspace/src/components/icons/icon-help.tsx
+++ b/stencil-workspace/src/components/icons/icon-help.tsx
@@ -14,11 +14,8 @@ export const IconHelp: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 19H11V17H13V19ZM15.07 11.25L14.17 12.17C13.45 12.9 13 13.5 13 15H11V14.5C11 13.4 11.45 12.4 12.17 11.67L13.41 10.41C13.78 10.05 14 9.55 14 9C14 7.9 13.1 7 12 7C10.9 7 10 7.9 10 9H8C8 6.79 9.79 5 12 5C14.21 5 16 6.79 16 9C16 9.88 15.64 10.68 15.07 11.25Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 19H11V17H13V19ZM15.07 11.25L14.17 12.17C13.45 12.9 13 13.5 13 15H11V14.5C11 13.4 11.45 12.4 12.17 11.67L13.41 10.41C13.78 10.05 14 9.55 14 9C14 7.9 13.1 7 12 7C10.9 7 10 7.9 10 9H8C8 6.79 9.79 5 12 5C14.21 5 16 6.79 16 9C16 9.88 15.64 10.68 15.07 11.25Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-history.tsx b/stencil-workspace/src/components/icons/icon-history.tsx
index 0c65b5d94..3427e5c2d 100644
--- a/stencil-workspace/src/components/icons/icon-history.tsx
+++ b/stencil-workspace/src/components/icons/icon-history.tsx
@@ -4,13 +4,13 @@ import { IconProps } from './IconMap';
 
 export const IconHistory: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-history"
-    xmlns="http://www.w3.org/2000/svg"
+    class="icon-history"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M13.26 3C8.17 2.86 4 6.95 4 12H2.21c-.45 0-.67.54-.35.85l2.79 2.8c.2.2.51.2.71 0l2.79-2.8a.5.5 0 0 0-.36-.85H6c0-3.89 3.16-7.03 7.07-7s6.87 3.15 6.93 6.86c.07 3.93-3.09 7.14-7 7.14-.3 0-.59-.02-.88-.06a.991.991 0 0 0-1.12.99c0 .51.38.93.88 1 .37.05.74.07 1.12.07 5.05 0 9.14-4.17 9-9.26-.13-4.7-4.04-8.61-8.74-8.74Zm-.51 5c-.41 0-.75.34-.75.75v3.68c0 .35.19.68.49.86l3.12 1.85c.36.21.82.09 1.03-.26.21-.36.09-.82-.26-1.03l-2.88-1.71v-3.4c0-.4-.34-.74-.75-.74Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-horizontal-ellipsis.tsx b/stencil-workspace/src/components/icons/icon-horizontal-ellipsis.tsx
index 58fffc41a..6f7473f37 100644
--- a/stencil-workspace/src/components/icons/icon-horizontal-ellipsis.tsx
+++ b/stencil-workspace/src/components/icons/icon-horizontal-ellipsis.tsx
@@ -9,12 +9,13 @@ interface IconProps {
 
 export const IconHorizontalEllipsis: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={props.size ?? 16}
+    class="icon-horizontal-ellipsis"
+    fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
     onClick={props.onClick ? () => props.onClick() : null}
-    fill={props.color ?? '#6A6976'}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M10.59 10.59c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Zm7 0c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Zm-14 0c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-indeterminate.tsx b/stencil-workspace/src/components/icons/icon-indeterminate.tsx
index 3abecdf5d..a8ffe9642 100644
--- a/stencil-workspace/src/components/icons/icon-indeterminate.tsx
+++ b/stencil-workspace/src/components/icons/icon-indeterminate.tsx
@@ -9,13 +9,13 @@ interface IconProps {
 
 export const IconIndeterminate: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="icon-check"
+    class="icon-indeterminate"
     width={props.size ?? 16}
     height={props.size ?? 16}
     viewBox="-3 0 24 4"
     onClick={props.onClick ? () => props.onClick() : null}
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 3V1H17V3H1Z" fill={props.color ?? '#6A6976'} stroke={props.color ?? '#6A6976'} />
+    <path d="M1 3V1H17V3H1Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-info-outline.tsx b/stencil-workspace/src/components/icons/icon-info-outline.tsx
index ecb33ef9c..0b2b92e23 100644
--- a/stencil-workspace/src/components/icons/icon-info-outline.tsx
+++ b/stencil-workspace/src/components/icons/icon-info-outline.tsx
@@ -20,7 +20,7 @@ export const IconInfoOutline: FunctionalComponent<IconProps> = (props: IconProps
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3 12C3 16.9631 7.03773 21 12 21C16.9623 21 21 16.9631 21 12C21 7.03773 16.9623 3 12 3C7.03773 3 3 7.03773 3 12ZM4.81555 12C4.81555 8.03836 8.03836 4.81555 12 4.81555C15.9616 4.81555 19.1845 8.03836 19.1845 12C19.1845 15.9616 15.9616 19.1845 12 19.1845C8.03836 19.1845 4.81555 15.9616 4.81555 12ZM11 17V11H13V17H11ZM11 7V9H13V7H11Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
       <path
diff --git a/stencil-workspace/src/components/icons/icon-info.tsx b/stencil-workspace/src/components/icons/icon-info.tsx
index edf791671..45c901a46 100644
--- a/stencil-workspace/src/components/icons/icon-info.tsx
+++ b/stencil-workspace/src/components/icons/icon-info.tsx
@@ -20,7 +20,7 @@ export const IconInfo: FunctionalComponent<IconProps> = (props: IconProps) => (
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
       <path
diff --git a/stencil-workspace/src/components/icons/icon-menu.tsx b/stencil-workspace/src/components/icons/icon-menu.tsx
index 106a449a4..21b6e399d 100644
--- a/stencil-workspace/src/components/icons/icon-menu.tsx
+++ b/stencil-workspace/src/components/icons/icon-menu.tsx
@@ -15,8 +15,8 @@ export const IconMenu: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill={props.color ?? '#6A6976'} />
+    <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-moon.tsx b/stencil-workspace/src/components/icons/icon-moon.tsx
index 233c577ee..17873a023 100644
--- a/stencil-workspace/src/components/icons/icon-moon.tsx
+++ b/stencil-workspace/src/components/icons/icon-moon.tsx
@@ -5,15 +5,12 @@ import { IconProps } from './IconMap';
 export const IconMoon: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-moon"
+    fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    width={props.size ?? 16}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M18.84 15.35c.44-.13.83.34.58.71-1.88 2.68-5.5 4.18-9.34 3.07-2.43-.7-4.39-2.53-5.16-4.82C3.44 9.91 6.03 5.8 10 4.52c.36-.12.67.27.46.58-1.09 1.68-1.45 3.83-.64 6.06.67 1.85 2.22 3.34 4.15 4.02 1.72.6 3.39.6 4.87.17Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M18.84 15.35c.44-.13.83.34.58.71-1.88 2.68-5.5 4.18-9.34 3.07-2.43-.7-4.39-2.53-5.16-4.82C3.44 9.91 6.03 5.8 10 4.52c.36-.12.67.27.46.58-1.09 1.68-1.45 3.83-.64 6.06.67 1.85 2.22 3.34 4.15 4.02 1.72.6 3.39.6 4.87.17Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-notifications.tsx b/stencil-workspace/src/components/icons/icon-notifications.tsx
index 392299141..5d0f7d545 100644
--- a/stencil-workspace/src/components/icons/icon-notifications.tsx
+++ b/stencil-workspace/src/components/icons/icon-notifications.tsx
@@ -15,11 +15,8 @@ export const IconNotifications: FunctionalComponent<IconProps> = (props: IconPro
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2Zm9.67-2.69C18.36 15.96 17 13.66 17 10a5 5 0 0 0-4-4.9V4c0-.55-.45-1-1-1s-1 .45-1 1v1.1A5 5 0 0 0 7 10c0 3.66-1.37 5.96-2.67 7.31-.61.64-.16 1.69.72 1.69h13.91c.88 0 1.33-1.05.72-1.69Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2Zm9.67-2.69C18.36 15.96 17 13.66 17 10a5 5 0 0 0-4-4.9V4c0-.55-.45-1-1-1s-1 .45-1 1v1.1A5 5 0 0 0 7 10c0 3.66-1.37 5.96-2.67 7.31-.61.64-.16 1.69.72 1.69h13.91c.88 0 1.33-1.05.72-1.69Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-pencil.tsx b/stencil-workspace/src/components/icons/icon-pencil.tsx
index 6d91303f4..5d99adb3c 100644
--- a/stencil-workspace/src/components/icons/icon-pencil.tsx
+++ b/stencil-workspace/src/components/icons/icon-pencil.tsx
@@ -4,16 +4,13 @@ import { IconProps } from './IconMap';
 
 export const IconPencil: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-solid mi-pencil"
+    class="icon-pencil"
     height={props.size ?? 16}
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill={props.color ?? 'currentColor'}
-      d="M3.1 17.15c-.1.1-.15.22-.15.36v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.76 9.99l-3.75-3.75L3.1 17.15ZM20.66 5.68l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41Z"
-    />
+    <path d="M3.1 17.15c-.1.1-.15.22-.15.36v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.76 9.99l-3.75-3.75L3.1 17.15ZM20.66 5.68l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-pin.tsx b/stencil-workspace/src/components/icons/icon-pin.tsx
index b6ab02bf3..b5031857c 100644
--- a/stencil-workspace/src/components/icons/icon-pin.tsx
+++ b/stencil-workspace/src/components/icons/icon-pin.tsx
@@ -9,11 +9,8 @@ export const IconPin: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill={props.color ?? 'currentColor'}
-      d="M17.54 6.45c-1.75-1.75-3.54-2.8-4-2.34-.25.25-.05.88.45 1.68l-4.55 4.55c-1.22-.91-2.2-1.35-2.5-1.05-.44.44.68 2.3 2.55 4.27L4.2 19.31 4 20l.69-.2 5.75-5.29c1.97 1.86 3.81 2.98 4.26 2.54.3-.3-.13-1.27-1.03-2.47l4.56-4.56c.79.49 1.41.68 1.65.44.46-.46-.59-2.25-2.34-4Z"
-    />
+    <path d="M17.54 6.45c-1.75-1.75-3.54-2.8-4-2.34-.25.25-.05.88.45 1.68l-4.55 4.55c-1.22-.91-2.2-1.35-2.5-1.05-.44.44.68 2.3 2.55 4.27L4.2 19.31 4 20l.69-.2 5.75-5.29c1.97 1.86 3.81 2.98 4.26 2.54.3-.3-.13-1.27-1.03-2.47l4.56-4.56c.79.49 1.41.68 1.65.44.46-.46-.59-2.25-2.34-4Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-refresh.tsx b/stencil-workspace/src/components/icons/icon-refresh.tsx
index db5bcb07b..c93c63fc0 100644
--- a/stencil-workspace/src/components/icons/icon-refresh.tsx
+++ b/stencil-workspace/src/components/icons/icon-refresh.tsx
@@ -15,12 +15,8 @@ export const IconRefresh: FunctionalComponent<IconProps> = (props: IconProps) =>
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    data-test-id="iconRefresh"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M18.36 5.64a8.976 8.976 0 0 0-7.16-2.61c-4.2.36-7.66 3.73-8.13 7.92C2.46 16.39 6.68 21 12 21c3.59 0 6.67-2.1 8.11-5.13.36-.75-.18-1.62-1.01-1.62-.42 0-.82.22-.99.6-1.07 2.3-3.4 3.9-6.11 3.9-3.62 0-6.7-3.02-6.75-6.64S8.24 5.25 12 5.25c1.87 0 3.53.78 4.75 2l-1.92 1.92c-.63.63-.18 1.71.71 1.71H20c.55 0 1-.45 1-1V5.42c0-.89-1.08-1.34-1.71-.71l-.94.94Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-remove.tsx b/stencil-workspace/src/components/icons/icon-remove.tsx
index 8a78d4152..b0207e8de 100644
--- a/stencil-workspace/src/components/icons/icon-remove.tsx
+++ b/stencil-workspace/src/components/icons/icon-remove.tsx
@@ -20,7 +20,7 @@ export const IconRemove: FunctionalComponent<IconProps> = (props: IconProps) =>
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3 12C3 7.03691 7.03691 3 12 3C16.9623 3 21 7.03691 21 12C21 16.9623 16.9623 21 12 21C7.03691 21 3 16.9623 3 12ZM15.8889 7L17 8.11113L13.1111 12L17 15.8889L15.8889 17L12 13.1111L8.11113 17L7 15.8889L10.8889 12L7 8.11113L8.11113 7L12 10.8889L15.8889 7Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
       <path
diff --git a/stencil-workspace/src/components/icons/icon-search.tsx b/stencil-workspace/src/components/icons/icon-search.tsx
index 8c1895126..a3d682e44 100644
--- a/stencil-workspace/src/components/icons/icon-search.tsx
+++ b/stencil-workspace/src/components/icons/icon-search.tsx
@@ -15,11 +15,8 @@ export const IconSearch: FunctionalComponent<IconProps> = (props: IconProps) =>
     height={props.size ?? 14}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-shield.tsx b/stencil-workspace/src/components/icons/icon-shield.tsx
index 4fd902a1d..5c790e282 100644
--- a/stencil-workspace/src/components/icons/icon-shield.tsx
+++ b/stencil-workspace/src/components/icons/icon-shield.tsx
@@ -9,11 +9,8 @@ export const IconShield: FunctionalComponent<IconProps> = (props: IconProps) =>
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill={props.color ?? 'currentColor'}
-      d="m19.87 5.36-7.1-3.19a2.001 2.001 0 0 0-1.57-.04L4.17 4.87c-.43.17-.69.6-.63 1.05l.26 1.91c.73 5.39 3.41 10.33 7.53 13.92.19.16.42.24.66.24s.47-.08.66-.24c4.13-3.58 6.83-8.52 7.59-13.91l.2-1.44a.98.98 0 0 0-.58-1.04Zm-1.61 2.2c-.65 4.62-2.87 8.88-6.27 12.09V4.02l6.36 2.86-.1.69Z"
-    />
+    <path d="m19.87 5.36-7.1-3.19a2.001 2.001 0 0 0-1.57-.04L4.17 4.87c-.43.17-.69.6-.63 1.05l.26 1.91c.73 5.39 3.41 10.33 7.53 13.92.19.16.42.24.66.24s.47-.08.66-.24c4.13-3.58 6.83-8.52 7.59-13.91l.2-1.44a.98.98 0 0 0-.58-1.04Zm-1.61 2.2c-.65 4.62-2.87 8.88-6.27 12.09V4.02l6.36 2.86-.1.69Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-sort-a-z.tsx b/stencil-workspace/src/components/icons/icon-sort-a-z.tsx
index bfe4895bf..999c8e06f 100644
--- a/stencil-workspace/src/components/icons/icon-sort-a-z.tsx
+++ b/stencil-workspace/src/components/icons/icon-sort-a-z.tsx
@@ -9,13 +9,13 @@ interface IconProps {
 
 export const IconSortAZ: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={props.size ?? 16}
-    height={props.size ?? 16}
+    data-test-id="iconSortAZ"
     fill={props.color ?? 'currentColor'}
+    height={props.size ?? 16}
     onClick={props.onClick}
-    data-test-id="iconSortAZ"
-    viewBox="0 0 32 32">
+    viewBox="0 0 32 32"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M17.658 14.94a.997.997 0 0 0 1.281-.598L20.155 11h3.69l1.216 3.342a1 1 0 1 0 1.878-.684l-4-11a.999.999 0 0 0-1.878 0l-4 11a1 1 0 0 0 .597 1.282zM22 5.926 23.118 9h-2.236L22 5.926zM26 28h-5.919l6.7-8.375A1.002 1.002 0 0 0 26 18h-8a1 1 0 1 0 0 2h5.919l-6.7 8.375A1.002 1.002 0 0 0 18 30h8a1 1 0 1 0 0-2zm-14.766-5H9V3a1 1 0 1 0-2 0v20H4.766a.86.86 0 0 0-.782.492c-.146.304-.107.655.074.876l3.264 5.085c.165.207.413.326.678.326s.513-.119.709-.369l3.203-4.999a.862.862 0 0 0 .104-.919.86.86 0 0 0-.782-.492z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-sort-z-a.tsx b/stencil-workspace/src/components/icons/icon-sort-z-a.tsx
index cfe0ff248..6c54a55a5 100644
--- a/stencil-workspace/src/components/icons/icon-sort-z-a.tsx
+++ b/stencil-workspace/src/components/icons/icon-sort-z-a.tsx
@@ -9,12 +9,12 @@ interface IconProps {
 
 export const IconSortZA: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
+    data-test-id="iconSortZA"
     xmlns="http://www.w3.org/2000/svg"
     width={props.size ?? 16}
     height={props.size ?? 16}
     fill={props.color ?? 'currentColor'}
     onClick={props.onClick}
-    data-test-id="iconSortZA"
     viewBox="0 0 32 32">
     <path d="M17.658 14.94a.997.997 0 0 0 1.281-.598L20.155 11h3.69l1.216 3.342a1 1 0 1 0 1.878-.684l-4-11a.999.999 0 0 0-1.878 0l-4 11a1 1 0 0 0 .597 1.282zM22 5.926 23.118 9h-2.236L22 5.926zM26 28h-5.919l6.7-8.375A1.002 1.002 0 0 0 26 18h-8a1 1 0 1 0 0 2h5.919l-6.7 8.375A1.002 1.002 0 0 0 18 30h8a1 1 0 1 0 0-2zM8.678 2.547c-.33-.414-.995-.457-1.387.043L4.088 7.589a.862.862 0 0 0-.104.919.86.86 0 0 0 .782.492H7v20a1 1 0 1 0 2 0V9h2.234a.86.86 0 0 0 .782-.492c.146-.304.106-.655-.074-.876L8.678 2.547z" />
   </svg>
diff --git a/stencil-workspace/src/components/icons/icon-sun.tsx b/stencil-workspace/src/components/icons/icon-sun.tsx
index 49e9342e4..27419853f 100644
--- a/stencil-workspace/src/components/icons/icon-sun.tsx
+++ b/stencil-workspace/src/components/icons/icon-sun.tsx
@@ -9,11 +9,8 @@ export const IconSun: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M5 12c0-.34.03-.67.08-1H3c-.55 0-1 .45-1 1s.45 1 1 1h2.08c-.05-.33-.08-.66-.08-1Zm1.4-4.19c.4-.54.88-1.01 1.41-1.41L6.34 4.93a.996.996 0 1 0-1.41 1.41L6.4 7.81Zm11.2 0 1.47-1.47a.996.996 0 1 0-1.41-1.41L16.19 6.4c.54.4 1.01.88 1.41 1.41ZM6.4 16.18l-1.47 1.47a.996.996 0 0 0 .71 1.7c.26 0 .51-.1.71-.29l1.47-1.47c-.54-.4-1.01-.88-1.41-1.41ZM13 5.07V2.99c0-.55-.45-1-1-1s-1 .45-1 1v2.08c.33-.05.66-.08 1-.08s.67.03 1 .08Zm8 5.92h-2.08c.05.33.08.66.08 1s-.03.67-.08 1H21c.55 0 1-.45 1-1s-.45-1-1-1Zm-3.4 5.19c-.4.54-.88 1.01-1.41 1.41l1.47 1.47c.2.2.45.29.71.29s.51-.1.71-.29a.996.996 0 0 0 0-1.41l-1.47-1.47ZM12 6.99c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm-1 11.92v2.08c0 .55.45 1 1 1s1-.45 1-1v-2.08c-.33.05-.66.08-1 .08s-.67-.03-1-.08Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M5 12c0-.34.03-.67.08-1H3c-.55 0-1 .45-1 1s.45 1 1 1h2.08c-.05-.33-.08-.66-.08-1Zm1.4-4.19c.4-.54.88-1.01 1.41-1.41L6.34 4.93a.996.996 0 1 0-1.41 1.41L6.4 7.81Zm11.2 0 1.47-1.47a.996.996 0 1 0-1.41-1.41L16.19 6.4c.54.4 1.01.88 1.41 1.41ZM6.4 16.18l-1.47 1.47a.996.996 0 0 0 .71 1.7c.26 0 .51-.1.71-.29l1.47-1.47c-.54-.4-1.01-.88-1.41-1.41ZM13 5.07V2.99c0-.55-.45-1-1-1s-1 .45-1 1v2.08c.33-.05.66-.08 1-.08s.67.03 1 .08Zm8 5.92h-2.08c.05.33.08.66.08 1s-.03.67-.08 1H21c.55 0 1-.45 1-1s-.45-1-1-1Zm-3.4 5.19c-.4.54-.88 1.01-1.41 1.41l1.47 1.47c.2.2.45.29.71.29s.51-.1.71-.29a.996.996 0 0 0 0-1.41l-1.47-1.47ZM12 6.99c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm-1 11.92v2.08c0 .55.45 1 1 1s1-.45 1-1v-2.08c-.33.05-.66.08-1 .08s-.67-.03-1-.08Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-timer-countdown.tsx b/stencil-workspace/src/components/icons/icon-timer-countdown.tsx
index 0d657078c..36b4797ae 100644
--- a/stencil-workspace/src/components/icons/icon-timer-countdown.tsx
+++ b/stencil-workspace/src/components/icons/icon-timer-countdown.tsx
@@ -5,15 +5,12 @@ import { IconProps } from './IconMap';
 export const IconTimerCountdown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class={`icon-timer-countdown ${props.pressed ? 'pressed' : ''}`}
+    fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    width={props.size ?? 16}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 9v4.5l3.55 2.76A4.496 4.496 0 0 0 12 9Zm7.21.66.52-.52a.996.996 0 0 0 0-1.41l-1.27-1.27a.996.996 0 0 0-1.41 0l-.47.47c-.77-.55-1.64-.96-2.57-1.21V4h1c.55 0 1-.45 1-1s-.45-1-1-1h-6c-.55 0-1 .45-1 1s.45 1 1 1h1v1.69a7.99 7.99 0 0 0-6.05 7.75c0 4.42 3.58 8 8 8s8-3.58 8-8c0-1.33-.33-2.57-.9-3.68.05-.04.11-.06.16-.11Zm-7.26 10.01c-3.43 0-6.22-2.79-6.22-6.22s2.79-6.22 6.22-6.22 6.22 2.79 6.22 6.22-2.79 6.22-6.22 6.22Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 9v4.5l3.55 2.76A4.496 4.496 0 0 0 12 9Zm7.21.66.52-.52a.996.996 0 0 0 0-1.41l-1.27-1.27a.996.996 0 0 0-1.41 0l-.47.47c-.77-.55-1.64-.96-2.57-1.21V4h1c.55 0 1-.45 1-1s-.45-1-1-1h-6c-.55 0-1 .45-1 1s.45 1 1 1h1v1.69a7.99 7.99 0 0 0-6.05 7.75c0 4.42 3.58 8 8 8s8-3.58 8-8c0-1.33-.33-2.57-.9-3.68.05-.04.11-.06.16-.11Zm-7.26 10.01c-3.43 0-6.22-2.79-6.22-6.22s2.79-6.22 6.22-6.22 6.22 2.79 6.22 6.22-2.79 6.22-6.22 6.22Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-triangle-down.tsx b/stencil-workspace/src/components/icons/icon-triangle-down.tsx
index 571708e2c..205a60642 100644
--- a/stencil-workspace/src/components/icons/icon-triangle-down.tsx
+++ b/stencil-workspace/src/components/icons/icon-triangle-down.tsx
@@ -14,8 +14,8 @@ export const IconTriangleDown: FunctionalComponent<IconProps> = (props: IconProp
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 10 6"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" fill={props.color ?? '#6A6976'} />
+    <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-triangle-left.tsx b/stencil-workspace/src/components/icons/icon-triangle-left.tsx
index 8567af876..0185e8ea9 100644
--- a/stencil-workspace/src/components/icons/icon-triangle-left.tsx
+++ b/stencil-workspace/src/components/icons/icon-triangle-left.tsx
@@ -14,8 +14,8 @@ export const IconTriangleLeft: FunctionalComponent<IconProps> = (props: IconProp
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="m16 4-8 8 8 8Z" fill={props.color ?? 'currentColor'} />
+    <path d="m16 4-8 8 8 8Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-tune.tsx b/stencil-workspace/src/components/icons/icon-tune.tsx
index ee0c6f4b4..5bedea193 100644
--- a/stencil-workspace/src/components/icons/icon-tune.tsx
+++ b/stencil-workspace/src/components/icons/icon-tune.tsx
@@ -10,12 +10,12 @@ interface IconProps {
 export const IconTune: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-tune"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M3 18c0 .55.45 1 1 1h5v-2H4c-.55 0-1 .45-1 1ZM3 6c0 .55.45 1 1 1h9V5H4c-.55 0-1 .45-1 1Zm10 14v-1h7c.55 0 1-.45 1-1s-.45-1-1-1h-7v-1c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1ZM7 10v1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v1c0 .55.45 1 1 1s1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1Zm14 2c0-.55-.45-1-1-1h-9v2h9c.55 0 1-.45 1-1Zm-5-3c.55 0 1-.45 1-1V7h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-upload-cloud.tsx b/stencil-workspace/src/components/icons/icon-upload-cloud.tsx
index 832375802..5626b818d 100644
--- a/stencil-workspace/src/components/icons/icon-upload-cloud.tsx
+++ b/stencil-workspace/src/components/icons/icon-upload-cloud.tsx
@@ -9,13 +9,13 @@ interface IconProps {
 
 export const IconUploadCloud: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={props.size ?? 16}
-    height={props.size ?? 16}
+    class="upload-cloud"
     fill={props.color ?? 'currentColor'}
-    class="modus-icon"
+    height={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M19.93 11.12c.04-.29.07-.57.07-.87C20 6.8 17.2 4 13.75 4c-2.53 0-4.7 1.5-5.68 3.66-.42-.1-.86-.16-1.32-.16C3.57 7.5 1 10.07 1 13.25S3.57 19 6.75 19H19c2.21 0 4-1.79 4-4a3.99 3.99 0 0 0-3.07-3.88Zm-4.41 1.31h-1.96V17c0 .27-.22.5-.5.5h-2.11c-.27 0-.5-.23-.5-.5v-4.57H8.48c-.23 0-.35-.28-.18-.44l3.35-3.35c.2-.2.51-.2.71 0l3.35 3.35c.16.16.05.44-.18.44Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-vertical-ellipsis.tsx b/stencil-workspace/src/components/icons/icon-vertical-ellipsis.tsx
index 0cbacdd9a..924b0fb21 100644
--- a/stencil-workspace/src/components/icons/icon-vertical-ellipsis.tsx
+++ b/stencil-workspace/src/components/icons/icon-vertical-ellipsis.tsx
@@ -9,11 +9,12 @@ interface IconProps {
 
 export const IconVerticalEllipsis: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    width={props.size ?? 16}
-    height={props.size ?? 16}
+    class="icon-vertical-ellipsis"
     fill={props.color ?? 'currentColor'}
+    height={props.size ?? 16}
     onClick={props.onClick ? () => props.onClick() : null}
     viewBox="0 0 24 24"
+    width={props.size ?? 16}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M10.59 10.59c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Zm0-7c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Zm0 14c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0Z" />
   </svg>
diff --git a/stencil-workspace/src/components/icons/icon-visibility-off.tsx b/stencil-workspace/src/components/icons/icon-visibility-off.tsx
index efd707c89..5eb0ac0be 100644
--- a/stencil-workspace/src/components/icons/icon-visibility-off.tsx
+++ b/stencil-workspace/src/components/icons/icon-visibility-off.tsx
@@ -9,7 +9,7 @@ interface IconProps {
 
 export const IconVisibilityOff: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="visibility-off"
+    class="icon-visibility-off"
     width={props.size ?? 16}
     height={props.size ?? 16}
     fill={props.color ?? 'currentColor'}
diff --git a/stencil-workspace/src/components/icons/icon-visibility.tsx b/stencil-workspace/src/components/icons/icon-visibility.tsx
index b0a9ca1c9..51dcd596a 100644
--- a/stencil-workspace/src/components/icons/icon-visibility.tsx
+++ b/stencil-workspace/src/components/icons/icon-visibility.tsx
@@ -9,7 +9,7 @@ interface IconProps {
 
 export const IconVisibility: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="visibility"
+    class="icon-visibility"
     width={props.size ?? 16}
     height={props.size ?? 16}
     fill={props.color ?? '#252a2e'}
diff --git a/stencil-workspace/src/components/icons/icon-warning-outline.tsx b/stencil-workspace/src/components/icons/icon-warning-outline.tsx
index 6b77b406f..ef2a140d5 100644
--- a/stencil-workspace/src/components/icons/icon-warning-outline.tsx
+++ b/stencil-workspace/src/components/icons/icon-warning-outline.tsx
@@ -20,14 +20,14 @@ export const IconWarningOutline: FunctionalComponent<IconProps> = (props: IconPr
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12 4.68605C11.6138 4.68605 11.268 4.88157 11.0752 5.20881L3.82989 17.5336C3.64191 17.8533 3.63917 18.2368 3.82371 18.5592C4.01512 18.8934 4.36295 19.093 4.75468 19.093H19.2453C19.6371 19.093 19.9849 18.8934 20.1763 18.5592C20.3608 18.2375 20.3581 17.8533 20.1701 17.5336L12.9248 5.20881C12.732 4.88157 12.3869 4.68605 12 4.68605ZM19.2453 19.779H4.75468C4.11391 19.779 3.54312 19.4504 3.22823 18.9002C2.92019 18.3617 2.92431 17.7209 3.23852 17.1865L10.4838 4.86167C10.8008 4.32244 11.3675 4 12 4C12.6325 4 13.1999 4.32244 13.5162 4.86167L20.7615 17.1865C21.0757 17.7209 21.0798 18.3617 20.7718 18.9002C20.4569 19.4504 19.8861 19.779 19.2453 19.779ZM12.0001 17.0989C11.3264 17.0989 10.7823 16.5432 10.7823 15.8811C10.7823 15.2191 11.3264 14.6634 12.0001 14.6634C12.6738 14.6634 13.2178 15.2191 13.2178 15.8811C13.2178 16.5432 12.6738 17.0989 12.0001 17.0989ZM11.078 13.6706H12.9221L13.2295 8.96292H10.7707L11.078 13.6706Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="18" height="16">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M12 4.68605C11.6138 4.68605 11.268 4.88157 11.0752 5.20881L3.82989 17.5336C3.64191 17.8533 3.63917 18.2368 3.82371 18.5592C4.01512 18.8934 4.36295 19.093 4.75468 19.093H19.2453C19.6371 19.093 19.9849 18.8934 20.1763 18.5592C20.3608 18.2375 20.3581 17.8533 20.1701 17.5336L12.9248 5.20881C12.732 4.88157 12.3869 4.68605 12 4.68605ZM19.2453 19.779H4.75468C4.11391 19.779 3.54312 19.4504 3.22823 18.9002C2.92019 18.3617 2.92431 17.7209 3.23852 17.1865L10.4838 4.86167C10.8008 4.32244 11.3675 4 12 4C12.6325 4 13.1999 4.32244 13.5162 4.86167L20.7615 17.1865C21.0757 17.7209 21.0798 18.3617 20.7718 18.9002C20.4569 19.4504 19.8861 19.779 19.2453 19.779ZM12.0001 17.0989C11.3264 17.0989 10.7823 16.5432 10.7823 15.8811C10.7823 15.2191 11.3264 14.6634 12.0001 14.6634C12.6738 14.6634 13.2178 15.2191 13.2178 15.8811C13.2178 16.5432 12.6738 17.0989 12.0001 17.0989ZM11.078 13.6706H12.9221L13.2295 8.96292H10.7707L11.078 13.6706Z"
-        fill="white"
+        fill="#fff"
       />
     </mask>
     <g mask="url(#mask0)"></g>
diff --git a/stencil-workspace/src/components/icons/icon-warning.tsx b/stencil-workspace/src/components/icons/icon-warning.tsx
index 556328e92..aab5157ad 100644
--- a/stencil-workspace/src/components/icons/icon-warning.tsx
+++ b/stencil-workspace/src/components/icons/icon-warning.tsx
@@ -14,13 +14,12 @@ export const IconWarning: FunctionalComponent<IconProps> = (props: IconProps) =>
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M4.75468 19.779C4.11391 19.779 3.54312 19.4504 3.22823 18.9002C2.92019 18.3617 2.92431 17.7209 3.23852 17.1865L10.4838 4.86167C10.8008 4.32244 11.3675 4 12 4C12.6325 4 13.1999 4.32244 13.5162 4.86167L20.7615 17.1865C21.0757 17.7209 21.0798 18.3617 20.7718 18.9002C20.4569 19.4504 19.8861 19.779 19.2453 19.779H4.75468ZM12.0001 17.0989C11.3264 17.0989 10.7823 16.5432 10.7823 15.8811C10.7823 15.2191 11.3264 14.6634 12.0001 14.6634C12.6738 14.6634 13.2178 15.2191 13.2178 15.8811C13.2178 16.5432 12.6738 17.0989 12.0001 17.0989ZM11.078 13.6706H12.9221L13.2295 8.96292H10.7707L11.078 13.6706Z"
-      fill={props.color ?? '#6A6976'}
     />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon.spec.tsx b/stencil-workspace/src/components/icons/icon.spec.tsx
index 6dba88351..0dbcffc83 100644
--- a/stencil-workspace/src/components/icons/icon.spec.tsx
+++ b/stencil-workspace/src/components/icons/icon.spec.tsx
@@ -11,8 +11,8 @@ describe('icon-triangle-down', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconTriangleDown />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-triangle-down" height="16" width="16" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" fill="#6A6976" />
+      <svg class="icon-triangle-down" height="16" width="16" viewBox="0 0 10 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" />
       </svg>
     `);
   });
@@ -21,8 +21,8 @@ describe('icon-triangle-down', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconTriangleDown size="12" />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-triangle-down" height="12" width="12" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" fill="#6A6976" />
+      <svg class="icon-triangle-down" height="12" width="12" viewBox="0 0 10 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0.5L4.60606 5.5L9.21212 0.5H0Z" />
       </svg>
     `);
   });
@@ -39,7 +39,7 @@ describe('icon-accessibility-circle', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconAccessibilityCircle />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-accessibility-circle" height="16" width="16" viewBox="0 0 24 24" fill="#6A6976" xmlns="http://www.w3.org/2000/svg">
+      <svg class="icon-accessibility-circle" height="16" width="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.53 2 12 2Zm0 2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5Zm6 5.25h-3.75v9c0 .41-.34.75-.75.75s-.75-.34-.75-.75V15h-1.5v3.75c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-9H6c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h12c.41 0 .75.34.75.75s-.34.75-.75.75Z" />
       </svg>
     `);
@@ -49,7 +49,7 @@ describe('icon-accessibility-circle', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconAccessibilityCircle size="12" />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-accessibility-circle" height="12" width="12" viewBox="0 0 24 24" fill="#6A6976" xmlns="http://www.w3.org/2000/svg">
+      <svg class="icon-accessibility-circle" height="12" width="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.53 2 12 2Zm0 2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5Zm6 5.25h-3.75v9c0 .41-.34.75-.75.75s-.75-.34-.75-.75V15h-1.5v3.75c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-9H6c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h12c.41 0 .75.34.75.75s-.34.75-.75.75Z" />
       </svg>
     `);
@@ -67,7 +67,7 @@ describe('icon-file-bar-graph', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconFileBarGraph />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-file-bar-graph" height="16" width="16" viewBox="0 0 24 24" fill="#6A6976" xmlns="http://www.w3.org/2000/svg">
+      <svg class="icon-file-bar-graph" height="16" width="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M13.59 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8.41c0-.27-.11-.52-.29-.71L14.3 2.29a.99.99 0 0 0-.71-.29ZM18 20H6V4h6v5c0 .55.45 1 1 1h5v10Zm-9-1c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1s1 .45 1 1v3c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" />
       </svg>
     `);
@@ -77,7 +77,7 @@ describe('icon-file-bar-graph', () => {
     const page = await renderFunctionalComponentToSpecPage(<IconFileBarGraph size="12" />);
 
     expect(page.root).toEqualHtml(`
-      <svg class="icon-file-bar-graph" height="12" width="12" viewBox="0 0 24 24" fill="#6A6976" xmlns="http://www.w3.org/2000/svg">
+      <svg class="icon-file-bar-graph" height="12" width="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M13.59 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8.41c0-.27-.11-.52-.29-.71L14.3 2.29a.99.99 0 0 0-.71-.29ZM18 20H6V4h6v5c0 .55.45 1 1 1h5v10Zm-9-1c-.55 0-1-.45-1-1v-3c0-.55.45-1 1-1s1 .45 1 1v3c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1Zm3 0c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" />
       </svg>
     `);
diff --git a/stencil-workspace/src/components/modus-button/modus-button.spec.ts b/stencil-workspace/src/components/modus-button/modus-button.spec.ts
index b257a1b02..f044a9cce 100644
--- a/stencil-workspace/src/components/modus-button/modus-button.spec.ts
+++ b/stencil-workspace/src/components/modus-button/modus-button.spec.ts
@@ -48,7 +48,7 @@ describe('modus-button', () => {
       <modus-button icon-only="add">
         <mock:shadow-root>
           <button class="size-medium color-primary style-fill icon-only" role="button">
-            <span class="icon"><svg class="icon-add" height="16" width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" fill="#6A6976"></path></svg></span>
+            <span class="icon"><svg class="icon-add" height="16" width="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z"></path></svg></span>
           </button>
         </mock:shadow-root>
       </modus-button>
diff --git a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
index 819c24112..f55a9665d 100644
--- a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
+++ b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
@@ -13,7 +13,7 @@ describe('modus-checkbox', () => {
           <div class="modus-checkbox">
             <div class="checkbox" tabindex="0">
               <div class="checkmark">
-                <svg class="icon-check" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+                <svg class="icon-check" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                   <path clip-rule="evenodd" d="M9.08471 15.4676L5.29164 11.736L4 12.9978L9.08471 18L20 7.26174L18.7175 6L9.08471 15.4676Z" fill="#FFFFFF" fill-rule="evenodd"></path>
                 </svg>
               </div>
diff --git a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
index 99a1f9dff..451075a90 100644
--- a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
+++ b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
@@ -36,7 +36,7 @@ describe('modus-tree-view-item', () => {
        <div class="tree-item standard" tabindex="0">
           <div class="icon-slot drag-icon hidden">
              <slot name="dragIcon"></slot>
-             <svg class="icon-drag" height="16" width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+             <svg class="icon-drag" height="16" width="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z" fill="currentColor"></path>
              </svg>
           </div>
diff --git a/stencil-workspace/src/components/modus-file-dropzone/modus-file-dropzone.spec.ts b/stencil-workspace/src/components/modus-file-dropzone/modus-file-dropzone.spec.ts
index 723337174..91fb5f470 100644
--- a/stencil-workspace/src/components/modus-file-dropzone/modus-file-dropzone.spec.ts
+++ b/stencil-workspace/src/components/modus-file-dropzone/modus-file-dropzone.spec.ts
@@ -17,7 +17,7 @@ describe('modus-file-dropzone', () => {
               <span></span>
             </div>
             <div class="dropzone null" tabindex="0">
-              <svg class="modus-icon" fill="currentColor" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <svg class="upload-cloud" fill="currentColor" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path d="M19.93 11.12c.04-.29.07-.57.07-.87C20 6.8 17.2 4 13.75 4c-2.53 0-4.7 1.5-5.68 3.66-.42-.1-.86-.16-1.32-.16C3.57 7.5 1 10.07 1 13.25S3.57 19 6.75 19H19c2.21 0 4-1.79 4-4a3.99 3.99 0 0 0-3.07-3.88Zm-4.41 1.31h-1.96V17c0 .27-.22.5-.5.5h-2.11c-.27 0-.5-.23-.5-.5v-4.57H8.48c-.23 0-.35-.28-.18-.44l3.35-3.35c.2-.2.51-.2.71 0l3.35 3.35c.16.16.05.44-.18.44Z"/>
               </svg>
                 <div class="browse">
diff --git a/stencil-workspace/src/components/modus-message/modus-message.spec.ts b/stencil-workspace/src/components/modus-message/modus-message.spec.ts
index 4da0276e4..f460c5d4b 100644
--- a/stencil-workspace/src/components/modus-message/modus-message.spec.ts
+++ b/stencil-workspace/src/components/modus-message/modus-message.spec.ts
@@ -13,7 +13,7 @@ describe('modus-message', () => {
               <div class="info modus-message" role="note">
                 <span class="icon">
                   <svg class="icon-info" fill="none" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
-                    <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="#6A6976" fill-rule="evenodd"></path>
+                    <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="currentColor" fill-rule="evenodd"></path>
                     <mask height="18" id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" width="18" x="3" y="3">
                       <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="white" fill-rule="evenodd"></path>
                     </mask>
diff --git a/stencil-workspace/src/components/modus-modal/modus-modal.spec.ts b/stencil-workspace/src/components/modus-modal/modus-modal.spec.ts
index 8acd41284..6aa06c454 100644
--- a/stencil-workspace/src/components/modus-modal/modus-modal.spec.ts
+++ b/stencil-workspace/src/components/modus-modal/modus-modal.spec.ts
@@ -17,7 +17,7 @@ describe('modus-modal', () => {
                   <div role="button" tabindex="0" aria-label="Close">
                       <svg class="icon-close" height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <g clip-path="url(#clip0)">
-                            <path d="M19 7.30929L17.6907 6L12.5 11.1907L7.30929 6L6 7.30929L11.1907 12.5L6 17.6907L7.30929 19L12.5 13.8093L17.6907 19L19 17.6907L13.8093 12.5L19 7.30929Z" fill="#6A6976"></path>
+                            <path d="M19 7.30929L17.6907 6L12.5 11.1907L7.30929 6L6 7.30929L11.1907 12.5L6 17.6907L7.30929 19L12.5 13.8093L17.6907 19L19 17.6907L13.8093 12.5L19 7.30929Z" fill="currentColor"></path>
                         </g>
                         <defs>
                             <clipPath id="clip0">
diff --git a/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.tsx b/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.tsx
index 8330b37b2..262d1637e 100644
--- a/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.tsx
+++ b/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import { Component, Prop, State, h, Event, EventEmitter } from '@stencil/core';
 import { IconMap } from '../icons/IconMap';
 import {
diff --git a/stencil-workspace/src/components/modus-toast/modus-toast.spec.ts b/stencil-workspace/src/components/modus-toast/modus-toast.spec.ts
index 4473d16d5..916c5e6d6 100644
--- a/stencil-workspace/src/components/modus-toast/modus-toast.spec.ts
+++ b/stencil-workspace/src/components/modus-toast/modus-toast.spec.ts
@@ -13,7 +13,7 @@ describe('modus-toast', () => {
         <div class="default modus-toast" role="status">
           <div class="icon">
             <svg class="icon-info" fill="none" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
-              <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="#6A6976" fill-rule="evenodd"></path>
+              <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="currentColor" fill-rule="evenodd"></path>
               <mask height="18" id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" width="18" x="3" y="3">
                 <path clip-rule="evenodd" d="M12 21C16.968 21 21 16.968 21 12C21 7.032 16.968 3 12 3C7.032 3 3 7.032 3 12C3 16.968 7.032 21 12 21ZM11 7H13V9H11V7ZM11 11H13L13 17H11L11 11Z" fill="white" fill-rule="evenodd"></path>
               </mask>

From aec22dd1b95715b212e61f4ad91b38abaf95a583 Mon Sep 17 00:00:00 2001
From: coliff <christianoliff@pm.me>
Date: Tue, 12 Dec 2023 23:14:14 +0900
Subject: [PATCH 2/3] fix tests

---
 stencil-workspace/src/components/icons/icon-check.tsx          | 3 ++-
 .../src/components/modus-checkbox/modus-checkbox.spec.tsx      | 2 +-
 .../components/modus-content-tree/modus-content-tree.spec.tsx  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/stencil-workspace/src/components/icons/icon-check.tsx b/stencil-workspace/src/components/icons/icon-check.tsx
index 831a07d8c..b8848785a 100644
--- a/stencil-workspace/src/components/icons/icon-check.tsx
+++ b/stencil-workspace/src/components/icons/icon-check.tsx
@@ -14,12 +14,13 @@ export const IconCheck: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? () => props.onClick() : null}
     viewBox="0 0 24 24"
-    fill={props.color ?? 'currentColor'}
+    fill="none"
     xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M9.08471 15.4676L5.29164 11.736L4 12.9978L9.08471 18L20 7.26174L18.7175 6L9.08471 15.4676Z"
+      fill={props.color ?? '#6A6976'}
     />
   </svg>
 );
diff --git a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
index f55a9665d..819c24112 100644
--- a/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
+++ b/stencil-workspace/src/components/modus-checkbox/modus-checkbox.spec.tsx
@@ -13,7 +13,7 @@ describe('modus-checkbox', () => {
           <div class="modus-checkbox">
             <div class="checkbox" tabindex="0">
               <div class="checkmark">
-                <svg class="icon-check" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+                <svg class="icon-check" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                   <path clip-rule="evenodd" d="M9.08471 15.4676L5.29164 11.736L4 12.9978L9.08471 18L20 7.26174L18.7175 6L9.08471 15.4676Z" fill="#FFFFFF" fill-rule="evenodd"></path>
                 </svg>
               </div>
diff --git a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
index 451075a90..2a014f600 100644
--- a/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
+++ b/stencil-workspace/src/components/modus-content-tree/modus-content-tree.spec.tsx
@@ -37,7 +37,7 @@ describe('modus-tree-view-item', () => {
           <div class="icon-slot drag-icon hidden">
              <slot name="dragIcon"></slot>
              <svg class="icon-drag" height="16" width="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                <path d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z" fill="currentColor"></path>
+                <path d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z"></path>
              </svg>
           </div>
           <div aria-disabled="true" style="padding-left: 0rem;"></div>

From 1d9cc9cb4b8864d8d22d556e6e87c766122ff6cb Mon Sep 17 00:00:00 2001
From: coliff <christianoliff@pm.me>
Date: Wed, 13 Dec 2023 15:15:43 +0900
Subject: [PATCH 3/3] Update icon-indeterminate.tsx

---
 .../src/components/icons/icon-indeterminate.tsx             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/stencil-workspace/src/components/icons/icon-indeterminate.tsx b/stencil-workspace/src/components/icons/icon-indeterminate.tsx
index 21becd41d..b7da422ee 100644
--- a/stencil-workspace/src/components/icons/icon-indeterminate.tsx
+++ b/stencil-workspace/src/components/icons/icon-indeterminate.tsx
@@ -16,6 +16,10 @@ export const IconIndeterminate: FunctionalComponent<IconProps> = (props: IconPro
     onClick={props.onClick ? () => props.onClick() : null}
     fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M1 3V1H17V3H1Z" />
+    <path
+      d="M18.5 13.5h-13c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h13c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5Z"
+      fill={props.color ?? '#6A6976'}
+      stroke={props.color ?? '#6A6976'}
+    />
   </svg>
 );