diff --git a/packages/docsite/stories/Icons/ColorVariants/ColorVariants.stories.tsx b/packages/docsite/stories/Icons/ColorVariants/ColorVariants.stories.tsx
new file mode 100644
index 0000000000..cc51263ad0
--- /dev/null
+++ b/packages/docsite/stories/Icons/ColorVariants/ColorVariants.stories.tsx
@@ -0,0 +1,50 @@
+import { CalendarColor } from '@fluentui/react-icons';
+import { Body1Stronger, makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import * as React from 'react';
+
+const useClasses = makeStyles({
+  root: {
+    display: 'flex',
+    ...shorthands.gap('32px'),
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('8px'),
+    ...shorthands.padding('12px'),
+    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke2),
+    borderRadius: tokens.borderRadiusMedium,
+  },
+  icons: {
+    fontSize: '48px',
+  },
+  // Hiding one instance with display:none triggers the gradient ID collision
+  // for any sibling that shares the same (unscoped) IDs.
+  hidden: {
+    display: 'none',
+  },
+});
+
+export const ColorIdPrefix = () => {
+  const classes = useClasses();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.column}>
+        <Body1Stronger>❌ Without idPrefix</Body1Stronger>
+        <div className={classes.icons}>
+          <CalendarColor className={classes.hidden} aria-hidden />
+          <CalendarColor aria-label="Calendar without idPrefix" />
+        </div>
+      </div>
+
+      <div className={classes.column}>
+        <Body1Stronger>✅ With idPrefix</Body1Stronger>
+        <div className={classes.icons}>
+          <CalendarColor idPrefix="cal-a-" className={classes.hidden} aria-hidden />
+          <CalendarColor idPrefix="cal-b-" aria-label="Calendar with idPrefix" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/docsite/stories/Icons/ColorVariants/index.stories.tsx b/packages/docsite/stories/Icons/ColorVariants/index.stories.tsx
index 9849d35862..86528ed513 100644
--- a/packages/docsite/stories/Icons/ColorVariants/index.stories.tsx
+++ b/packages/docsite/stories/Icons/ColorVariants/index.stories.tsx
@@ -1,56 +1,9 @@
 import { CalendarColor } from '@fluentui/react-icons';
-import { Body1Stronger, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { Controls, Description, Primary, Title } from '@storybook/addon-docs/blocks';
-import * as React from 'react';
 
 import descriptionMd from './ColorVariantsDescription.md';
 
-const useClasses = makeStyles({
-  root: {
-    display: 'flex',
-    ...shorthands.gap('32px'),
-  },
-  column: {
-    display: 'flex',
-    flexDirection: 'column',
-    ...shorthands.gap('8px'),
-    ...shorthands.padding('12px'),
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke2),
-    borderRadius: tokens.borderRadiusMedium,
-  },
-  icons: {
-    fontSize: '48px',
-  },
-  // Hiding one instance with display:none triggers the gradient ID collision
-  // for any sibling that shares the same (unscoped) IDs.
-  hidden: {
-    display: 'none',
-  },
-});
-
-export const ColorIdPrefix = () => {
-  const classes = useClasses();
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.column}>
-        <Body1Stronger>❌ Without idPrefix</Body1Stronger>
-        <div className={classes.icons}>
-          <CalendarColor className={classes.hidden} aria-hidden />
-          <CalendarColor aria-label="Calendar without idPrefix" />
-        </div>
-      </div>
-
-      <div className={classes.column}>
-        <Body1Stronger>✅ With idPrefix</Body1Stronger>
-        <div className={classes.icons}>
-          <CalendarColor idPrefix="cal-a-" className={classes.hidden} aria-hidden />
-          <CalendarColor idPrefix="cal-b-" aria-label="Calendar with idPrefix" />
-        </div>
-      </div>
-    </div>
-  );
-};
+export { ColorIdPrefix } from './ColorVariants.stories';
 
 export default {
   title: 'Icons/Color Variants',