diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
index f0b6ab81e..876708f7d 100644
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -148,7 +148,7 @@
       <td v-for="tint in tints.toReversed()" :data-tint="tint" :style="{'--original-color': `var(--wa-color-${ hue }-${tint})`, '--color': colors[hue][tint] }">
         <color-popup :title="capitalize(hue) + ' ' + tint" :token="`--wa-color-${ hue }-${ tint }`" :color="colors[hue][tint]">
           <div slot="trigger" class="color swatch" :style="{ colorScheme: tint > 60 ? 'light' : 'dark' }">
-            <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
+            <wa-icon name="copy" variant="regular" class="copy-icon"></wa-icon>
           </div>
         </color-popup>
       </td>
diff --git a/docs/docs/palettes/app/tweak.css b/docs/docs/palettes/app/tweak.css
index ad1704f84..e04b06000 100644
--- a/docs/docs/palettes/app/tweak.css
+++ b/docs/docs/palettes/app/tweak.css
@@ -150,6 +150,18 @@ wa-dropdown > .color.swatch {
     opacity: var(--tweak-icon-opacity, 0%);
   }
 
+  .copy-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    opacity: var(--copy-icon-opacity, 0%);
+
+    &:has(wa-dropdown[open]) {
+      --copy-icon-opacity: 40%;
+    }
+  }
+
   .color.swatch:hover {
     --tweak-icon-opacity: 40%;
     --copy-icon-opacity: 40%;