diff --git a/change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json b/change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json
new file mode 100644
index 0000000000000..3c74f0145d9d5
--- /dev/null
+++ b/change/@fluentui-react-spinbutton-76d708a4-ab34-43c6-a831-8aca052df11b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: updates internal SpinButton padding",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx
index 86d861e0959bf..e8d08b8b119e3 100644
--- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx
+++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx
@@ -260,7 +260,7 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
         ref,
         autoComplete: 'off',
         role: 'spinbutton',
-        appearance: appearance,
+        appearance,
         type: 'text',
         ...nativeProps.primary,
       },
diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index a546c0e251c67..24c48d243c87f 100644
--- a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -60,6 +60,13 @@ const useRootStyles = makeStyles({
     },
   },
 
+  small: {
+    paddingLeft: tokens.spacingHorizontalS,
+  },
+
+  // intentionally empty
+  medium: {},
+
   outline: {
     '::before': {
       ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
@@ -198,15 +205,14 @@ const useButtonStyles = makeStyles({
     ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),
   },
 
-  // TODO: revisit these padding numbers for aligning the icon.
-  // Padding values aren't perfect.
-  // The icon doesn't align perfectly with the Figma designs.
-  // It's set in a 16x16px square but the artwork is inset from that
-  // so I've had to compute the numbers by handle.
+  // Padding values numbers don't align with design specs
+  // but visually the padding aligns.
+  // The icons are set in a 16x16px square but the artwork is inset from that
+  // so these padding values are computed by hand.
   // Additionally the design uses fractional values so these are
   // rounded to the nearest integer.
   incrementButtonSmall: {
-    ...shorthands.padding('3px', '5px', '0px', '5px'),
+    ...shorthands.padding('3px', '6px', '0px', '4px'),
   },
 
   incrementButtonMedium: {
@@ -222,7 +228,7 @@ const useButtonStyles = makeStyles({
   },
 
   decrementButtonSmall: {
-    ...shorthands.padding('0px', '5px', '3px', '5px'),
+    ...shorthands.padding('0px', '6px', '3px', '4px'),
   },
 
   decrementButtonMedium: {
@@ -433,6 +439,7 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
     state.root.className, // Get the classes from useInputStyles_unstable
     spinButtonClassNames.root,
     rootStyles.base,
+    rootStyles[size],
     appearance === 'outline' && rootStyles.outline,
     appearance === 'underline' && rootStyles.underline,
     filled && rootStyles.filled,