diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..7fb534b9cb8
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..cb9ee55c93a
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..2d1d338b007
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-linux.png
new file mode 100644
index 00000000000..a0035872e15
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7fb534b9cb8
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-colorblind-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..91167ed0564
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..393868f497f
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-linux.png
new file mode 100644
index 00000000000..a315015b7dc
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..91167ed0564
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-colorblind-linux.png
new file mode 100644
index 00000000000..7fb534b9cb8
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-dimmed-linux.png
new file mode 100644
index 00000000000..cb9ee55c93a
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..2d1d338b007
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-linux.png
new file mode 100644
index 00000000000..a0035872e15
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..7fb534b9cb8
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-colorblind-linux.png
new file mode 100644
index 00000000000..91167ed0564
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-high-contrast-linux.png
new file mode 100644
index 00000000000..393868f497f
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-linux.png
new file mode 100644
index 00000000000..a315015b7dc
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-linux.png differ
diff --git a/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-tritanopia-linux.png
new file mode 100644
index 00000000000..91167ed0564
Binary files /dev/null and b/.playwright/snapshots/components/CircleOcticon.test.ts-snapshots/CircleOcticon-Playground-light-tritanopia-linux.png differ
diff --git a/docs/content/CircleOcticon.mdx b/docs/content/CircleOcticon.mdx
index c9be05fa20b..0f10c02d590 100644
--- a/docs/content/CircleOcticon.mdx
+++ b/docs/content/CircleOcticon.mdx
@@ -4,7 +4,7 @@ title: CircleOcticon
 status: Alpha
 ---
 
-import data from '../../src/CircleOcticon.docs.json'
+import data from '../../src/CircleOcticon/CircleOcticon.docs.json'
 
 CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.
 
diff --git a/e2e/components/CircleOcticon.test.ts b/e2e/components/CircleOcticon.test.ts
new file mode 100644
index 00000000000..6109f6105b9
--- /dev/null
+++ b/e2e/components/CircleOcticon.test.ts
@@ -0,0 +1,61 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('CircleOcticon', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-circleocticon--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`CircleOcticon.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-circleocticon--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-circleocticon--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`CircleOcticon.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-circleocticon--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})
diff --git a/generated/components.json b/generated/components.json
index 6d3a67ca306..cbfbe37d7da 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -19,30 +19,6 @@
       ],
       "subcomponents": []
     },
-    "circle_octicon": {
-      "id": "circle_octicon",
-      "name": "CircleOcticon",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "icon",
-          "type": "Octicon"
-        },
-        {
-          "name": "size",
-          "defaultValue": "32",
-          "type": "number",
-          "description": "Set the width and height of the icon in pixels."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "dialog": {
       "id": "dialog",
       "name": "Dialog",
@@ -1746,6 +1722,35 @@
         }
       ]
     },
+    "circle_octicon": {
+      "id": "circle_octicon",
+      "name": "CircleOcticon",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-circleocticon--default",
+          "code": "() => (\n  <CircleOcticon\n    icon={CheckIcon}\n    size={32}\n    sx={{\n      backgroundColor: 'success.fg',\n      color: 'fg.onEmphasis',\n    }}\n  />\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "icon",
+          "type": "Octicon"
+        },
+        {
+          "name": "size",
+          "defaultValue": "32",
+          "type": "number",
+          "description": "Set the width and height of the icon in pixels."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "counter_label": {
       "id": "counter_label",
       "name": "CounterLabel",
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 76ff402cb72..d1176e5fd36 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -310,6 +310,21 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'CircleOcticon',
+    {
+      stories: [
+        {
+          id: 'components-circleocticon--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-circleocticon--playground',
+          name: 'Playground',
+        },
+      ],
+    },
+  ],
   [
     'CircleBadge',
     {
diff --git a/src/CircleOcticon.docs.json b/src/CircleOcticon/CircleOcticon.docs.json
similarity index 100%
rename from src/CircleOcticon.docs.json
rename to src/CircleOcticon/CircleOcticon.docs.json
diff --git a/src/CircleOcticon/CircleOcticon.stories.tsx b/src/CircleOcticon/CircleOcticon.stories.tsx
new file mode 100644
index 00000000000..4e3112d195f
--- /dev/null
+++ b/src/CircleOcticon/CircleOcticon.stories.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import {Meta, ComponentStory} from '@storybook/react'
+import CircleOcticon from './CircleOcticon'
+import {CheckIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/CircleOcticon',
+  component: CircleOcticon,
+} as Meta<typeof CircleOcticon>
+
+export const Default = () => (
+  <CircleOcticon icon={CheckIcon} size={32} sx={{backgroundColor: 'success.fg', color: 'fg.onEmphasis'}} />
+)
+
+export const Playground: ComponentStory<typeof CircleOcticon> = args => <CircleOcticon {...args} />
+
+Playground.args = {
+  icon: CheckIcon,
+  size: 32,
+  sx: {backgroundColor: 'success.fg', color: 'fg.onEmphasis'},
+}
+
+Playground.argTypes = {
+  icon: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  size: {
+    controls: {
+      type: 'number',
+    },
+  },
+  sx: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  as: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  ref: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+  theme: {
+    controls: false,
+    table: {
+      disable: true,
+    },
+  },
+}
diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon/CircleOcticon.tsx
similarity index 95%
rename from src/CircleOcticon.tsx
rename to src/CircleOcticon/CircleOcticon.tsx
index 4e4f10f516c..de1ec11aae7 100644
--- a/src/CircleOcticon.tsx
+++ b/src/CircleOcticon/CircleOcticon.tsx
@@ -1,6 +1,6 @@
 import {IconProps} from '@primer/octicons-react'
 import React from 'react'
-import Box, {BoxProps} from './Box'
+import Box, {BoxProps} from '../Box'
 
 export type CircleOcticonProps = {
   as?: React.ElementType
diff --git a/src/CircleOcticon/index.ts b/src/CircleOcticon/index.ts
new file mode 100644
index 00000000000..493e588157e
--- /dev/null
+++ b/src/CircleOcticon/index.ts
@@ -0,0 +1 @@
+export {default, CircleOcticonProps} from './CircleOcticon'