diff --git a/.changeset/tame-eggs-taste.md b/.changeset/tame-eggs-taste.md
new file mode 100644
index 00000000000..a88de510a63
--- /dev/null
+++ b/.changeset/tame-eggs-taste.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+chore(Octicon): remove sx
diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png
index d9daf3707d6..43e09aa2cb9 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png
index b8f8b4d3d69..08f9783397a 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-dimmed-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-dimmed-linux.png
index 26a45d5aed9..9d435eef02a 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-dimmed-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-high-contrast-linux.png
index 9d96119bde4..bbdc1538a83 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-high-contrast-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-linux.png
index 434bace6863..b474579ffc6 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png
index 59ade5e753a..bef6cc2df5e 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png
index f5904882203..6a3a36460f5 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-high-contrast-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-high-contrast-linux.png
index ac6d7ff1322..1fa1d1eec30 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-high-contrast-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-linux.png
index f4b489b8ab8..3df8252d576 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-linux.png differ
diff --git a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png
index 2b628f5c3c2..c4dd5261047 100644
Binary files a/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png and b/.playwright/snapshots/components/StateLabel.test.ts-snapshots/StateLabel-Small-light-tritanopia-linux.png differ
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css
index 7b07f7dc17d..8f1eb2584c2 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css
@@ -58,3 +58,7 @@
   color: var(--fgColor-muted);
   margin-left: var(--base-size-4);
 }
+
+.Icon {
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index e8d710f2975..cfd6f9dc042 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -35,11 +35,11 @@ const hoverCard = (
       Former beach cat and champion swimmer. Now your friendly octopus with a normal face.
     </span>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Octicon className={classes.Icon} icon={LocationIcon} />
       <span className={classes.MetaMuted}>Interwebs</span>
     </Stack>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Octicon className={classes.Icon} icon={RepoIcon} />
       <span className={classes.MetaMuted}>Owns this repository</span>
     </Stack>
   </Stack>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
index d2aee9d9598..e227dc685b9 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
@@ -8,3 +8,7 @@
   color: var(--fgColor-muted);
   margin-left: var(--base-size-4);
 }
+
+.Icon {
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 0c11a0d85ec..78c914c4ab4 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -31,11 +31,11 @@ const hoverCard = (
     </Stack>
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Octicon className={classes.Icon} icon={LocationIcon} />
       <Text className={classes.TextSmallMutedWithMargin}>Interwebs</Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
-      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Octicon className={classes.Icon} icon={RepoIcon} />
       <Text className={classes.TextSmallMutedWithMargin}>Owns this repository</Text>
     </Stack>
   </Stack>
diff --git a/packages/react/src/Octicon/Octicon.docs.json b/packages/react/src/Octicon/Octicon.docs.json
index bf36d48e88b..aba5e119e09 100644
--- a/packages/react/src/Octicon/Octicon.docs.json
+++ b/packages/react/src/Octicon/Octicon.docs.json
@@ -35,11 +35,6 @@
       "type": "string",
       "defaultValue": "text-bottom",
       "description": "Sets the `vertical-align` CSS property"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index 537c1d935cc..ea024064a9d 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -10,9 +10,9 @@ export default meta
 
 export const Default = () => <Octicon icon={HeartFillIcon} aria-label="Like" size={32} />
 
-export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, ...args}) => (
-  <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
-)
+export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, icon: _icon, ...args}) => {
+  return <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+}
 
 Playground.args = {
   'aria-label': 'Heart',
@@ -36,28 +36,10 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   as: {
     controls: false,
     table: {
       disable: true,
     },
   },
-  forwardedAs: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }
diff --git a/packages/react/src/Octicon/Octicon.test.tsx b/packages/react/src/Octicon/Octicon.test.tsx
index e3e9c1a3955..950f3adaed4 100644
--- a/packages/react/src/Octicon/Octicon.test.tsx
+++ b/packages/react/src/Octicon/Octicon.test.tsx
@@ -9,11 +9,6 @@ describe('Octicon', () => {
     expect(container.firstChild).toHaveClass('test-class')
   })
 
