diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
index cbba4b0fd12c9..23c3f2e7077f1 100644
--- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Button.stories.tsx
@@ -2,8 +2,11 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles } from '@griffel/react';
 
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
 const steps = new Screener.Steps()
   .snapshot('default', { cropTo: '.testWrapper' })
   .hover('#button-id')
@@ -125,19 +128,19 @@ storiesOf('Button Converged', module)
     { includeHighContrast: true, includeDarkMode: true },
   )
   .addStory('Size small', () => (
-    <Button id={buttonId} icon="X" size="small">
+    <Button id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </Button>
   ))
   .addStory('Size large', () => (
-    <Button id={buttonId} icon="X" size="large">
+    <Button id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </Button>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="small">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -145,7 +148,7 @@ storiesOf('Button Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="medium">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -153,7 +156,7 @@ storiesOf('Button Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <Button id={buttonId} className={styles.longText} icon="X" size="large">
+      <Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </Button>
     );
@@ -161,7 +164,7 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <Button id={buttonId} icon="X">
+      <Button id={buttonId} icon={<CalendarMonth />}>
         Hello, world
       </Button>
     ),
@@ -172,14 +175,14 @@ storiesOf('Button Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <Button id={buttonId} icon="X" iconPosition="after">
+      <Button id={buttonId} icon={<CalendarMonth />} iconPosition="after">
         Hello, world
       </Button>
     ),
     { includeRtl: true },
   )
-  .addStory('Icon only', () => <Button id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon="X" />, {
+  .addStory('Icon only', () => <Button id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon={<CalendarMonth />} />, {
     includeRtl: true,
   });
 
@@ -210,7 +213,7 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon before content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X">
+      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />}>
         Hello, world
       </CompoundButton>
     ),
@@ -219,7 +222,12 @@ storiesOf('CompoundButton Converged', module)
   .addStory(
     'With icon after content',
     () => (
-      <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" iconPosition="after">
+      <CompoundButton
+        id={buttonId}
+        secondaryContent="This is some secondary text"
+        icon={<CalendarMonth />}
+        iconPosition="after"
+      >
         Hello, world
       </CompoundButton>
     ),
@@ -279,12 +287,12 @@ storiesOf('CompoundButton Converged', module)
     </CompoundButton>
   ))
   .addStory('Size small', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="small">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="small">
       Hello, world
     </CompoundButton>
   ))
   .addStory('Size large', () => (
-    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="large">
+    <CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="large">
       Hello, world
     </CompoundButton>
   ))
@@ -295,7 +303,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="small"
       >
         Long text wraps after it hits the max width of the component
@@ -309,7 +317,7 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="medium"
       >
         Long text wraps after it hits the max width of the component
@@ -323,17 +331,21 @@ storiesOf('CompoundButton Converged', module)
         id={buttonId}
         className={styles.longText}
         secondaryContent="This is some secondary text"
-        icon="X"
+        icon={<CalendarMonth />}
         size="large"
       >
         Long text wraps after it hits the max width of the component
       </CompoundButton>
     );
   })
-  .addStory('Icon only', () => <CompoundButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <CompoundButton id={buttonId} shape="circular" icon="X" />, {
-    includeRtl: true,
-  });
+  .addStory('Icon only', () => <CompoundButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory(
+    'Circular and icon only',
+    () => <CompoundButton id={buttonId} shape="circular" icon={<CalendarMonth />} />,
+    {
+      includeRtl: true,
+    },
+  );
 
 storiesOf('ToggleButton Converged', module)
   .addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
@@ -395,19 +407,19 @@ storiesOf('ToggleButton Converged', module)
     </ToggleButton>
   ))
   .addStory('Size small', () => (
-    <ToggleButton id={buttonId} icon="X" size="small">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size large', () => (
-    <ToggleButton id={buttonId} icon="X" size="large">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </ToggleButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -415,7 +427,7 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
@@ -423,23 +435,23 @@ storiesOf('ToggleButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <ToggleButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </ToggleButton>
     );
   })
   .addStory('With icon before content', () => (
-    <ToggleButton id={buttonId} icon="X">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </ToggleButton>
   ))
   .addStory('With icon after content', () => (
-    <ToggleButton id={buttonId} icon="X" iconPosition="after">
+    <ToggleButton id={buttonId} icon={<CalendarMonth />} iconPosition="after">
       Hello, world
     </ToggleButton>
   ))
