diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 275c339bf4..13452cf981 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -14,6 +14,7 @@
   export let disabled = false
   export let color
   export let tooltip
+  export let newStyles = false
 
   $: rotation = getRotation(direction)
 
@@ -28,6 +29,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="icon"
+  class:newStyles
   on:mouseover={() => (showTooltip = true)}
   on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
@@ -60,6 +62,9 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
@@ -72,7 +77,10 @@
   svg.hoverable:active {
     color: var(--spectrum-global-color-blue-400) !important;
   }
-
+  .newStyles svg.hoverable:hover,
+  .newStyles svg.hoverable:active {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
diff --git a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
index 82c3f80a6f..1bd55b4e21 100644
--- a/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte
@@ -65,7 +65,7 @@
         {/if}
         <span />
         {#if !empty}
-          <Icon name="Copy" hoverable on:click={copy} />
+          <Icon name="Copy" hoverable newStyles on:click={copy} />
         {/if}
       {/if}
     </div>