-  it('should support `sx`', () => {
-    const {container} = render(<Octicon icon={XIcon} sx={{color: 'red'}} />)
-    expect(container.firstChild).toHaveStyle('color: rgb(255, 0, 0)')
-  })
-
   it('should pass along props to the outermost element', () => {
     const {container} = render(<Octicon icon={XIcon} data-testid="test-id" />)
     expect(container.firstChild).toHaveAttribute('data-testid', 'test-id')
diff --git a/packages/react/src/Octicon/Octicon.tsx b/packages/react/src/Octicon/Octicon.tsx
index a0c52454789..83f3dc61441 100644
--- a/packages/react/src/Octicon/Octicon.tsx
+++ b/packages/react/src/Octicon/Octicon.tsx
@@ -1,30 +1,17 @@
 import type {IconProps} from '@primer/octicons-react'
 import React from 'react'
-import styled from 'styled-components'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
-
-type StyledOcticonProps = {icon: React.ElementType; color?: string} & IconProps & SxProp
-
-const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref<SVGSVGElement>) => {
-  const {icon: IconComponent, ...rest} = props
-  return <IconComponent {...rest} ref={ref} />
-})
 
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-const Octicon = styled(Icon).withConfig({
-  shouldForwardProp(prop) {
-    return prop !== 'sx'
-  },
-})<SxProp>`
-  ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
-`
+export type OcticonProps = {icon: React.ElementType; as?: React.ElementType} & IconProps
 
 /**
  * @deprecated Use the icon component directly from `@primer/octicons-react` instead
  */
-export type OcticonProps = ComponentProps<typeof Octicon>
+const Octicon = React.forwardRef((props: OcticonProps, ref: React.Ref<SVGSVGElement>) => {
+  const {icon: IconComponent, ...rest} = props
+  return <IconComponent {...rest} ref={ref} />
+})
+
 export default Octicon
diff --git a/packages/react/src/StateLabel/StateLabel.module.css b/packages/react/src/StateLabel/StateLabel.module.css
index 19f3ae958de..df77767a72b 100644
--- a/packages/react/src/StateLabel/StateLabel.module.css
+++ b/packages/react/src/StateLabel/StateLabel.module.css
@@ -100,3 +100,7 @@
 .Icon {
   margin-right: var(--base-size-4);
 }
