diff --git a/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json b/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json
new file mode 100644
index 0000000000000..7005632f89612
--- /dev/null
+++ b/change/@fluentui-react-button-2730412f-d6ac-4017-b757-ced56c7f214f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: high contrast mode hover style icon fixes",
+  "packageName": "@fluentui/react-button",
+  "email": "eysjiang@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
index d57a6783b323e..667c7429e3f9d 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
@@ -208,6 +208,23 @@ const useRootStyles = makeStyles({
         color: tokens.colorNeutralForeground2BrandPressed,
       },
     },
+
+    '@media (forced-colors: active)': {
+      ':hover': {
+        color: 'Canvas',
+
+        [`& .${buttonClassNames.icon}`]: {
+          color: 'Canvas',
+        },
+      },
+      ':hover:active': {
+        color: 'Canvas',
+
+        [`& .${buttonClassNames.icon}`]: {
+          color: 'Canvas',
+        },
+      },
+    },
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -225,6 +242,19 @@ const useRootStyles = makeStyles({
       ...shorthands.borderColor('transparent'),
       color: tokens.colorNeutralForeground2BrandPressed,
     },
+
+    '@media (forced-colors: active)': {
+      ':hover': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: 'Highlight',
+      },
+      ':hover:active': {
+        backgroundColor: tokens.colorTransparentBackgroundHover,
+        ...shorthands.borderColor('transparent'),
+        color: 'Highlight',
+      },
+    },
   },
 
   // Shape variations
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
index 41501e16a65cc..91960bde0be56 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.styles.ts
@@ -96,6 +96,19 @@ const useRootStyles = makeStyles({
         color: tokens.colorNeutralForeground2Pressed,
       },
     },
+
+    '@media (forced-colors: active)': {
+      ':hover': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: 'Canvas',
+        },
+      },
+      ':hover:active': {
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+          color: 'Canvas',
+        },
+      },
+    },
   },
   transparent: {
     [`& .${compoundButtonClassNames.secondaryContent}`]: {
diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts
index 2c4a2062bb956..5eb7412fdced4 100644
--- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.styles.ts
@@ -62,6 +62,14 @@ const useIconExpandedStyles = makeStyles({
   transparent: {
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  highContrast: {
+    // High contrast styles
+    '@media (forced-colors: active)': {
+      ':hover': {
+        color: 'Canvas',
+      },
+    },
+  },
 });
 
 const useMenuIconStyles = makeStyles({
@@ -110,7 +118,7 @@ export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButton
   if (state.icon) {
     state.icon.className = mergeClasses(
       menuButtonClassNames.icon,
-      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],
+      state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,
       state.icon.className,
     );
   }
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
index eb59db2e7e488..f788f0bfc882b 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.styles.ts
@@ -215,6 +215,12 @@ const useIconCheckedStyles = makeStyles({
   subtleOrTransparent: {
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  // High contrast styles
+  highContrast: {
+    '@media (forced-colors: active)': {
+      forcedColorAdjust: 'auto',
+    },
+  },
 });
 
 const usePrimaryHighContrastStyles = makeStyles({
@@ -272,7 +278,9 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle
   if (state.icon) {
     state.icon.className = mergeClasses(
       toggleButtonClassNames.icon,
-      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,
+      (appearance === 'subtle' || appearance === 'transparent') &&
+        iconCheckedStyles.subtleOrTransparent &&
+        iconCheckedStyles.highContrast,
       state.icon.className,
     );
   }