diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index 19cac7ea04b77e..00cc8e52ac95cf 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -274,11 +274,11 @@ export const styles = css`
   }
 
   :host([appearance='subtle']:hover) ::slotted(svg) {
-    color: ${colorNeutralForeground2BrandHover};
+    fill: ${colorNeutralForeground2BrandHover};
   }
 
   :host([appearance='subtle']:hover:active) ::slotted(svg) {
-    color: ${colorNeutralForeground2BrandPressed};
+    fill: ${colorNeutralForeground2BrandPressed};
   }
 
   :host([appearance='transparent']) .control {