+
+.Icon:where([data-variant-small]) {
+  width: 1em;
+}
diff --git a/packages/react/src/StateLabel/StateLabel.tsx b/packages/react/src/StateLabel/StateLabel.tsx
index 2e7590f008c..6e9d753f165 100644
--- a/packages/react/src/StateLabel/StateLabel.tsx
+++ b/packages/react/src/StateLabel/StateLabel.tsx
@@ -53,7 +53,6 @@ export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
   ({children, status, variant: variantProp = 'normal', className, ...rest}, ref) => {
-    const octiconProps = variantProp === 'small' ? {width: '1em'} : {}
     // Open and closed statuses, we don't want to show an icon
     const noIconStatus = status === 'open' || status === 'closed'
 
@@ -66,7 +65,12 @@ const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(
         data-status={status}
       >
         {!noIconStatus && (
-          <Octicon {...octiconProps} icon={octiconMap[status]} aria-label={labelMap[status]} className={classes.Icon} />
+          <Octicon
+            data-variant-small={variantProp === 'small' ? '' : undefined}
+            icon={octiconMap[status]}
+            aria-label={labelMap[status]}
+            className={classes.Icon}
+          />
         )}
         {children}
       </span>
diff --git a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index 2e1730ccb59..118388c281c 100644
--- a/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`StateLabel > renders children 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -41,7 +41,7 @@ exports[`StateLabel > respects the status prop 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -72,7 +72,7 @@ exports[`StateLabel > respects the status prop 2`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-closed sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-closed prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -103,7 +103,7 @@ exports[`StateLabel > respects the status prop 3`] = `
   >
     <svg
       aria-label="Issue, not planned"
-      class="octicon octicon-skip sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-skip prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -131,7 +131,7 @@ exports[`StateLabel > respects the status prop 4`] = `
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-git-merge prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -159,7 +159,7 @@ exports[`StateLabel > respects the status prop 5`] = `
   >
     <svg
       aria-label="Pull request"
-      class="octicon octicon-git-merge-queue sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-git-merge-queue prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -187,7 +187,8 @@ exports[`StateLabel > respects the variant prop 1`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
+      data-variant-small=""
       display="inline-block"
       fill="currentColor"
       focusable="false"
@@ -218,7 +219,7 @@ exports[`StateLabel > respects the variant prop 2`] = `
   >
     <svg
       aria-label="Issue"
-      class="octicon octicon-issue-opened sc-aXZVg fRzBGV prc-StateLabel-Icon-UdR1Y"
+      class="octicon octicon-issue-opened prc-StateLabel-Icon-UdR1Y"
       display="inline-block"
       fill="currentColor"
       focusable="false"
diff --git a/packages/react/src/Timeline/Timeline.features.stories.module.css b/packages/react/src/Timeline/Timeline.features.stories.module.css
index ab892d8d379..8b13298a377 100644
--- a/packages/react/src/Timeline/Timeline.features.stories.module.css
+++ b/packages/react/src/Timeline/Timeline.features.stories.module.css
@@ -11,3 +11,7 @@
 .LinkWithBoldStyle:hover {
   color: var(--fgColor-accent);
 }
+
+.GitMergeIcon {
+  color: var(--fgColor-onEmphasis);
+}
diff --git a/packages/react/src/Timeline/Timeline.features.stories.tsx b/packages/react/src/Timeline/Timeline.features.stories.tsx
index 207fcc0885e..7e3577fea49 100644
--- a/packages/react/src/Timeline/Timeline.features.stories.tsx
+++ b/packages/react/src/Timeline/Timeline.features.stories.tsx
@@ -55,7 +55,7 @@ export const TimelineBreak = () => (
   <Timeline>
     <Timeline.Item>
       <Timeline.Badge className={classes.BadgeWithDoneBackground}>
-        <Octicon icon={GitMergeIcon} color="fg.onEmphasis" aria-label="Merged" />
+        <Octicon icon={GitMergeIcon} className={classes.GitMergeIcon} aria-label="Merged" />
       </Timeline.Badge>
       <Timeline.Body>This is a message</Timeline.Body>
     </Timeline.Item>
diff --git a/packages/react/src/TreeView/TreeView.features.stories.module.css b/packages/react/src/TreeView/TreeView.features.stories.module.css
index 7253a474364..4c4763355bd 100644
--- a/packages/react/src/TreeView/TreeView.features.stories.module.css
+++ b/packages/react/src/TreeView/TreeView.features.stories.module.css
@@ -16,3 +16,15 @@
   max-height: 50vh;
   overflow: auto;
 }
+
+.SuccessIcon {
+  color: var(--fgColor-success);
+}
+
+.AttentionIcon {
+  color: var(--fgColor-attention);
+}
+
+.DangerIcon {
+  color: var(--fgColor-danger);
+}
diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx
index 684d8eebcf7..ff027a604a0 100644
--- a/packages/react/src/TreeView/TreeView.features.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.features.stories.tsx
@@ -122,7 +122,7 @@ export const FilesChanged: StoryFn = () => {
               </TreeView.LeadingVisual>
               Avatar.tsx
               <TreeView.TrailingVisual label="added">
-                <Octicon icon={DiffAddedIcon} color="success.fg" />
+                <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
               </TreeView.TrailingVisual>
             </TreeView.Item>
             <TreeView.Item id="src/Button" defaultExpanded>
@@ -137,7 +137,7 @@ export const FilesChanged: StoryFn = () => {
                   </TreeView.LeadingVisual>
                   Button.tsx
                   <TreeView.TrailingVisual label="modified">
-                    <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+                    <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
                   </TreeView.TrailingVisual>
                 </TreeView.Item>
                 <TreeView.Item id="src/Button/Button.test.tsx">
@@ -146,7 +146,7 @@ export const FilesChanged: StoryFn = () => {
                   </TreeView.LeadingVisual>
                   Button.test.tsx
                   <TreeView.TrailingVisual label="modified">
-                    <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+                    <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
                   </TreeView.TrailingVisual>
                 </TreeView.Item>
               </TreeView.SubTree>
@@ -157,7 +157,7 @@ export const FilesChanged: StoryFn = () => {
               </TreeView.LeadingVisual>
               ReallyLongFileNameThatShouldBeTruncated.tsx
               <TreeView.TrailingVisual label="modified">
-                <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+                <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
               </TreeView.TrailingVisual>
             </TreeView.Item>
           </TreeView.SubTree>
@@ -183,7 +183,7 @@ export const FilesChanged: StoryFn = () => {
               </TreeView.LeadingVisual>
               favicon.ico
               <TreeView.TrailingVisual label="removed">
-                <Octicon icon={DiffRemovedIcon} color="danger.fg" />
+                <Octicon icon={DiffRemovedIcon} className={classes.DangerIcon} />
               </TreeView.TrailingVisual>
             </TreeView.Item>
           </TreeView.SubTree>
@@ -967,7 +967,7 @@ export const WithoutIndentation: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
@@ -976,7 +976,7 @@ export const WithoutIndentation: StoryFn = () => (
             </TreeView.LeadingVisual>
             Button.tsx
             <TreeView.TrailingVisual label="Modified">
-              <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+              <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -987,7 +987,7 @@ export const WithoutIndentation: StoryFn = () => (
         </TreeView.LeadingVisual>
         package.json
         <TreeView.TrailingVisual label="Modified">
-          <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+          <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>
@@ -1010,7 +1010,7 @@ export const MultilineItems: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1021,7 +1021,7 @@ export const MultilineItems: StoryFn = () => (
         </TreeView.LeadingVisual>
         this is a medium directory name that we wrap over 2 lines to demonstrate alignment
         <TreeView.TrailingVisual label="Added">
-          <Octicon icon={DiffAddedIcon} color="success.fg" />
+          <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
         </TreeView.TrailingVisual>
         <TreeView.SubTree>
           <TreeView.Item id="src/Avatar.tsx">
@@ -1030,7 +1030,7 @@ export const MultilineItems: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1048,7 +1048,7 @@ export const MultilineItems: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -1065,7 +1065,7 @@ export const MultilineItems: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
diff --git a/packages/react/src/TreeView/TreeView.stories.tsx b/packages/react/src/TreeView/TreeView.stories.tsx
index c4822e02bc1..6ea15b26b20 100644
--- a/packages/react/src/TreeView/TreeView.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.stories.tsx
@@ -33,7 +33,7 @@ export const Default: StoryFn = () => (
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual label="Added">
-              <Octicon icon={DiffAddedIcon} color="success.fg" />
+              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
@@ -42,7 +42,7 @@ export const Default: StoryFn = () => (
             </TreeView.LeadingVisual>
             Button.tsx
             <TreeView.TrailingVisual label="Modified">
-              <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+              <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -53,7 +53,7 @@ export const Default: StoryFn = () => (
         </TreeView.LeadingVisual>
         package.json
         <TreeView.TrailingVisual label="Modified">
-          <Octicon icon={DiffModifiedIcon} color="attention.fg" />
+          <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>
diff --git a/packages/react/src/TreeView/TreeView.stress.dev.stories.tsx b/packages/react/src/TreeView/TreeView.stress.dev.stories.tsx
index aed5ba6396f..aa2fa11718c 100644
--- a/packages/react/src/TreeView/TreeView.stress.dev.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.stress.dev.stories.tsx
@@ -5,6 +5,8 @@ import {TreeView} from './TreeView'
 import {FileIcon, DiffAddedIcon} from '@primer/octicons-react'
 import Octicon from '../Octicon'
 
+import classes from './Treeview.stress.dev.stories.module.css'
+
 export default {
   title: 'StressTests/Components/TreeView',
   component: TreeView,
@@ -38,7 +40,7 @@ export const CurrentUpdate = () => {
                   </TreeView.LeadingVisual>
                   {file.name}
                   <TreeView.TrailingVisual label="Added">
-                    <Octicon icon={DiffAddedIcon} color="success.fg" />
+                    <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />
                   </TreeView.TrailingVisual>
                 </TreeView.Item>
               ))}
diff --git a/packages/react/src/TreeView/TreeViewStories.module.css b/packages/react/src/TreeView/TreeViewStories.module.css
index 2530ce3190c..6672d4ab1c2 100644
--- a/packages/react/src/TreeView/TreeViewStories.module.css
+++ b/packages/react/src/TreeView/TreeViewStories.module.css
@@ -10,3 +10,19 @@
 .DraggableItemContainer .TreeViewItem:focus .TreeViewLeadingAction {
   visibility: visible;
 }
+
+.SuccessIcon {
+  color: var(--fgColor-success);
+}
+
+.AttentionIcon {
+  color: var(--fgColor-attention);
+}
+
+.DoneIcon {
+  color: var(--fgColor-done);
+}
+
+.OpenIcon {
+  color: var(--fgColor-open);
+}
diff --git a/packages/react/src/TreeView/TreeViewWithLeadingAction.stories.tsx b/packages/react/src/TreeView/TreeViewWithLeadingAction.stories.tsx
index d833c2251cb..c32ff82d035 100644
--- a/packages/react/src/TreeView/TreeViewWithLeadingAction.stories.tsx
+++ b/packages/react/src/TreeView/TreeViewWithLeadingAction.stories.tsx
@@ -43,7 +43,7 @@ export const LeadingAction: StoryFn = () => {
             <IconButton icon={GrabberIcon} aria-label="Reorder item 1" variant="invisible" />
           </TreeView.LeadingAction>
           <TreeView.LeadingVisual label="Issue closed">
-            <Octicon icon={IssueClosedIcon} sx={{color: 'done.fg'}} />
+            <Octicon icon={IssueClosedIcon} className={classes.DoneIcon} />
           </TreeView.LeadingVisual>
           Item 1
         </TreeView.Item>
@@ -52,19 +52,19 @@ export const LeadingAction: StoryFn = () => {
             <IconButton icon={GrabberIcon} aria-label="Reorder item 2" variant="invisible" />
           </TreeView.LeadingAction>
           <TreeView.LeadingVisual label="Issue opened">
-            <Octicon icon={IssueOpenedIcon} sx={{color: 'open.fg'}} />
+            <Octicon icon={IssueOpenedIcon} className={classes.OpenIcon} />
           </TreeView.LeadingVisual>
           Item 2
           <TreeView.SubTree>
             <TreeView.Item id="item-2-sub-task-1">
               <TreeView.LeadingVisual label="Issue opened">
-                <Octicon icon={IssueOpenedIcon} sx={{color: 'open.fg'}} />
+                <Octicon icon={IssueOpenedIcon} className={classes.OpenIcon} />
               </TreeView.LeadingVisual>
               sub task 1
             </TreeView.Item>
             <TreeView.Item id="item-2-sub-task-2">
               <TreeView.LeadingVisual label="Issue opened">
-                <Octicon icon={IssueOpenedIcon} sx={{color: 'open.fg'}} />
+                <Octicon icon={IssueOpenedIcon} className={classes.OpenIcon} />
               </TreeView.LeadingVisual>
               sub task 2
             </TreeView.Item>
@@ -75,7 +75,7 @@ export const LeadingAction: StoryFn = () => {
             <IconButton icon={GrabberIcon} aria-label="Reorder item 3" variant="invisible" />
           </TreeView.LeadingAction>
           <TreeView.LeadingVisual label="Issue opened">
-            <Octicon icon={IssueOpenedIcon} sx={{color: 'open.fg'}} />
+            <Octicon icon={IssueOpenedIcon} className={classes.OpenIcon} />
           </TreeView.LeadingVisual>
           Item 3
         </TreeView.Item>
diff --git a/packages/react/src/TreeView/Treeview.stress.dev.stories.module.css b/packages/react/src/TreeView/Treeview.stress.dev.stories.module.css
new file mode 100644
index 00000000000..b3f6d8290c4
--- /dev/null
+++ b/packages/react/src/TreeView/Treeview.stress.dev.stories.module.css
@@ -0,0 +1,3 @@
+.SuccessIcon {
+  color: var(--fgColor-success);
+}
diff --git a/packages/react/src/stories/deprecated/SideNav.dev.stories.module.css b/packages/react/src/stories/deprecated/SideNav.dev.stories.module.css
new file mode 100644
index 00000000000..b3f6d8290c4
--- /dev/null
+++ b/packages/react/src/stories/deprecated/SideNav.dev.stories.module.css
@@ -0,0 +1,3 @@
+.SuccessIcon {
+  color: var(--fgColor-success);
+}
diff --git a/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx b/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx
index 0c6b92b9fb3..bb7cd478b6a 100644
--- a/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx
+++ b/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx
@@ -4,6 +4,8 @@ import type {ComponentProps} from '../../utils/types'
 import Octicon from '../../Octicon'
 import {DotIcon, MailIcon, PersonIcon, SmileyIcon, ZapIcon} from '@primer/octicons-react'
 
+import classes from './SideNav.dev.stories.module.css'
+
 export default {
   title: 'Deprecated/Components/SideNav/Dev',
   component: SideNav,
@@ -41,7 +43,7 @@ export const FullVariant = () => (
     </SideNav.Link>
     <SideNav.Link href="#url" variant="full" selected>
       <Text>With a status icon</Text>
-      <Octicon size={16} icon={DotIcon} color="success.fg" />
+      <Octicon size={16} icon={DotIcon} className={classes.SuccessIcon} />
     </SideNav.Link>
     <SideNav.Link href="#url" variant="full">
       <Text>With a label</Text>
diff --git a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
index 4e7c24af6ab..dceb28f4228 100644
--- a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
@@ -17,7 +17,7 @@ describe('@primer/react/deprecated', () => {
   })
 
   test('Octicon supports `sx` prop', () => {
-    render(<Octicon data-testid="component" icon={props => <svg {...props} />} sx={{background: 'red'}} />)
+    render(<Octicon data-testid="component" as="button" icon={props => <svg {...props} />} sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
diff --git a/packages/styled-react/src/components/Octicon.tsx b/packages/styled-react/src/components/Octicon.tsx
new file mode 100644
index 00000000000..3a7422824cd
--- /dev/null
+++ b/packages/styled-react/src/components/Octicon.tsx
@@ -0,0 +1,27 @@
+import {Octicon as PrimerOcticon, type OcticonProps as PrimerOcticonProps} from '@primer/react/deprecated'
+import styled from 'styled-components'
+import {type SxProp, sx} from '../sx'
+import {forwardRef} from 'react'
+
+/**
+ * @deprecated Use the icon component directly from `@primer/octicons-react` instead
+ */
+export type OcticonProps = PrimerOcticonProps & SxProp & {color?: string}
+
+/**
+ * @deprecated Use the icon component directly from `@primer/octicons-react` instead
+ */
+const StyledOcticon = styled(PrimerOcticon).withConfig<OcticonProps>({
+  shouldForwardProp(prop) {
+    return prop !== 'sx'
+  },
+})`
+  ${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
+`
+
+const Octicon = forwardRef(({as, ...props}: OcticonProps, ref) => {
+  return <StyledOcticon {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+})
+
+export default Octicon
+export {Octicon}
diff --git a/packages/styled-react/src/deprecated.tsx b/packages/styled-react/src/deprecated.tsx
index 2c91cbbd61f..9c2b14703fa 100644
--- a/packages/styled-react/src/deprecated.tsx
+++ b/packages/styled-react/src/deprecated.tsx
@@ -1,4 +1,4 @@
 export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/TabNav'
 export {Dialog, type DialogProps, type DialogHeaderProps} from './components/DialogV1'
-export {Octicon} from '@primer/react/deprecated'
+export {Octicon, type OcticonProps} from './components/Octicon'
 export {DeprecatedTooltip as Tooltip, type DeprecatedTooltipProps as TooltipProps} from './components/Tooltip'