-  .addStory('Icon only', () => <ToggleButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon="X" />)
+  .addStory('Icon only', () => <ToggleButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon={<CalendarMonth />} />)
   .addStory('Checked', () => (
     <ToggleButton id={buttonId} checked>
       Hello, world
@@ -515,19 +527,19 @@ storiesOf('MenuButton Converged', module)
     </MenuButton>
   ))
   .addStory('Size small', () => (
-    <MenuButton id={buttonId} icon="X" size="small">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="small">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size large', () => (
-    <MenuButton id={buttonId} icon="X" size="large">
+    <MenuButton id={buttonId} icon={<CalendarMonth />} size="large">
       Hello, world
     </MenuButton>
   ))
   .addStory('Size small - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="small">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -535,7 +547,7 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size medium - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="medium">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
@@ -543,15 +555,15 @@ storiesOf('MenuButton Converged', module)
   .addStory('Size large - with long text wrapping', () => {
     const styles = useStyles();
     return (
-      <MenuButton id={buttonId} className={styles.longText} icon="X" size="large">
+      <MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
         Long text wraps after it hits the max width of the component
       </MenuButton>
     );
   })
   .addStory('With icon', () => (
-    <MenuButton id={buttonId} icon="X">
+    <MenuButton id={buttonId} icon={<CalendarMonth />}>
       Hello, world
     </MenuButton>
   ))
-  .addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
-  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);
+  .addStory('Icon only', () => <MenuButton id={buttonId} icon={<CalendarMonth />} />)
+  .addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon={<CalendarMonth />} />);
diff --git a/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json b/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json
new file mode 100644
index 0000000000000..2c4a43d08e7a5
--- /dev/null
+++ b/change/@fluentui-react-button-2bff9178-dae7-48c6-9b2e-4e5effb0d484.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Cleaning up tokens in Button components so they better adhere to the design spec.",
+  "packageName": "@fluentui/react-button",
+  "email": "humberto_makoto@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
index 59a2e1ae3a01a..9c6b4bea2c82c 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts
@@ -129,13 +129,13 @@ const useRootStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
       ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
+      color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
       ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandPressed,
+      color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {
@@ -270,11 +270,11 @@ const useRootDisabledStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackground,
 
     ':hover': {
-      backgroundColor: tokens.colorTransparentBackgroundHover,
+      backgroundColor: tokens.colorTransparentBackground,
     },
 
     ':hover:active': {
-      backgroundColor: tokens.colorTransparentBackgroundPressed,
+      backgroundColor: tokens.colorTransparentBackground,
     },
   },
   primary: {
@@ -292,30 +292,30 @@ const useRootDisabledStyles = makeStyles({
     /* The secondary styles are exactly the same as the base styles. */
   },
   subtle: {
-    backgroundColor: 'transparent',
+    backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
   },
   transparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackground,
       ...shorthands.borderColor('transparent'),
     },
   },
@@ -323,8 +323,8 @@ const useRootDisabledStyles = makeStyles({
 
 const useRootFocusStyles = makeStyles({
   base: createCustomFocusIndicatorStyle({
-    ...shorthands.borderColor('transparent'),
-    outlineColor: 'transparent',
+    ...shorthands.borderColor(tokens.colorTransparentStroke),
+    outlineColor: tokens.colorTransparentStroke,
     outlineWidth: tokens.strokeWidthThick,
     outlineStyle: 'solid',
     boxShadow: `
@@ -416,6 +416,17 @@ const useIconStyles = makeStyles({
     [iconSpacingVar]: tokens.spacingHorizontalSNudge,
   },
 
+  // Appearance variations
+  subtle: {
+    ':hover': {
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+
+    ':hover:active': {
+      color: tokens.colorNeutralForeground2BrandPressed,
+    },
+  },
+
   // Icon position variations
   before: {
     marginRight: `var(${iconSpacingVar})`,
@@ -467,6 +478,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
       buttonClassNames.icon,
       iconStyles.base,
       state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],
+      appearance === 'subtle' && iconStyles.subtle,
       iconStyles[size],
       state.icon.className,
     );
diff --git a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index c95d90d00cbc5..b811f96e9b880 100644
--- a/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -81,13 +81,13 @@ const useRootStyles = makeStyles({
 
     ':hover': {
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandHover,
+        color: tokens.colorNeutralForeground2Hover,
       },
     },
 
     ':hover:active': {
       [`& .${compoundButtonClassNames.secondaryContent}`]: {
-        color: tokens.colorNeutralForeground2BrandPressed,
+        color: tokens.colorNeutralForeground2Pressed,
       },
     },
   },
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 28451982af625..f0e51476fa0b5 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -50,18 +50,18 @@ const useRootStyles = makeStyles({
   },
   primary: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralForegroundInverted,
+      borderRightColor: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralForegroundInverted,
+        borderRightColor: tokens.colorNeutralForegroundOnBrand,
       },
     },
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralForegroundInverted,
+        borderRightColor: tokens.colorNeutralForegroundOnBrand,
       },
     },
   },
@@ -70,7 +70,7 @@ const useRootStyles = makeStyles({
   },
   subtle: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1Hover,
+      borderRightColor: tokens.colorNeutralStroke1,
     },
 
     ':hover': {
@@ -81,13 +81,13 @@ const useRootStyles = makeStyles({
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorNeutralStroke1Pressed,
       },
     },
   },
   transparent: {
     [`& .${splitButtonClassNames.primaryActionButton}`]: {
-      borderRightColor: tokens.colorNeutralStroke1Hover,
+      borderRightColor: tokens.colorNeutralStroke1,
     },
 
     ':hover': {
@@ -98,7 +98,7 @@ const useRootStyles = makeStyles({
 
     ':hover:active': {
       [`& .${splitButtonClassNames.primaryActionButton}`]: {
-        borderRightColor: tokens.colorNeutralStroke1Hover,
+        borderRightColor: tokens.colorNeutralStroke1Pressed,
       },
     },
   },
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index d0b2b77b39e78..f127fb1bf010e 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -111,18 +111,18 @@ const useCheckedStyles = makeStyles({
   subtle: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
     ...shorthands.borderColor('transparent'),
-    color: tokens.colorNeutralForeground2BrandSelected,
+    color: tokens.colorNeutralForeground2Selected,
 
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
       ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandHover,
+      color: tokens.colorNeutralForeground2Hover,
     },
 
     ':hover:active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
       ...shorthands.borderColor('transparent'),
-      color: tokens.colorNeutralForeground2BrandPressed,
+      color: tokens.colorNeutralForeground2Pressed,
     },
   },
   transparent: {
@@ -183,38 +183,54 @@ const useDisabledStyles = makeStyles({
     /* The secondary styles are exactly the same as the base styles. */
   },
   subtle: {
-    backgroundColor: 'transparent',
+    backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackgroundHover,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
       ...shorthands.borderColor('transparent'),
     },
   },
   transparent: {
-    backgroundColor: 'transparent',
+    backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderColor('transparent'),
 
     ':hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackgroundHover,
       ...shorthands.borderColor('transparent'),
     },
 
     ':hover:active': {
-      backgroundColor: 'transparent',
+      backgroundColor: tokens.colorTransparentBackgroundPressed,
       ...shorthands.borderColor('transparent'),
     },
   },
 });
 
+const useIconStyles = makeStyles({
+  // Appearance variations
+  subtle: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+
+    ':hover': {
+      color: tokens.colorNeutralForeground2BrandHover,
+    },
+
+    ':hover:active': {
+      color: tokens.colorNeutralForeground2BrandPressed,
+    },
+  },
+});
+
 export const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {
   const checkedStyles = useCheckedStyles();
   const disabledStyles = useDisabledStyles();
+  const iconStyles = useIconStyles();
 
   const { appearance, checked, disabled, disabledFocusable } = state;
 
@@ -235,7 +251,11 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);
+    state.icon.className = mergeClasses(
+      toggleButtonClassNames.icon,
+      appearance === 'subtle' && iconStyles.subtle,
+      state.icon.className,
+    );
   }
 
   useButtonStyles_unstable(state);