diff --git a/.storybook/react-icons-font.css b/.storybook/react-icons-font.css
new file mode 100644
index 0000000000000..6d1fc2257066a
--- /dev/null
+++ b/.storybook/react-icons-font.css
@@ -0,0 +1,6 @@
+/* Prevent inherited text weight from synthetically bolding font icons.
+ * TODO: Remove when https://github.com/microsoft/fluentui-system-icons/issues/1235 is fixed.
+ */
+:where([data-fui-icon]) {
+  font-weight: normal;
+}
diff --git a/.storybook/react-icons-webpack.js b/.storybook/react-icons-webpack.js
new file mode 100644
index 0000000000000..5826ae517e68c
--- /dev/null
+++ b/.storybook/react-icons-webpack.js
@@ -0,0 +1,108 @@
+// @ts-check
+
+const FluentUIReactIconsFontSubsettingPlugin = require('@fluentui/react-icons-font-subsetting-webpack-plugin').default;
+
+const FONT_ICON_VARIANT = 'fonts';
+const iconLoader = require.resolve('@fluentui/react-icons-atomic-webpack-loader');
+const headlessBaseStyles = require.resolve('@fluentui/react-icons/headless/styles.css');
+const headlessFontStyles = require.resolve('@fluentui/react-icons/headless/fonts/styles.css');
+const fontIconStyles = require.resolve('./react-icons-font.css');
+
+/** @typedef {string | string[] | import('webpack').EntryObject} ResolvedEntry */
+
+/**
+ * @param {ResolvedEntry} entry
+ * @param {string[]} imports
+ * @returns {ResolvedEntry}
+ */
+function prependEntryImports(entry, imports) {
+  if (typeof entry === 'string') {
+    return [...imports, entry];
+  }
+
+  if (Array.isArray(entry)) {
+    return [...imports, ...entry];
+  }
+
+  if (entry && typeof entry === 'object') {
+    return Object.fromEntries(
+      Object.entries(entry).map(([name, value]) => {
+        if (typeof value === 'string' || Array.isArray(value)) {
+          return [name, prependEntryImports(value, imports)];
+        }
+
+        if (value && typeof value === 'object') {
+          return [name, { ...value, import: prependEntryImports(value.import ?? [], imports) }];
+        }
+
+        return [name, value];
+      }),
+    );
+  }
+
+  return entry;
+}
+
+/**
+ * Configures atomic Fluent icon imports for Storybook.
+ * Set FLUENTUI_ICON_VARIANT=fonts to use subsetted font icons; SVG atoms are the default.
+ *
+ * @see https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons-atomic-webpack-loader/README.md
+ * @see https://github.com/microsoft/fluentui-system-icons/tree/main/packages/react-icons-font-subsetting-webpack-plugin
+ *
+ * @param {{ config: import('webpack').Configuration; headless?: boolean }} options
+ */
+function configureReactIcons(options) {
+  const { config, headless = false } = options;
+  const useFontIcons = process.env.FLUENTUI_ICON_VARIANT === FONT_ICON_VARIANT;
+
+  config.module ??= {};
+  config.module.rules ??= [];
+  config.module.rules.push({
+    test: /\.[mc]?[jt]sx?$/,
+    enforce: 'pre',
+    use: [
+      {
+        loader: iconLoader,
+        options: {
+          iconVariant: useFontIcons ? 'fonts' : 'svg',
+          fallbackVariant: 'svg',
+          headless,
+        },
+      },
+    ],
+  });
+
+  if (useFontIcons) {
+    config.module.rules.push({
+      test: /\.(ttf|woff2?)$/,
+      type: 'asset',
+    });
+    config.plugins ??= [];
+    config.plugins.push(new FluentUIReactIconsFontSubsettingPlugin());
+  }
+
+  const styleImports = [];
+  if (headless) {
+    styleImports.push(headlessBaseStyles);
+  }
+  if (useFontIcons) {
+    if (headless) {
+      styleImports.push(headlessFontStyles);
+    }
+    styleImports.push(fontIconStyles);
+  }
+
+  if (styleImports.length > 0) {
+    const originalEntry = config.entry;
+
+    config.entry = async () => {
+      const entry = typeof originalEntry === 'function' ? await originalEntry() : originalEntry;
+      return prependEntryImports(entry ?? [], styleImports);
+    };
+  }
+
+  return config;
+}
+
+module.exports = { configureReactIcons };
diff --git a/apps/public-docsite-v9-headless/.storybook/main.js b/apps/public-docsite-v9-headless/.storybook/main.js
index 9c140774e3c21..565aa6fc0e5e4 100644
--- a/apps/public-docsite-v9-headless/.storybook/main.js
+++ b/apps/public-docsite-v9-headless/.storybook/main.js
@@ -1,5 +1,6 @@
 const headlessMain = require('../../../packages/react-components/react-headless-components-preview/stories/.storybook/main');
 const { registerRules, rules } = require('@fluentui/scripts-storybook');
+const { configureReactIcons } = require('../../../.storybook/react-icons-webpack');
 
 module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...headlessMain,
@@ -18,6 +19,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     if (process.env.REACT_COMPILER) {
       registerRules({ rules: rules.reactCompilerRule, config: localConfig });
     }
+    configureReactIcons({ config: localConfig, headless: true });
 
     return localConfig;
   },
diff --git a/apps/public-docsite-v9-headless/project.json b/apps/public-docsite-v9-headless/project.json
index d48c59b15dd70..acad3d84f405c 100644
--- a/apps/public-docsite-v9-headless/project.json
+++ b/apps/public-docsite-v9-headless/project.json
@@ -6,6 +6,12 @@
   "tags": ["platform:web", "vNext"],
   "targets": {
     "build-storybook": {
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "dependsOn": [
         {
           "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
@@ -20,7 +26,12 @@
           "target": "build"
         }
       ],
-      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"]
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ]
     }
   }
 }
diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js
index b609d7679479f..2bb2d57416d09 100644
--- a/apps/public-docsite-v9/.storybook/main.js
+++ b/apps/public-docsite-v9/.storybook/main.js
@@ -2,6 +2,7 @@ const path = require('path');
 const { getPackageStoriesGlob, registerTsPaths, rules, registerRules } = require('@fluentui/scripts-storybook');
 
 const rootMain = require('../../../.storybook/main');
+const { configureReactIcons } = require('../../../.storybook/react-icons-webpack');
 
 const tsConfigAllPath = path.join(__dirname, '../../../tsconfig.base.all.json');
 
@@ -59,6 +60,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
       rules: [rules.scssRule, ...(process.env.REACT_COMPILER ? rules.reactCompilerRule : [])],
       config: localConfig,
     });
+    configureReactIcons({ config: localConfig });
 
     return localConfig;
   },
diff --git a/apps/public-docsite-v9/project.json b/apps/public-docsite-v9/project.json
index 5faa045dec2c2..e7fa69677ec68 100644
--- a/apps/public-docsite-v9/project.json
+++ b/apps/public-docsite-v9/project.json
@@ -6,6 +6,12 @@
   "tags": ["platform:web", "vNext"],
   "targets": {
     "build-storybook": {
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "dependsOn": [
         {
           "projects": [
@@ -21,7 +27,12 @@
       ]
     },
     "build-storybook:docsite": {
-      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"],
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        { "env": "FLUENTUI_ICON_VARIANT" }
+      ],
       "outputs": ["{projectRoot}/dist/react"],
       "executor": "nx:noop",
       "dependsOn": [
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx
index 5c9dfe0b85de0..722dd24239975 100644
--- a/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Button, Tooltip } from '@fluentui/react-components';
 
-import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '@fluentui/react-icons';
+import { TextItalicRegular, TextUnderlineRegular, TextBoldRegular } from '@fluentui/react-icons';
 
 import { Scenario } from './utils';
 
@@ -12,15 +12,15 @@ export const ButtonsWithTooltip: React.FunctionComponent = () => {
       <h1>Tooltip variants</h1>
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip relationship="label" content="Make text bold">
-        <Button icon={<TextBold24Regular />} />
+        <Button icon={<TextBoldRegular />} />
       </Tooltip>
 
       <Tooltip relationship="label" content="Make text underline">
-        <Button icon={<TextUnderline24Regular />} />
+        <Button icon={<TextUnderlineRegular />} />
       </Tooltip>
 
       <Tooltip relationship="label" content="Make text italic">
-        <Button icon={<TextItalic24Regular />} />
+        <Button icon={<TextItalicRegular />} />
       </Tooltip>
 
       <h2>Tooltip as an additional button description</h2>
diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/Examples.stories.tsx b/apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/Examples.stories.tsx
index 31d1b45cceb31..92458532f5474 100644
--- a/apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/Examples.stories.tsx
+++ b/apps/public-docsite-v9/src/Concepts/Accessibility/LabellingExamples/Examples.stories.tsx
@@ -15,7 +15,7 @@ import {
   Divider,
   makeStyles,
 } from '@fluentui/react-components';
-import { Send24Regular, Mic24Regular, PeopleRegular, PersonDelete24Regular } from '@fluentui/react-icons';
+import { SendRegular, MicRegular, PeopleRegular, PersonDeleteRegular } from '@fluentui/react-icons';
 import { FluentWapper } from './FluentUiWrapper.stories';
 
 const useStyles = makeStyles({
@@ -33,23 +33,23 @@ const useStyles = makeStyles({
 
 export const ActionAvoidBad = () => (
   <FluentWapper>
-    <Button aria-label="Click here to send message " size="small" icon={<Send24Regular />} />
+    <Button aria-label="Click here to send message " size="small" icon={<SendRegular />} />
   </FluentWapper>
 );
 export const ActionAvoidGood = () => (
   <FluentWapper>
-    <Button aria-label="Send message" size="small" icon={<Send24Regular />} />
+    <Button aria-label="Send message" size="small" icon={<SendRegular />} />
   </FluentWapper>
 );
 
 export const ComponentTypeAvoidBad = () => (
   <FluentWapper>
-    <Button aria-label="Mute microphone button" size="small" icon={<Mic24Regular />} />
+    <Button aria-label="Mute microphone button" size="small" icon={<MicRegular />} />
   </FluentWapper>
 );
 export const ComponentTypeAvoidGood = () => (
   <FluentWapper>
-    <Button aria-label="Mute microphone" size="small" icon={<Mic24Regular />} />
+    <Button aria-label="Mute microphone" size="small" icon={<MicRegular />} />
   </FluentWapper>
 );
 
@@ -205,7 +205,7 @@ export const ReuseVisibleTextBad = () => {
       <div className={styles.visibleTextContainer}>
         <Avatar />
         <span>Robert Tolbert</span>
-        <Button icon={<PersonDelete24Regular />} aria-label="Remove Robert Tolbert" />
+        <Button icon={<PersonDeleteRegular />} aria-label="Remove Robert Tolbert" />
       </div>
     </FluentWapper>
   );
@@ -220,7 +220,7 @@ export const ReuseVisibleTextGood = () => {
         <Avatar />
         <span id="userNameId">Robert Tolbert</span>
         <Button
-          icon={<PersonDelete24Regular />}
+          icon={<PersonDeleteRegular />}
           aria-label="Remove"
           id="removeButtonId"
           aria-labelledby="removeButtonId userNameId"
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.mdx
index efa0c4b174136..4e8f00bdd48ec 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.mdx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.mdx
@@ -61,7 +61,7 @@ After:
 ```tsx
 import * as React from 'react';
 import { Button, Card, CardFooter, makeStyles, shorthands } from '@fluentui/react-components';
-import { Pin20Regular, Share20Regular, ServiceBell20Regular, Eye20Regular } from '@fluentui/react-icons';
+import { PinRegular, ShareRegular, ServiceBellRegular, EyeRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   card: {
@@ -97,16 +97,16 @@ export const Default = () => {
         action={
           views > 0 ? (
             <span className={styles.actions}>
-              <Eye20Regular aria-hidden />
+              <EyeRegular aria-hidden />
               <span>{views}</span>
               <span className={styles.visuallyHidden}> views</span>
             </span>
           ) : undefined
         }
       >
-        <Button appearance="transparent" icon={<Share20Regular />} aria-label="Share document" />
-        <Button appearance="transparent" icon={<Pin20Regular />} aria-label="Pin document" />
-        <Button appearance="transparent" icon={<ServiceBell20Regular />} aria-label="Manage document notifications" />
+        <Button appearance="transparent" icon={<ShareRegular />} aria-label="Share document" />
+        <Button appearance="transparent" icon={<PinRegular />} aria-label="Pin document" />
+        <Button appearance="transparent" icon={<ServiceBellRegular />} aria-label="Manage document notifications" />
       </CardFooter>
     </Card>
   );
diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx
index a681106dcc155..08febcb7a19e5 100644
--- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx
+++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.mdx
@@ -113,7 +113,7 @@ An equivalent `RadioGroup` implementation:
 import * as React from 'react';
 import { makeStyles, shorthands, Label, Radio, RadioGroup } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
-import { AnimalCat24Regular } from '@fluentui/react-icons';
+import { AnimalCatRegular } from '@fluentui/react-icons';
 
 const useIconOptionStyles = makeStyles({
   root: {
@@ -155,7 +155,7 @@ const RadioGroupCustomOptionExample = () => {
               className: labelStyles.root,
               children: (
                 <>
-                  A <AnimalCat24Regular />
+                  A <AnimalCatRegular />
                 </>
               ),
             }}
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
index f9439b64fc540..5b64cde8dee09 100644
--- a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
@@ -1,14 +1,9 @@
 import * as React from 'react';
 import { Steps } from 'storywright';
-import {
-  Breadcrumb,
-  BreadcrumbButton,
-  BreadcrumbProps,
-  BreadcrumbItem,
-  BreadcrumbDivider,
-} from '@fluentui/react-breadcrumb';
-import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
-const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
+import type { BreadcrumbProps } from '@fluentui/react-breadcrumb';
+import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export const steps = new Steps()
   .snapshot('default')
diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
index effa3713244ce..c91bc65c57751 100644
--- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Steps, type StoryParameters } from 'storywright';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
-import { MoreHorizontal24Filled, MoreHorizontal20Filled } from '@fluentui/react-icons';
+import { MoreHorizontalFilled } from '@fluentui/react-icons';
 import { Body1, Caption1, Text } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
 import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent, appLogoUrl } from './utils';
@@ -137,7 +137,7 @@ export const Orientation = () => {
           <CardHeader
             header={<Text weight="semibold">App Name</Text>}
             description={<Caption1 className={styles.caption}>Developer</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Filled />} aria-label="More options" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalFilled />} aria-label="More options" />}
           />
         </Card>
       </div>
@@ -157,7 +157,7 @@ export const _CardHeader = () => (
         </Body1>
       }
       description={<Caption1>Developer</Caption1>}
-      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+      action={<Button appearance="transparent" icon={<MoreHorizontalFilled />} />}
     />
     <CardHeader
       header={
@@ -166,7 +166,7 @@ export const _CardHeader = () => (
         </Body1>
       }
       description={<Caption1>Developer</Caption1>}
-      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+      action={<Button appearance="transparent" icon={<MoreHorizontalFilled />} />}
     />
     <CardHeader
       image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
@@ -175,7 +175,7 @@ export const _CardHeader = () => (
           <b>App Name</b>
         </Body1>
       }
-      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+      action={<Button appearance="transparent" icon={<MoreHorizontalFilled />} />}
     />
     <CardHeader
       image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
@@ -192,7 +192,7 @@ export const _CardHeader = () => (
           <b>App Name</b>
         </Body1>
       }
-      action={<Button appearance="transparent" icon={<MoreHorizontal24Filled />} />}
+      action={<Button appearance="transparent" icon={<MoreHorizontalFilled />} />}
     />
     <CardHeader
       image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }}
diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
index 2d419583ff559..bb7cc1c0b92c3 100644
--- a/apps/vr-tests-react-components/src/stories/Card/utils.tsx
+++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CardHeader, CardFooter } from '@fluentui/react-card';
 import { Body1, Caption1 } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
-import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
+import { OpenRegular, ShareRegular } from '@fluentui/react-icons';
 
 const ASSET_URL =
   'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
@@ -26,10 +26,10 @@ export const SampleCardContent = ({ controlsDisabled }: { controlsDisabled?: boo
       Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
     </div>
     <CardFooter>
-      <Button disabled={controlsDisabled} appearance="primary" icon={<Open16Regular />}>
+      <Button disabled={controlsDisabled} appearance="primary" icon={<OpenRegular />}>
         Open
       </Button>
-      <Button disabled={controlsDisabled} icon={<Share16Regular />}>
+      <Button disabled={controlsDisabled} icon={<ShareRegular />}>
         Share
       </Button>
     </CardFooter>
diff --git a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
index bf269121e4c8d..66800b39fc09f 100644
--- a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx
@@ -11,7 +11,7 @@ import {
 import { OverlayDrawer, DrawerBody, DrawerHeader, DrawerHeaderTitle } from '@fluentui/react-drawer';
 import { Button } from '@fluentui/react-button';
 import { Combobox, Option } from '@fluentui/react-combobox';
-import { Rocket24Regular, Dismiss24Regular } from '@fluentui/react-icons';
+import { RocketRegular, DismissRegular } from '@fluentui/react-icons';
 import type { Meta } from '@storybook/react-webpack5';
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
@@ -260,7 +260,7 @@ export const TitleCustomAction = () => (
     </DialogTrigger>
     <DialogSurface>
       <DialogBody>
-        <DialogTitle action={<Button appearance="subtle" aria-label="fly" icon={<Rocket24Regular />} />}>
+        <DialogTitle action={<Button appearance="subtle" aria-label="fly" icon={<RocketRegular />} />}>
           Dialog title
         </DialogTitle>
         <DialogContent>
@@ -533,7 +533,7 @@ export const IntegrationComboboxInline = () => {
 export const DialogInsideDrawerDefault = () => (
   <OverlayDrawer open position="start">
     <DrawerHeader>
-      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} />}>
+      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} />}>
         Drawer with Dialog
       </DrawerHeaderTitle>
     </DrawerHeader>
@@ -568,7 +568,7 @@ export const DialogInsideDrawerDefaultRTL = getStoryVariant(DialogInsideDrawerDe
 export const DialogInsideDrawerDimmed = () => (
   <OverlayDrawer open position="start">
     <DrawerHeader>
-      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} />}>
+      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} />}>
         Drawer with Dialog
       </DrawerHeaderTitle>
     </DrawerHeader>
@@ -603,7 +603,7 @@ export const DialogInsideDrawerDimmedRTL = getStoryVariant(DialogInsideDrawerDim
 export const DialogInsideDrawerTransparent = () => (
   <OverlayDrawer open position="start">
     <DrawerHeader>
-      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} />}>
+      <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} />}>
         Drawer with Dialog
       </DrawerHeaderTitle>
     </DrawerHeader>
diff --git a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
index 45bea6f492457..7ae7101f02eb8 100644
--- a/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Drawer/Drawer.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react-webpack5';
 
+import type { OverlayDrawerProps, InlineDrawerProps } from '@fluentui/react-drawer';
 import {
   Drawer,
   DrawerHeader,
@@ -8,19 +9,12 @@ import {
   DrawerBody,
   DrawerHeaderNavigation,
   OverlayDrawer,
-  OverlayDrawerProps,
   InlineDrawer,
-  InlineDrawerProps,
   DrawerFooter,
 } from '@fluentui/react-drawer';
 import { Toolbar, ToolbarButton, ToolbarGroup } from '@fluentui/react-toolbar';
 import { Button } from '@fluentui/react-button';
-import {
-  ArrowLeft24Regular,
-  ArrowClockwise24Regular,
-  Settings24Regular,
-  Dismiss24Regular,
-} from '@fluentui/react-icons';
+import { ArrowLeftRegular, ArrowClockwiseRegular, SettingsRegular, DismissRegular } from '@fluentui/react-icons';
 
 import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
 
@@ -32,12 +26,12 @@ const ExampleDrawerHeader = () => (
   <DrawerHeader>
     <DrawerHeaderNavigation>
       <Toolbar style={{ justifyContent: 'space-between' }}>
-        <ToolbarButton aria-label="Back" appearance="subtle" icon={<ArrowLeft24Regular />} />
+        <ToolbarButton aria-label="Back" appearance="subtle" icon={<ArrowLeftRegular />} />
 
         <ToolbarGroup>
-          <ToolbarButton aria-label="Reload content" appearance="subtle" icon={<ArrowClockwise24Regular />} />
-          <ToolbarButton aria-label="Settings" appearance="subtle" icon={<Settings24Regular />} />
-          <ToolbarButton aria-label="Close panel" appearance="subtle" icon={<Dismiss24Regular />} />
+          <ToolbarButton aria-label="Reload content" appearance="subtle" icon={<ArrowClockwiseRegular />} />
+          <ToolbarButton aria-label="Settings" appearance="subtle" icon={<SettingsRegular />} />
+          <ToolbarButton aria-label="Close panel" appearance="subtle" icon={<DismissRegular />} />
         </ToolbarGroup>
       </Toolbar>
     </DrawerHeaderNavigation>
diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
index 20554f0007014..f58a8288a11ea 100644
--- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Combobox, Dropdown } from '@fluentui/react-combobox';
 import { Field } from '@fluentui/react-field';
-import { Dismiss12Filled } from '@fluentui/react-icons';
+import { DismissFilled } from '@fluentui/react-icons';
 import { Input } from '@fluentui/react-input';
 import { ProgressBar } from '@fluentui/react-progress';
 import { Radio, RadioGroup } from '@fluentui/react-radio';
@@ -98,7 +98,7 @@ export const ValidationMessageIcon = () => (
   <Field
     label="Custom validation icon"
     validationMessage="Error message with custom icon"
-    validationMessageIcon={<Dismiss12Filled />}
+    validationMessageIcon={<DismissFilled />}
   >
     <Input />
   </Field>
diff --git a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
index 2268efe28acf1..bf32f634e7dea 100644
--- a/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Toolbar/Toolbar.stories.tsx
@@ -1,19 +1,13 @@
 import * as React from 'react';
 import { Steps, type StoryParameters } from 'storywright';
 import { makeStyles } from '@griffel/react';
+import type { ToolbarProps } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton, ToolbarGroup } from '@fluentui/react-toolbar';
 import {
-  Toolbar,
-  ToolbarProps,
-  ToolbarButton,
-  ToolbarDivider,
-  ToolbarToggleButton,
-  ToolbarGroup,
-} from '@fluentui/react-toolbar';
-import {
-  TextBold24Regular,
-  TextItalic24Regular,
-  TextUnderline24Regular,
-  AlertSnooze24Regular,
+  TextBoldRegular,
+  TextItalicRegular,
+  TextUnderlineRegular,
+  AlertSnoozeRegular,
   FontIncreaseRegular,
   FontDecreaseRegular,
   TextFontRegular,
@@ -45,16 +39,16 @@ export default {
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBoldRegular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalicRegular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderlineRegular />} />
     <ToolbarDivider />
     <ToolbarToggleButton
       id="snooze-toggle"
       aria-label="Snooze Alert Option"
       name="toggle"
       value="toggle"
-      icon={<AlertSnooze24Regular />}
+      icon={<AlertSnoozeRegular />}
     />
   </Toolbar>
 );
@@ -65,10 +59,10 @@ export const Transparent = (props: Partial<ToolbarProps>) => (
       id="bold-button"
       aria-label="Text option - Bold"
       appearance="transparent"
-      icon={<TextBold24Regular />}
+      icon={<TextBoldRegular />}
     />
-    <ToolbarButton aria-label="Text option - Italic" appearance="transparent" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" appearance="transparent" icon={<TextUnderline24Regular />} />
+    <ToolbarButton aria-label="Text option - Italic" appearance="transparent" icon={<TextItalicRegular />} />
+    <ToolbarButton aria-label="Text option - Underline" appearance="transparent" icon={<TextUnderlineRegular />} />
     <ToolbarDivider />
     <ToolbarToggleButton
       id="snooze-toggle"
@@ -76,55 +70,55 @@ export const Transparent = (props: Partial<ToolbarProps>) => (
       name="toggle"
       value="toggle"
       appearance="transparent"
-      icon={<AlertSnooze24Regular />}
+      icon={<AlertSnoozeRegular />}
     />
   </Toolbar>
 );
 
 export const Vertical = (props: Partial<ToolbarProps>) => (
   <Toolbar vertical>
-    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBoldRegular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalicRegular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderlineRegular />} />
     <ToolbarDivider />
     <ToolbarToggleButton
       id="snooze-toggle"
       aria-label="Snooze Alert Option"
       name="toggle"
       value="toggle"
-      icon={<AlertSnooze24Regular />}
+      icon={<AlertSnoozeRegular />}
     />
   </Toolbar>
 );
 
 export const Small = (props: Partial<ToolbarProps>) => (
   <Toolbar size="small">
-    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBoldRegular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalicRegular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderlineRegular />} />
     <ToolbarDivider />
     <ToolbarToggleButton
       id="snooze-toggle"
       aria-label="Snooze Alert Option"
       name="toggle"
       value="toggle"
-      icon={<AlertSnooze24Regular />}
+      icon={<AlertSnoozeRegular />}
     />
   </Toolbar>
 );
 
 export const Large = (props: Partial<ToolbarProps>) => (
   <Toolbar size="large">
-    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton id="bold-button" aria-label="Text option - Bold" appearance="primary" icon={<TextBoldRegular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalicRegular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderlineRegular />} />
     <ToolbarDivider />
     <ToolbarToggleButton
       id="snooze-toggle"
       aria-label="Snooze Alert Option"
       name="toggle"
       value="toggle"
-      icon={<AlertSnooze24Regular />}
+      icon={<AlertSnoozeRegular />}
     />
   </Toolbar>
 );
@@ -136,7 +130,7 @@ export const VerticalButton = (props: Partial<ToolbarProps>) => (
       id="bold-button"
       aria-label="Text option - Bold"
       appearance="primary"
-      icon={<TextBold24Regular />}
+      icon={<TextBoldRegular />}
     />
     <ToolbarButton vertical appearance="primary" icon={<FontIncreaseRegular />}>
       Increase
@@ -165,7 +159,7 @@ export const FarGroup = (props: Partial<ToolbarProps>) => {
           id="bold-button"
           aria-label="Text option - Bold"
           appearance="primary"
-          icon={<TextBold24Regular />}
+          icon={<TextBoldRegular />}
         />
         <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />} />
         <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />} />
@@ -183,7 +177,7 @@ export const FarGroup = (props: Partial<ToolbarProps>) => {
           aria-label="Snooze Alert Option"
           name="toggle"
           value="toggle"
-          icon={<AlertSnooze24Regular />}
+          icon={<AlertSnoozeRegular />}
         />
       </ToolbarGroup>
     </Toolbar>
diff --git a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
index 991c3d69eee40..cad91f792e73a 100644
--- a/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tree.stories.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
+import type {
+  HeadlessFlatTreeItemProps,
+  TreeItemValue,
+  TreeOpenChangeData,
+  TreeOpenChangeEvent,
+} from '@fluentui/react-tree';
 import {
   FlatTree,
-  HeadlessFlatTreeItemProps,
   Tree,
   TreeItem,
   TreeItemLayout,
   TreeItemPersonaLayout,
-  TreeItemValue,
-  TreeOpenChangeData,
-  TreeOpenChangeEvent,
   useHeadlessFlatTree_unstable,
 } from '@fluentui/react-tree';
 import { tokens } from '@fluentui/react-theme';
@@ -20,12 +22,12 @@ import { Steps, type StoryParameters } from 'storywright';
 import {
   CaretDownRegular,
   CaretRightRegular,
-  Edit20Regular,
-  Image20Regular,
-  Important16Regular,
-  LockClosed20Regular,
-  MoreHorizontal20Regular,
-  SquareMultiple20Regular,
+  EditRegular,
+  ImageRegular,
+  ImportantRegular,
+  LockClosedRegular,
+  MoreHorizontalRegular,
+  SquareMultipleRegular,
 } from '@fluentui/react-icons';
 import { CounterBadge } from '@fluentui/react-badge';
 import { makeStyles, shorthands } from '@griffel/react';
@@ -360,10 +362,10 @@ export const ExpandIconRTL = getStoryVariant(ExpandIcon, RTL);
 const ActionsExample = () => {
   return (
     <>
-      <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+      <Button aria-label="Edit" appearance="subtle" icon={<EditRegular />} />
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+          <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontalRegular />} />
         </MenuTrigger>
 
         <MenuPopover>
@@ -424,15 +426,15 @@ export const Layout = () => (
       <TreeItemLayout
         aside={
           <>
-            <Important16Regular primaryFill="red" />
+            <ImportantRegular fontSize={16} primaryFill="red" />
             <CounterBadge count={1} color="danger" size="small" />
           </>
         }
-        iconBefore={<Image20Regular />}
+        iconBefore={<ImageRegular />}
         iconAfter={
           <>
-            <LockClosed20Regular />
-            <SquareMultiple20Regular />
+            <LockClosedRegular fontSize={20} />
+            <SquareMultipleRegular fontSize={20} />
           </>
         }
       >
@@ -463,12 +465,12 @@ export const Layout = () => (
     </TreeItem>
     <TreeItem itemType="branch" aria-description="Private">
       <TreeItemLayout
-        aside={<Important16Regular primaryFill="red" />}
-        iconBefore={<Image20Regular />}
+        aside={<ImportantRegular primaryFill="red" />}
+        iconBefore={<ImageRegular />}
         iconAfter={
           <>
-            <LockClosed20Regular />
-            <SquareMultiple20Regular />
+            <LockClosedRegular fontSize={20} />
+            <SquareMultipleRegular fontSize={20} />
           </>
         }
       >
@@ -509,7 +511,7 @@ const Badges = () => {
   const badgeStyles = useBadgeStyles();
   return (
     <div className={badgeStyles.base}>
-      <Important16Regular primaryFill="red" />
+      <ImportantRegular fontSize={16} primaryFill="red" />
       <CounterBadge count={1} color="danger" size="small" />
     </div>
   );
diff --git a/change/@fluentui-react-badge-7f02ad1a-3d22-47cf-8a40-0a7d5d54e001.json b/change/@fluentui-react-badge-7f02ad1a-3d22-47cf-8a40-0a7d5d54e001.json
new file mode 100644
index 0000000000000..3eefcaf33a6ea
--- /dev/null
+++ b/change/@fluentui-react-badge-7f02ad1a-3d22-47cf-8a40-0a7d5d54e001.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default presence icons to resizable icons",
+  "packageName": "@fluentui/react-badge",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-a5d8df6c-98e1-447c-92ff-e75256106d01.json b/change/@fluentui-react-card-a5d8df6c-98e1-447c-92ff-e75256106d01.json
new file mode 100644
index 0000000000000..973b0796e06fe
--- /dev/null
+++ b/change/@fluentui-react-card-a5d8df6c-98e1-447c-92ff-e75256106d01.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: migrate icon examples to resizable icons",
+  "packageName": "@fluentui/react-card",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e002.json b/change/@fluentui-react-checkbox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e002.json
new file mode 100644
index 0000000000000..7a0fa4ed3a34c
--- /dev/null
+++ b/change/@fluentui-react-checkbox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e002.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default indicator icons to resizable icons",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-combobox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e003.json b/change/@fluentui-react-combobox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e003.json
new file mode 100644
index 0000000000000..c8bb55d83051a
--- /dev/null
+++ b/change/@fluentui-react-combobox-7f02ad1a-3d22-47cf-8a40-0a7d5d54e003.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default option icons to resizable icons",
+  "packageName": "@fluentui/react-combobox",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-7f02ad1a-3d22-47cf-8a40-0a7d5d54e004.json b/change/@fluentui-react-dialog-7f02ad1a-3d22-47cf-8a40-0a7d5d54e004.json
new file mode 100644
index 0000000000000..5a760168dc300
--- /dev/null
+++ b/change/@fluentui-react-dialog-7f02ad1a-3d22-47cf-8a40-0a7d5d54e004.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate the default dialog title icon to a resizable icon",
+  "packageName": "@fluentui/react-dialog",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-drawer-a5d8df6c-98e1-447c-92ff-e75256106d02.json b/change/@fluentui-react-drawer-a5d8df6c-98e1-447c-92ff-e75256106d02.json
new file mode 100644
index 0000000000000..70960a773b303
--- /dev/null
+++ b/change/@fluentui-react-drawer-a5d8df6c-98e1-447c-92ff-e75256106d02.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: migrate icon examples to resizable icons",
+  "packageName": "@fluentui/react-drawer",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-field-7f02ad1a-3d22-47cf-8a40-0a7d5d54e005.json b/change/@fluentui-react-field-7f02ad1a-3d22-47cf-8a40-0a7d5d54e005.json
new file mode 100644
index 0000000000000..cd4abd45a3ed0
--- /dev/null
+++ b/change/@fluentui-react-field-7f02ad1a-3d22-47cf-8a40-0a7d5d54e005.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate validation icons to resizable icons",
+  "packageName": "@fluentui/react-field",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infobutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00c.json b/change/@fluentui-react-infobutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00c.json
new file mode 100644
index 0000000000000..fdba69d5525f9
--- /dev/null
+++ b/change/@fluentui-react-infobutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: migrate default info button icons to resizable icons",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infolabel-7f02ad1a-3d22-47cf-8a40-0a7d5d54e006.json b/change/@fluentui-react-infolabel-7f02ad1a-3d22-47cf-8a40-0a7d5d54e006.json
new file mode 100644
index 0000000000000..44f7dcbdf1955
--- /dev/null
+++ b/change/@fluentui-react-infolabel-7f02ad1a-3d22-47cf-8a40-0a7d5d54e006.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default info button icons to resizable icons",
+  "packageName": "@fluentui/react-infolabel",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-91f6b7b8-5041-4ea5-8148-a10e33c92001.json b/change/@fluentui-react-input-91f6b7b8-5041-4ea5-8148-a10e33c92001.json
new file mode 100644
index 0000000000000..da6f4b80b4e95
--- /dev/null
+++ b/change/@fluentui-react-input-91f6b7b8-5041-4ea5-8148-a10e33c92001.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-input",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-7f02ad1a-3d22-47cf-8a40-0a7d5d54e007.json b/change/@fluentui-react-menu-7f02ad1a-3d22-47cf-8a40-0a7d5d54e007.json
new file mode 100644
index 0000000000000..8f8f9eaf0188f
--- /dev/null
+++ b/change/@fluentui-react-menu-7f02ad1a-3d22-47cf-8a40-0a7d5d54e007.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default checkmark icons to resizable icons",
+  "packageName": "@fluentui/react-menu",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-91f6b7b8-5041-4ea5-8148-a10e33c92002.json b/change/@fluentui-react-migration-v0-v9-91f6b7b8-5041-4ea5-8148-a10e33c92002.json
new file mode 100644
index 0000000000000..df1498b5347be
--- /dev/null
+++ b/change/@fluentui-react-migration-v0-v9-91f6b7b8-5041-4ea5-8148-a10e33c92002.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-nav-7f02ad1a-3d22-47cf-8a40-0a7d5d54e008.json b/change/@fluentui-react-nav-7f02ad1a-3d22-47cf-8a40-0a7d5d54e008.json
new file mode 100644
index 0000000000000..071d7030dff26
--- /dev/null
+++ b/change/@fluentui-react-nav-7f02ad1a-3d22-47cf-8a40-0a7d5d54e008.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default navigation icons to resizable icons",
+  "packageName": "@fluentui/react-nav",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-rating-91f6b7b8-5041-4ea5-8148-a10e33c92003.json b/change/@fluentui-react-rating-91f6b7b8-5041-4ea5-8148-a10e33c92003.json
new file mode 100644
index 0000000000000..86cd9df789ad4
--- /dev/null
+++ b/change/@fluentui-react-rating-91f6b7b8-5041-4ea5-8148-a10e33c92003.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-rating",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-search-91f6b7b8-5041-4ea5-8148-a10e33c92004.json b/change/@fluentui-react-search-91f6b7b8-5041-4ea5-8148-a10e33c92004.json
new file mode 100644
index 0000000000000..2a32d83d7db01
--- /dev/null
+++ b/change/@fluentui-react-search-91f6b7b8-5041-4ea5-8148-a10e33c92004.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-search",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-select-91f6b7b8-5041-4ea5-8148-a10e33c92005.json b/change/@fluentui-react-select-91f6b7b8-5041-4ea5-8148-a10e33c92005.json
new file mode 100644
index 0000000000000..7493e8f31ab5d
--- /dev/null
+++ b/change/@fluentui-react-select-91f6b7b8-5041-4ea5-8148-a10e33c92005.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-select",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinbutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e009.json b/change/@fluentui-react-spinbutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e009.json
new file mode 100644
index 0000000000000..88f9e95d265bf
--- /dev/null
+++ b/change/@fluentui-react-spinbutton-7f02ad1a-3d22-47cf-8a40-0a7d5d54e009.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default spin button icons to resizable icons",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tag-picker-91f6b7b8-5041-4ea5-8148-a10e33c92006.json b/change/@fluentui-react-tag-picker-91f6b7b8-5041-4ea5-8148-a10e33c92006.json
new file mode 100644
index 0000000000000..3123847bd9fb1
--- /dev/null
+++ b/change/@fluentui-react-tag-picker-91f6b7b8-5041-4ea5-8148-a10e33c92006.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support font variants in icon styles",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-teaching-popover-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00a.json b/change/@fluentui-react-teaching-popover-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00a.json
new file mode 100644
index 0000000000000..a569d24dbb3bb
--- /dev/null
+++ b/change/@fluentui-react-teaching-popover-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate default header icons to resizable icons",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00b.json b/change/@fluentui-react-tree-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00b.json
new file mode 100644
index 0000000000000..66d27ad236cbf
--- /dev/null
+++ b/change/@fluentui-react-tree-7f02ad1a-3d22-47cf-8a40-0a7d5d54e00b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: migrate the default tree chevron to a resizable icon",
+  "packageName": "@fluentui/react-tree",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/docs/workflows/resizable-icons.md b/docs/workflows/resizable-icons.md
new file mode 100644
index 0000000000000..8e95d338c96a7
--- /dev/null
+++ b/docs/workflows/resizable-icons.md
@@ -0,0 +1,230 @@
+# Migrating to resizable Fluent icons
+
+## Goal
+
+Replace fixed-size icon exports:
+
+```tsx
+import { Dismiss20Regular } from '@fluentui/react-icons';
+```
+
+with resizable exports:
+
+```tsx
+import { DismissRegular } from '@fluentui/react-icons';
+```
+
+Resizable icons use scalable 20px artwork, render at `1em`, and support both SVG and font implementations.
+
+## Enable linting
+
+Install [`@fluentui/eslint-plugin-react-icons`](https://github.com/microsoft/fluentui-system-icons/tree/main/packages/eslint-plugin-react-icons) and enable `prefer-resizable`:
+
+```js
+const reactIconsPlugin = require('@fluentui/eslint-plugin-react-icons');
+
+module.exports = [
+  {
+    plugins: {
+      '@fluentui/react-icons': reactIconsPlugin,
+    },
+    rules: {
+      '@fluentui/react-icons/prefer-resizable': 'error',
+    },
+  },
+];
+```
+
+The rule offers editor suggestions, but its suggestions are not applied by `eslint --fix`.
+
+## Rename imports
+
+Remove the numeric size from each icon name while preserving its variant:
+
+```tsx
+// Before
+import { Add20Filled, Add20Regular } from '@fluentui/react-icons';
+
+// After
+import { AddFilled, AddRegular } from '@fluentui/react-icons';
+```
+
+Preserve aliases and deduplicate imports when multiple sized exports collapse to one resizable export.
+
+## Preserve icon dimensions
+
+### Component-owned default icons
+
+When a component constructs its default icon, pass the old size through the `fontSize` prop:
+
+```tsx
+// Before
+<Dismiss12Regular />
+
+// After
+<DismissRegular fontSize={12} />
+```
+
+`fontSize` is part of `FluentIconsProps` and is supported by both SVG and font icon variants. A direct prop sizes only the owned default and does not change user-provided slot content.
+
+For defaults that vary with component size, use a size map:
+
+```tsx
+const iconSizeMap = {
+  small: 12,
+  medium: 16,
+  large: 20,
+} as const;
+
+<InfoRegular fontSize={iconSizeMap[size]} />;
+```
+
+A `20` prop is unnecessary when the receiving slot already guarantees `font-size: 20px`. For example, Button owns its icon dimensions, so this only needs an import rename:
+
+```tsx
+<Button icon={<AddRegular />} />
+```
+
+### Replaceable icon slots
+
+Keep sizing in CSS when consumers can replace the icon and the component promises to size arbitrary slot content:
+
+```ts
+const useStyles = makeStyles({
+  icon: {
+    fontSize: '16px',
+  },
+});
+```
+
+This makes the size part of the slot contract instead of an implementation detail of the default icon.
+
+Use literal pixel values for fixed icon geometry. Typography tokens can be customized by themes and should not control dimensions that must remain equivalent to a former sized icon.
+
+## Support font icon variants
+
+Font icon variants render an element with the `data-fui-icon` attribute. Every existing style selector that targets a Fluent icon SVG must also match this attribute.
+
+Preserve the original combinator:
+
+```ts
+// Descendant
+'& svg': {
+  display: 'block',
+},
+
+// Becomes
+'& svg, & :where([data-fui-icon])': {
+  display: 'block',
+},
+```
+
+```ts
+// Direct child
+'> svg': {
+  fontSize: '20px',
+},
+
+// Becomes
+'> svg, > :where([data-fui-icon])': {
+  fontSize: '20px',
+},
+```
+
+Use an explicit selector list rather than nesting both branches inside `:is()`.
+
+- The existing `svg` branch remains unchanged and retains its original specificity.
+- `:where([data-fui-icon])` matches font variants without increasing specificity.
+- Avoid selecting the implementation element (`i`) because that could match unrelated italic content.
+- Avoid hardcoding `.fui-Icon-font` unless a style intentionally applies only to font icons.
+
+Direct `fontSize` props do not replace these selector updates. Existing selectors may also provide layout behavior such as `display`, `overflow`, flex sizing, or sizing for arbitrary slot content.
+
+Do not update selectors for generic SVG content that is not a Fluent icon, such as charts, illustrations, or positioning overlays.
+
+## Migrate `bundleIcon`
+
+Migrate both variants and apply sizing when rendering the bundled component:
+
+```tsx
+// Before
+const InfoIcon = bundleIcon(Info16Filled, Info16Regular);
+
+// After
+const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
+
+<InfoIcon fontSize={16} />;
+```
+
+`bundleIcon` selects the filled or regular variant; it does not own the rendered size.
+
+## Stories and tests
+
+Icons passed to components with a defined icon-slot size usually need only an import rename:
+
+```tsx
+<Button icon={<AddRegular />} />
+```
+
+Standalone icons and icons stored in intermediate variables should preserve their former dimensions explicitly:
+
+```tsx
+// Before
+<AnimalCat24Regular />
+
+// After
+<AnimalCatRegular fontSize={24} />
+```
+
+Expected snapshot changes include:
+
+- `width` and `height` changing to `1em`;
+- `viewBox` generally changing to `0 0 20 20`;
+- path data changing to the resizable 20px artwork;
+- an explicit `font-size` attribute when the prop is provided.
+
+## Optical differences
+
+Resizable exports use scalable 20px artwork. A resizable icon rendered with `fontSize={24}` has the same dimensions as a 24px icon, but it may not look identical to the optically tuned `*24Regular` artwork.
+
+If exact size-specific artwork is required:
+
+1. Keep the sized icon intentionally.
+2. Add a narrowly scoped lint suppression.
+3. Document why the optical tuning is required.
+
+## Validation
+
+### Public Storybook icon variants
+
+The v9 and headless public Storybooks use atomic SVG icon imports by default. Set `FLUENTUI_ICON_VARIANT=fonts` at build time to use atomic font icons and subset the emitted fonts:
+
+```bash
+# Atomic SVG icons (default)
+yarn nx run public-docsite-v9:build-storybook
+yarn nx run public-docsite-v9-headless:build-storybook
+
+# Atomic, subsetted font icons
+FLUENTUI_ICON_VARIANT=fonts yarn nx run public-docsite-v9:build-storybook
+FLUENTUI_ICON_VARIANT=fonts yarn nx run public-docsite-v9-headless:build-storybook
+```
+
+Do not set the flag for normal SVG builds. Font mode falls back to SVG for icon packages or color icons that do not provide a font variant.
+
+Run the relevant package checks:
+
+```bash
+yarn nx run <project>:lint
+yarn nx run <project>:test
+yarn nx run <project>:build
+yarn nx format:check --base origin/master
+yarn beachball check
+```
+
+Visually inspect:
+
+- icons smaller or larger than 20px;
+- dynamic component sizes;
+- icon alignment in buttons and field controls;
+- custom icon slot content;
+- SVG and font icon renderers.
diff --git a/package.json b/package.json
index 942b32c787072..aee252aeba838 100644
--- a/package.json
+++ b/package.json
@@ -58,8 +58,11 @@
     "@eslint/compat": "1.3.0",
     "@eslint/js": "9.26.0",
     "@floating-ui/dom": "1.6.12",
+    "@fluentui/eslint-plugin-react-icons": "0.0.1",
     "@fluentui/react-compiler-analyzer": "0.0.0-experimental.rc-analyzer.20260526-7c5862ce36.0",
-    "@fluentui/react-icons": "^2.0.306",
+    "@fluentui/react-icons": "^2.0.339",
+    "@fluentui/react-icons-atomic-webpack-loader": "0.0.6",
+    "@fluentui/react-icons-font-subsetting-webpack-plugin": "2.0.339",
     "@fluentui/react-integration-tester": "*",
     "@fluentui/scripts-test-ssr": "*",
     "@fluentui/storybook-llms-extractor": "*",
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 7ec9da91db766..f405e48621349 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@eslint/compat": "1.3.0",
+    "@fluentui/eslint-plugin-react-icons": "0.0.1",
     "@griffel/eslint-plugin": "^2.0.0",
     "@nx/eslint-plugin": "21.6.10",
     "@rnx-kit/eslint-plugin": "^0.8.4",
diff --git a/packages/eslint-plugin/src/configs/react/config.js b/packages/eslint-plugin/src/configs/react/config.js
index 1481bb2c4a316..0ed278b1f82a8 100644
--- a/packages/eslint-plugin/src/configs/react/config.js
+++ b/packages/eslint-plugin/src/configs/react/config.js
@@ -3,6 +3,7 @@ const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
 const reactPlugin = require('eslint-plugin-react');
 const reactHooksPlugin = require('eslint-plugin-react-hooks');
 const griffelPlugin = require('@griffel/eslint-plugin');
+const reactIconsPlugin = require('@fluentui/eslint-plugin-react-icons');
 const configHelpers = require('../../utils/configHelpers');
 const { fixupPluginRules } = require('@eslint/compat');
 const { defineConfig } = require('eslint/config');
@@ -14,13 +15,14 @@ const reactComponentsPlugin = require('@fluentui/eslint-plugin-react-components'
 module.exports = defineConfig(
   {
     files: ['**/*.{jsx,tsx,ts,js}'],
-    plugins: {
+    plugins: /** @type {any} */ ({
       react: reactPlugin,
       '@griffel': fixupPluginRules(/** @type {any} */ (griffelPlugin)),
       'jsx-a11y': jsxA11yPlugin,
       'react-hooks': reactHooksPlugin,
       '@fluentui/react-components': reactComponentsPlugin,
-    },
+      '@fluentui/react-icons': reactIconsPlugin,
+    }),
     languageOptions: {
       parserOptions: {
         ecmaFeatures: {
@@ -59,6 +61,11 @@ module.exports = defineConfig(
       '@griffel/no-shorthands': 'error',
       '@griffel/pseudo-element-naming': 'error',
       '@griffel/styles-file': 'error',
+      /**
+       * fluent ui react icons eslint rules
+       * @see https://github.com/microsoft/fluentui-system-icons/tree/main/packages/eslint-plugin-react-icons
+       */
+      '@fluentui/react-icons/prefer-resizable': 'error',
       /**
        * react eslint rules
        * @see https://github.com/yannickcr/eslint-plugin-react
diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx
index 463159b2ae819..95bb5b1cf4032 100644
--- a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx
+++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/DefaultInfoButtonIcons.tsx
@@ -1,13 +1,3 @@
-import {
-  Info12Regular,
-  Info12Filled,
-  Info16Regular,
-  Info16Filled,
-  Info20Regular,
-  Info20Filled,
-  bundleIcon,
-} from '@fluentui/react-icons';
+import { InfoRegular, InfoFilled, bundleIcon } from '@fluentui/react-icons';
 
-export const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);
-export const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);
-export const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);
+export const DefaultInfoButtonIcon = bundleIcon(InfoFilled, InfoRegular);
diff --git a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index 9c17fd0d36ad9..68bcd9d8917d3 100644
--- a/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/deprecated/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -3,7 +3,7 @@
 'use client';
 
 import * as React from 'react';
-import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
+import { DefaultInfoButtonIcon } from './DefaultInfoButtonIcons';
 import {
   getIntrinsicElementProps,
   mergeCallbacks,
@@ -17,10 +17,10 @@ import { Popover, PopoverSurface } from '@fluentui/react-popover';
 import type { InfoButtonProps, InfoButtonState } from './InfoButton.types';
 import type { PopoverProps } from '@fluentui/react-popover';
 
-const infoButtonIconMap = {
-  small: <DefaultInfoButtonIcon12 />,
-  medium: <DefaultInfoButtonIcon16 />,
-  large: <DefaultInfoButtonIcon20 />,
+const infoButtonIconSizeMap = {
+  small: 12,
+  medium: 16,
+  large: 20,
 } as const;
 
 const popoverSizeMap = {
@@ -55,7 +55,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
 
     root: slot.always(
       getIntrinsicElementProps('button', {
-        children: infoButtonIconMap[size],
+        children: <DefaultInfoButtonIcon fontSize={infoButtonIconSizeMap[size]} />,
         type: 'button',
         'aria-label': 'information',
         ...rest,
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/packages/react-components/react-accordion/library/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
index 9a3c0b5a6a0bb..8c8f34e3ec99b 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -15,7 +15,8 @@ exports[`AccordionHeader renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         style="transform: rotate(0deg); transition: transform 200ms ease-out;"
@@ -24,7 +25,7 @@ exports[`AccordionHeader renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+          d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.47a.5.5 0 0 1-.7-.71L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx b/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
index 5709059a39b03..3ba8de92d7a08 100644
--- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
+++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement, AccordionToggleEventHandler } from '@fluentui/react-components';
-import { Add20Filled, Subtract20Filled } from '@fluentui/react-icons';
+import { AddFilled, SubtractFilled } from '@fluentui/react-icons';
 import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-components';
 
 export const ExpandIcon = (): JSXElement => {
@@ -11,7 +11,7 @@ export const ExpandIcon = (): JSXElement => {
   return (
     <Accordion onToggle={handleToggle} openItems={openItem}>
       <AccordionItem value={1}>
-        <AccordionHeader expandIcon={openItem === 1 ? <Subtract20Filled /> : <Add20Filled />}>
+        <AccordionHeader expandIcon={openItem === 1 ? <SubtractFilled fontSize={20} /> : <AddFilled fontSize={20} />}>
           Accordion Header 1
         </AccordionHeader>
         <AccordionPanel>
@@ -19,7 +19,7 @@ export const ExpandIcon = (): JSXElement => {
         </AccordionPanel>
       </AccordionItem>
       <AccordionItem value={2}>
-        <AccordionHeader expandIcon={openItem === 2 ? <Subtract20Filled /> : <Add20Filled />}>
+        <AccordionHeader expandIcon={openItem === 2 ? <SubtractFilled fontSize={20} /> : <AddFilled fontSize={20} />}>
           Accordion Header 2
         </AccordionHeader>
         <AccordionPanel>
@@ -27,7 +27,7 @@ export const ExpandIcon = (): JSXElement => {
         </AccordionPanel>
       </AccordionItem>
       <AccordionItem value={3}>
-        <AccordionHeader expandIcon={openItem === 3 ? <Subtract20Filled /> : <Add20Filled />}>
+        <AccordionHeader expandIcon={openItem === 3 ? <SubtractFilled fontSize={20} /> : <AddFilled fontSize={20} />}>
           Accordion Header 3
         </AccordionHeader>
         <AccordionPanel>
diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.test.tsx b/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.test.tsx
index c5b126b77c46f..168f59bf6e583 100644
--- a/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.test.tsx
+++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PresenceBadge } from './PresenceBadge';
 import { render } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
-import type { PresenceBadgeStatus } from './PresenceBadge.types';
+import type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';
 import { DEFAULT_STRINGS as STATUS_LABELS } from './usePresenceBadge';
 
 describe('PresenceBadge', () => {
@@ -16,6 +16,24 @@ describe('PresenceBadge', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it.each<[PresenceBadgeState['size'], string]>([
+    ['tiny', '6px'],
+    ['extra-small', '10px'],
+    ['small', '12px'],
+    ['medium', '16px'],
+    ['large', '20px'],
+    ['extra-large', '28px'],
+  ])('renders a %s icon at %s', (size, expectedFontSize) => {
+    const { container } = render(<PresenceBadge size={size} />);
+    const icon = container.querySelector('svg');
+
+    expect(icon).not.toBeNull();
+    const iconFontSize = window.getComputedStyle(icon!).fontSize;
+    const inheritedFontSize = window.getComputedStyle(icon!.parentElement!).fontSize;
+
+    expect(iconFontSize || inheritedFontSize).toBe(expectedFontSize);
+  });
+
   it.each(Object.keys(STATUS_LABELS) as PresenceBadgeStatus[])('renders correct aria label for "%s" status', status => {
     const { getByLabelText } = render(<PresenceBadge status={status} />);
     expect(getByLabelText(STATUS_LABELS[status])).toBeTruthy();
diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap b/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
index e86482da913e1..aecb02b622cd0 100644
--- a/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
+++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
@@ -11,15 +11,16 @@ exports[`PresenceBadge renders a default state 1`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
+      class="fui-Icon"
+      data-fui-icon=""
       fill="currentColor"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.7-9.3-4 4a1 1 0 0 1-1.41 0l-2-2a1 1 0 1 1 1.42-1.4L7 8.58l3.3-3.3a1 1 0 0 1 1.4 1.42Z"
+        d="M10 20a10 10 0 1 0 0-20 10 10 0 0 0 0 20m4.2-11.8-4.5 4.5a1 1 0 0 1-1.4 0l-2-2a1 1 0 1 1 1.4-1.4L9 10.58l3.8-3.8a1 1 0 1 1 1.4 1.42"
         fill="currentColor"
       />
     </svg>
diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts b/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
index f1a37817b7578..e373fa343636c 100644
--- a/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
+++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/presenceIcons.ts
@@ -1,191 +1,57 @@
 import type * as React from 'react';
 import {
-  PresenceAvailable10Regular,
-  PresenceAvailable12Regular,
-  PresenceAvailable16Regular,
-  PresenceAvailable20Regular,
-  PresenceAvailable10Filled,
-  PresenceAvailable12Filled,
-  PresenceAvailable16Filled,
-  PresenceAvailable20Filled,
-  PresenceAway10Regular,
-  PresenceAway12Regular,
-  PresenceAway16Regular,
-  PresenceAway20Regular,
-  PresenceAway10Filled,
-  PresenceAway12Filled,
-  PresenceAway16Filled,
-  PresenceAway20Filled,
-  PresenceBlocked10Regular,
-  PresenceBlocked12Regular,
-  PresenceBlocked16Regular,
-  PresenceBlocked20Regular,
-  PresenceBusy10Filled,
-  PresenceBusy12Filled,
-  PresenceBusy16Filled,
-  PresenceBusy20Filled,
-  PresenceDnd10Regular,
-  PresenceDnd12Regular,
-  PresenceDnd16Regular,
-  PresenceDnd20Regular,
-  PresenceDnd10Filled,
-  PresenceDnd12Filled,
-  PresenceDnd16Filled,
-  PresenceDnd20Filled,
-  PresenceOof10Regular,
-  PresenceOof12Regular,
-  PresenceOof16Regular,
-  PresenceOof20Regular,
-  PresenceOffline10Regular,
-  PresenceOffline12Regular,
-  PresenceOffline16Regular,
-  PresenceOffline20Regular,
-  PresenceUnknown10Regular,
-  PresenceUnknown12Regular,
-  PresenceUnknown16Regular,
-  PresenceUnknown20Regular,
+  PresenceAvailableRegular,
+  PresenceAvailableFilled,
+  PresenceAwayRegular,
+  PresenceAwayFilled,
+  PresenceBlockedRegular,
+  PresenceBusyFilled,
+  PresenceDndRegular,
+  PresenceDndFilled,
+  PresenceOofRegular,
+  PresenceOfflineRegular,
+  PresenceUnknownRegular,
 } from '@fluentui/react-icons';
 import type { PresenceBadgeState } from './PresenceBadge.types';
 
-export const presenceAwayRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceAway10Regular,
-  'extra-small': PresenceAway10Regular,
-  small: PresenceAway12Regular,
-  medium: PresenceAway16Regular,
-  large: PresenceAway20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceAway20Regular,
-};
+const createIconMap = (Icon: React.FunctionComponent): Record<PresenceBadgeState['size'], React.FunctionComponent> => ({
+  tiny: Icon,
+  'extra-small': Icon,
+  small: Icon,
+  medium: Icon,
+  large: Icon,
+  'extra-large': Icon,
+});
 
-export const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceAway10Filled,
-  'extra-small': PresenceAway10Filled,
-  small: PresenceAway12Filled,
-  medium: PresenceAway16Filled,
-  large: PresenceAway20Filled,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceAway20Filled,
-};
+export const presenceAwayRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceAwayRegular);
 
-export const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceAvailable10Regular,
-  'extra-small': PresenceAvailable10Regular,
-  small: PresenceAvailable12Regular,
-  medium: PresenceAvailable16Regular,
-  large: PresenceAvailable20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceAvailable20Regular,
-};
+export const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceAwayFilled);
 
-export const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceAvailable10Filled,
-  'extra-small': PresenceAvailable10Filled,
-  small: PresenceAvailable12Filled,
-  medium: PresenceAvailable16Filled,
-  large: PresenceAvailable20Filled,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceAvailable20Filled,
-};
+export const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceAvailableRegular);
 
-export const presenceBlockedRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceBlocked10Regular,
-  'extra-small': PresenceBlocked10Regular,
-  small: PresenceBlocked12Regular,
-  medium: PresenceBlocked16Regular,
-  large: PresenceBlocked20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceBlocked20Regular,
-};
+export const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceAvailableFilled);
 
-export const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceBusy10Filled,
-  'extra-small': PresenceBusy10Filled,
-  small: PresenceBusy12Filled,
-  medium: PresenceBusy16Filled,
-  large: PresenceBusy20Filled,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceBusy20Filled,
-};
+export const presenceBlockedRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceBlockedRegular);
 
-export const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceDnd10Filled,
-  'extra-small': PresenceDnd10Filled,
-  small: PresenceDnd12Filled,
-  medium: PresenceDnd16Filled,
-  large: PresenceDnd20Filled,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceDnd20Filled,
-};
+export const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceBusyFilled);
 
-export const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceDnd10Regular,
-  'extra-small': PresenceDnd10Regular,
-  small: PresenceDnd12Regular,
-  medium: PresenceDnd16Regular,
-  large: PresenceDnd20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceDnd20Regular,
-};
+export const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceDndFilled);
 
-export const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceOof10Regular,
-  'extra-small': PresenceOof10Regular,
-  small: PresenceOof12Regular,
-  medium: PresenceOof16Regular,
-  large: PresenceOof20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceOof20Regular,
-};
+export const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceDndRegular);
 
-export const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceOffline10Regular,
-  'extra-small': PresenceOffline10Regular,
-  small: PresenceOffline12Regular,
-  medium: PresenceOffline16Regular,
-  large: PresenceOffline20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceOffline20Regular,
-};
+export const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceOofRegular);
 
-export const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  tiny: PresenceUnknown10Regular,
-  'extra-small': PresenceUnknown10Regular,
-  small: PresenceUnknown12Regular,
-  medium: PresenceUnknown16Regular,
-  large: PresenceUnknown20Regular,
-  // FIXME not all presence icon sizes are available
-  // https://github.com/microsoft/fluentui/issues/20650
-  'extra-large': PresenceUnknown20Regular,
-};
+export const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceOfflineRegular);
+
+export const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> =
+  createIconMap(PresenceUnknownRegular);
diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts b/packages/react-components/react-badge/library/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts
index e959c7ce6edea..0c3982f6abb11 100644
--- a/packages/react-components/react-badge/library/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts
+++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts
@@ -73,32 +73,41 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForeground3,
   },
 
-  // Icons are not resizeable, and these sizes are currently missing
-  // use `!important` to size the currently available icons to the missing ones
-  //
   tiny: {
     aspectRatio: '1',
     width: '6px',
     backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix
-    '& svg': {
-      width: '6px !important',
-      height: '6px !important',
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '6px',
+    },
+  },
+  extraSmall: {
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '10px',
+    },
+  },
+  small: {
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '12px',
+    },
+  },
+  medium: {
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '16px',
     },
   },
   large: {
     aspectRatio: '1',
     width: '20px',
-    '& svg': {
-      width: '20px !important',
-      height: '20px !important',
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '20px',
     },
   },
   extraLarge: {
     aspectRatio: '1',
     width: '28px',
-    '& svg': {
-      width: '28px !important',
-      height: '28px !important',
+    '& svg, & :where([data-fui-icon])': {
+      fontSize: '28px',
     },
   },
 });
@@ -129,6 +138,9 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
       styles.statusOutOfOffice,
     state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,
     state.size === 'tiny' && styles.tiny,
+    state.size === 'extra-small' && styles.extraSmall,
+    state.size === 'small' && styles.small,
+    state.size === 'medium' && styles.medium,
     state.size === 'large' && styles.large,
     state.size === 'extra-large' && styles.extraLarge,
     state.root.className,
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
index 5786a541fd44f..dfa5e958c3c16 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.test.tsx
@@ -5,7 +5,7 @@ import { useBreadcrumbButtonBase_unstable } from './useBreadcrumbButton';
 import type { BreadcrumbButtonProps } from './BreadcrumbButton.types';
 import { isConformant } from '../../testing/isConformant';
 import { breadcrumbButtonClassNames } from './useBreadcrumbButtonStyles.styles';
-import { ArrowRight16Filled } from '@fluentui/react-icons';
+import { ArrowRightFilled } from '@fluentui/react-icons';
 
 describe('BreadcrumbButton', () => {
   isConformant({
@@ -37,9 +37,7 @@ describe('BreadcrumbButton', () => {
   });
 
   it('renders with an icon', () => {
-    const result = render(
-      <BreadcrumbButton icon={<ArrowRight16Filled />}>BreadcrumbButton with icon</BreadcrumbButton>,
-    );
+    const result = render(<BreadcrumbButton icon={<ArrowRightFilled />}>BreadcrumbButton with icon</BreadcrumbButton>);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
         <button
@@ -50,15 +48,16 @@ describe('BreadcrumbButton', () => {
           >
             <svg
               aria-hidden="true"
-              class=""
+              class="fui-Icon"
+              data-fui-icon=""
               fill="currentColor"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M2 8c0-.41.34-.75.75-.75h8.79L8.25 4.31a.75.75 0 0 1 1-1.12L14 7.44a.75.75 0 0 1 0 1.12L9.25 12.8a.75.75 0 1 1-1-1.12l3.29-2.94H2.75A.75.75 0 0 1 2 8Z"
+                d="M11.27 3.2a.75.75 0 0 0-1.04 1.1l5.24 4.95H2.75a.75.75 0 0 0 0 1.5h12.73l-5.25 4.96a.75.75 0 1 0 1.04 1.09l6.41-6.07a1 1 0 0 0 0-1.46z"
                 fill="currentColor"
               />
             </svg>
diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
index 1b7b70d7334b9..76e6bffeac9f4 100644
--- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
+++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbDivider/BreadcrumbDivider.test.tsx
@@ -19,7 +19,8 @@ describe('BreadcrumbDivider', () => {
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -27,7 +28,7 @@ describe('BreadcrumbDivider', () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+              d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.47a.5.5 0 0 1-.7-.71L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7"
               fill="currentColor"
             />
           </svg>
diff --git a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx
index 1b2915acd139a..03e562afc565e 100644
--- a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx
+++ b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider, BreadcrumbButton } from '@fluentui/react-components';
-import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
-const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 export const BreadcrumbSize = (): JSXElement => {
   return (
diff --git a/packages/react-components/react-card/library/README.md b/packages/react-components/react-card/library/README.md
index 741ee859ce803..0a61dfd9fe345 100644
--- a/packages/react-components/react-card/library/README.md
+++ b/packages/react-components/react-card/library/README.md
@@ -17,7 +17,7 @@ Example Card usage:
 ![example of a Card component in usage](./docs/assets/card-example.png)
 
 ```jsx
-import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
+import { ShareRegular, ArrowReplyRegular } from '@fluentui/react-icons';
 import { Button, Body1, Caption1 } from '@fluentui/react-components';
 import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
 
@@ -52,8 +52,8 @@ const App = () => (
         />
       </CardPreview>
       <CardFooter>
-        <Button icon={<ArrowReply16Regular />}>Reply</Button>
-        <Button icon={<Share16Regular />}>Share</Button>
+        <Button icon={<ArrowReplyRegular />}>Reply</Button>
+        <Button icon={<ShareRegular />}>Share</Button>
       </CardFooter>
     </Card>
   </>
diff --git a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
index c48beaf5cc3e8..c6036b65ae383 100644
--- a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
@@ -14,7 +14,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular, Open16Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular, OpenRegular } from '@fluentui/react-icons';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL =
@@ -118,7 +118,7 @@ export const WithAction = (): JSXElement => {
               </Body1>
             }
             description={<Caption1>Developer</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
           />
 
           <p className={styles.text}>
@@ -127,7 +127,7 @@ export const WithAction = (): JSXElement => {
           </p>
 
           <CardFooter>
-            <Button appearance="primary" icon={<Open16Regular />} onClick={onActionCardClick}>
+            <Button appearance="primary" icon={<OpenRegular />} onClick={onActionCardClick}>
               Open
             </Button>
           </CardFooter>
@@ -154,7 +154,7 @@ export const WithAction = (): JSXElement => {
               </Text>
             }
             description={<Caption1>Developer</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
           />
         </Card>
       </section>
diff --git a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
index fcd3c7b1b5cb1..0011c4a75fc69 100644
--- a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, CardProps } from '@fluentui/react-components';
 import { makeStyles, tokens, Button, Text, Caption1, Subtitle1, Body1, mergeClasses } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { Card, CardHeader } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
@@ -77,7 +77,7 @@ const CardExample = ({ className, ...props }: CardProps) => {
           </Text>
         }
         description={<Caption1 className={styles.caption}>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <p className={styles.text}>
diff --git a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
index db5289799558e..8c22e83f6c7f0 100644
--- a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, CardProps } from '@fluentui/react-components';
 import { makeStyles, Button, Caption1, Body1, Subtitle1 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular, Open16Regular, Share16Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular, OpenRegular, ShareRegular } from '@fluentui/react-icons';
 import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
@@ -70,7 +70,7 @@ const CardExample = (props: CardProps) => {
           </Body1>
         }
         description={<Caption1>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <p className={styles.text}>
@@ -78,10 +78,10 @@ const CardExample = (props: CardProps) => {
       </p>
 
       <CardFooter>
-        <Button appearance="primary" icon={<Open16Regular />}>
+        <Button appearance="primary" icon={<OpenRegular />}>
           Open
         </Button>
-        <Button icon={<Share16Regular />}>Share</Button>
+        <Button icon={<ShareRegular />}>Share</Button>
       </CardFooter>
     </Card>
   );
diff --git a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
index ba5db2b27a1df..6bb447a64d3f9 100644
--- a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { makeStyles, Button, Caption1, Text, tokens, Subtitle1 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
@@ -77,7 +77,7 @@ export const Orientation = (): JSXElement => {
               </Text>
             }
             description={<Caption1 className={styles.caption}>Developer</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
           />
 
           <p className={styles.text}>
@@ -99,7 +99,7 @@ export const Orientation = (): JSXElement => {
           <CardHeader
             header={<Text weight="semibold">App Name</Text>}
             description={<Caption1 className={styles.caption}>Developer</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
           />
         </Card>
       </section>
diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
index ff4b89776b089..42c9821896146 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, CardProps } from '@fluentui/react-components';
 import { makeStyles, Button, Caption1, tokens, Text } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
@@ -57,7 +57,7 @@ const CardExample = (props: CardProps) => {
       <CardHeader
         header={<Text weight="semibold">iOS App Prototype</Text>}
         description={<Caption1 className={styles.caption}>You created 53m ago</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More actions" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More actions" />}
       />
     </Card>
   );
diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
index 8f406d481ae21..a02732572443a 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { makeStyles, Button, Caption1, tokens, Checkbox, Text, useId } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
 const resolveAsset = (asset: string) => {
@@ -126,7 +126,7 @@ export const SelectableIndicator = (): JSXElement => {
               </Text>
             }
             description={<Caption1 className={styles.caption}>You created 53m ago</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More actions" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More actions" />}
           />
         </Card>
 
@@ -152,7 +152,7 @@ export const SelectableIndicator = (): JSXElement => {
               </Text>
             }
             description={<Caption1 className={styles.caption}>You created 53m ago</Caption1>}
-            action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More actions" />}
+            action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More actions" />}
           />
         </Card>
       </div>
diff --git a/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
index 64b29e2f004d8..098222b750244 100644
--- a/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
@@ -12,12 +12,12 @@ import {
   mergeClasses,
 } from '@fluentui/react-components';
 import {
-  AlertUrgent16Filled,
-  Attach16Regular,
-  CheckmarkCircle16Regular,
-  CircleHalfFill16Regular,
-  Comment16Regular,
-  MoreHorizontal20Regular,
+  AlertUrgentFilled,
+  AttachRegular,
+  CheckmarkCircleRegular,
+  CircleHalfFillRegular,
+  CommentRegular,
+  MoreHorizontalRegular,
 } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-components';
 
@@ -124,20 +124,20 @@ export const Templates = (): JSXElement => {
         </div>
 
         <footer className={mergeClasses(styles.flex, styles.footer)}>
-          <AlertUrgent16Filled primaryFill="#C4314B" />
-          <CircleHalfFill16Regular primaryFill="#0078DB" />
+          <AlertUrgentFilled fontSize={16} primaryFill="#C4314B" />
+          <CircleHalfFillRegular fontSize={16} primaryFill="#0078DB" />
 
           <div className={styles.flex}>
-            <Attach16Regular />
+            <AttachRegular fontSize={16} />
             <Body1>4</Body1>
           </div>
 
           <div className={styles.flex}>
-            <CheckmarkCircle16Regular />
+            <CheckmarkCircleRegular fontSize={16} />
             <Body1>2/12</Body1>
           </div>
 
-          <Comment16Regular />
+          <CommentRegular fontSize={16} />
         </footer>
       </Card>
 
@@ -153,7 +153,7 @@ export const Templates = (): JSXElement => {
             image={{ as: 'img', src: powerpointLogoURL, alt: 'PowerPoint app logo' }}
             header={<Text weight="semibold">Team Offsite 2020</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Presentations</Caption1>}
-            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />} />}
+            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontalRegular />} />}
           />
         </Card>
 
@@ -162,7 +162,7 @@ export const Templates = (): JSXElement => {
             image={{ as: 'img', src: excelLogo, alt: 'Excel app logo' }}
             header={<Text weight="semibold">Team Budget</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Spreadsheets</Caption1>}
-            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />} />}
+            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontalRegular />} />}
           />
         </Card>
 
@@ -171,7 +171,7 @@ export const Templates = (): JSXElement => {
             image={{ as: 'img', src: wordLogo, alt: 'Word app logo' }}
             header={<Text weight="semibold">Secret Project Briefing</Text>}
             description={<Caption1 className={styles.caption}>OneDrive &gt; Documents</Caption1>}
-            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontal20Regular />} />}
+            action={<Button appearance="transparent" aria-label="More actions" icon={<MoreHorizontalRegular />} />}
           />
         </Card>
       </div>
diff --git a/packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx b/packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx
index e325bfb9e31cd..33f42812ac12f 100644
--- a/packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { makeStyles, Button } from '@fluentui/react-components';
-import { ArrowReply16Regular, MoreHorizontal20Regular, Share16Regular } from '@fluentui/react-icons';
+import { ArrowReplyRegular, MoreHorizontalRegular, ShareRegular } from '@fluentui/react-icons';
 import { CardFooter } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -16,10 +16,10 @@ export const Default = (): JSXElement => {
   return (
     <CardFooter
       className={styles.footer}
-      action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+      action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
     >
-      <Button icon={<ArrowReply16Regular />}>Reply</Button>
-      <Button icon={<Share16Regular />}>Share</Button>
+      <Button icon={<ArrowReplyRegular />}>Reply</Button>
+      <Button icon={<ShareRegular />}>Share</Button>
     </CardFooter>
   );
 };
diff --git a/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx b/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx
index 2beef43801ea7..830fc5b1fa574 100644
--- a/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { CardHeader } from '@fluentui/react-components';
 import { makeStyles, Button, Body1, Caption1 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   container: {
@@ -39,7 +39,7 @@ export const Default = (): JSXElement => {
           </Body1>
         }
         description={<Caption1>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <CardHeader
@@ -50,7 +50,7 @@ export const Default = (): JSXElement => {
           </Body1>
         }
         description={<Caption1>Developer</Caption1>}
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <CardHeader
@@ -61,7 +61,7 @@ export const Default = (): JSXElement => {
             <b>App Name</b>
           </Body1>
         }
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <CardHeader
@@ -82,7 +82,7 @@ export const Default = (): JSXElement => {
             <b>App Name</b>
           </Body1>
         }
-        action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />}
+        action={<Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options" />}
       />
 
       <CardHeader
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
index 541b179d50133..4578e222db196 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
+++ b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
@@ -12,7 +12,8 @@ exports[`CarouselAutoplayButton renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -20,7 +21,7 @@ exports[`CarouselAutoplayButton renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9.13 7.18A.75.75 0 0 0 8 7.83v4.34c0 .57.63.94 1.13.65l4.12-2.39a.5.5 0 0 0 0-.86L9.13 7.18ZM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z"
+          d="M9.13 7.18A.75.75 0 0 0 8 7.83v4.34c0 .57.63.94 1.13.65l4.12-2.39a.5.5 0 0 0 0-.86zM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselButton/__snapshots__/CarouselButton.test.tsx.snap b/packages/react-components/react-carousel/library/src/components/CarouselButton/__snapshots__/CarouselButton.test.tsx.snap
index 01f9fb97ffb16..d4aa76118de07 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselButton/__snapshots__/CarouselButton.test.tsx.snap
+++ b/packages/react-components/react-carousel/library/src/components/CarouselButton/__snapshots__/CarouselButton.test.tsx.snap
@@ -13,7 +13,8 @@ exports[`CarouselButton renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -21,7 +22,7 @@ exports[`CarouselButton renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+          d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.47a.5.5 0 0 1-.7-.71L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/__snapshots__/CarouselNavContainer.test.tsx.snap b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/__snapshots__/CarouselNavContainer.test.tsx.snap
index a61594ea66e34..b1e29f8d32747 100644
--- a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/__snapshots__/CarouselNavContainer.test.tsx.snap
+++ b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/__snapshots__/CarouselNavContainer.test.tsx.snap
@@ -15,7 +15,8 @@ exports[`CarouselNavContainer renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -23,7 +24,7 @@ exports[`CarouselNavContainer renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M9.13 7.18A.75.75 0 0 0 8 7.83v4.34c0 .57.63.94 1.13.65l4.12-2.39a.5.5 0 0 0 0-.86L9.13 7.18ZM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14Z"
+            d="M9.13 7.18A.75.75 0 0 0 8 7.83v4.34c0 .57.63.94 1.13.65l4.12-2.39a.5.5 0 0 0 0-.86zM2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14"
             fill="currentColor"
           />
         </svg>
@@ -41,7 +42,8 @@ exports[`CarouselNavContainer renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -49,7 +51,7 @@ exports[`CarouselNavContainer renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M12.35 15.85a.5.5 0 0 1-.7 0L6.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L7.2 10l5.16 5.15c.2.2.2.5 0 .7Z"
+            d="M12.35 15.85a.5.5 0 0 1-.7 0L6.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L7.2 10l5.16 5.15c.2.2.2.5 0 .7"
             fill="currentColor"
           />
         </svg>
@@ -67,7 +69,8 @@ exports[`CarouselNavContainer renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -75,7 +78,7 @@ exports[`CarouselNavContainer renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 0 1-.7-.7L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7Z"
+            d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.47a.5.5 0 0 1-.7-.71L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7"
             fill="currentColor"
           />
         </svg>
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index ff4fe50df8183..3214bcb14984b 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -63,15 +63,16 @@ exports[`Checkbox renders checked 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
           fill="currentColor"
         />
       </svg>
@@ -102,15 +103,16 @@ exports[`Checkbox renders mixed 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M2 4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z"
+          d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
index 7a91a4d571353..628f9e28a25ee 100644
--- a/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx
@@ -12,13 +12,7 @@ import {
   slot,
 } from '@fluentui/react-utilities';
 import type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';
-import {
-  Checkmark12Filled,
-  Checkmark16Filled,
-  Square12Filled,
-  Square16Filled,
-  CircleFilled,
-} from '@fluentui/react-icons';
+import { CheckmarkFilled, SquareFilled, CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 import { useFocusWithin } from '@fluentui/react-tabster';
 
@@ -36,17 +30,17 @@ export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLIn
 
   const state = useCheckboxBase_unstable(checkboxProps, ref);
 
-  // Override indicator children with size+shape-appropriate icon
+  // Override indicator children with the state- and shape-appropriate icon
   const mixed = state.checked === 'mixed';
   let checkmarkIcon;
   if (mixed) {
     if (shape === 'circular') {
       checkmarkIcon = <CircleFilled />;
     } else {
-      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;
+      checkmarkIcon = <SquareFilled />;
     }
   } else if (state.checked) {
-    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;
+    checkmarkIcon = <CheckmarkFilled />;
   }
 
   if (state.indicator) {
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
index a32d7c2e29f26..9c25c2b06b765 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
@@ -19,7 +19,8 @@ exports[`Combobox renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -27,7 +28,7 @@ exports[`Combobox renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
           fill="currentColor"
         />
       </svg>
@@ -40,7 +41,8 @@ exports[`Combobox renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -48,7 +50,7 @@ exports[`Combobox renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
           fill="currentColor"
         />
       </svg>
@@ -78,7 +80,8 @@ exports[`Combobox renders an open listbox 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -86,7 +89,7 @@ exports[`Combobox renders an open listbox 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
           fill="currentColor"
         />
       </svg>
@@ -99,7 +102,8 @@ exports[`Combobox renders an open listbox 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -107,7 +111,7 @@ exports[`Combobox renders an open listbox 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
           fill="currentColor"
         />
       </svg>
@@ -131,7 +135,8 @@ exports[`Combobox renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -139,7 +144,7 @@ exports[`Combobox renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
@@ -158,7 +163,8 @@ exports[`Combobox renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -166,7 +172,7 @@ exports[`Combobox renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
@@ -185,7 +191,8 @@ exports[`Combobox renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -193,7 +200,7 @@ exports[`Combobox renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
index 6ab1a22531350..58b6030b38ddf 100644
--- a/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Combobox/useComboboxStyles.styles.ts
@@ -224,7 +224,7 @@ const useIconStyles = makeStyles({
 
     // the SVG must have display: block for accurate positioning
     // otherwise an extra inline space is inserted after the svg element
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       display: 'block',
     },
 
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react-components/react-combobox/library/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 1c2f44b94f1dc..1307dc4183a68 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -18,7 +18,8 @@ exports[`Dropdown renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -26,7 +27,7 @@ exports[`Dropdown renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
             fill="currentColor"
           />
         </svg>
@@ -39,7 +40,8 @@ exports[`Dropdown renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -47,7 +49,7 @@ exports[`Dropdown renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
           fill="currentColor"
         />
       </svg>
@@ -76,7 +78,8 @@ exports[`Dropdown renders an open listbox 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -84,7 +87,7 @@ exports[`Dropdown renders an open listbox 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
             fill="currentColor"
           />
         </svg>
@@ -97,7 +100,8 @@ exports[`Dropdown renders an open listbox 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -105,7 +109,7 @@ exports[`Dropdown renders an open listbox 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
           fill="currentColor"
         />
       </svg>
@@ -129,7 +133,8 @@ exports[`Dropdown renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -137,7 +142,7 @@ exports[`Dropdown renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
@@ -156,7 +161,8 @@ exports[`Dropdown renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -164,7 +170,7 @@ exports[`Dropdown renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
@@ -183,7 +189,8 @@ exports[`Dropdown renders an open listbox 1`] = `
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -191,7 +198,7 @@ exports[`Dropdown renders an open listbox 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+              d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
               fill="currentColor"
             />
           </svg>
diff --git a/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
index 244ef16f28b09..03927b98925bb 100644
--- a/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts
@@ -217,7 +217,7 @@ const useIconStyles = makeStyles({
 
     // the SVG must have display: block for accurate positioning
     // otherwise an extra inline space is inserted after the svg element
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       display: 'block',
     },
   },
diff --git a/packages/react-components/react-combobox/library/src/components/Listbox/__snapshots__/Listbox.test.tsx.snap b/packages/react-components/react-combobox/library/src/components/Listbox/__snapshots__/Listbox.test.tsx.snap
index a2cda7906d8a3..b3101d29dc267 100644
--- a/packages/react-components/react-combobox/library/src/components/Listbox/__snapshots__/Listbox.test.tsx.snap
+++ b/packages/react-components/react-combobox/library/src/components/Listbox/__snapshots__/Listbox.test.tsx.snap
@@ -21,7 +21,8 @@ exports[`Listbox renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -29,7 +30,7 @@ exports[`Listbox renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
@@ -48,7 +49,8 @@ exports[`Listbox renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -56,7 +58,7 @@ exports[`Listbox renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
@@ -75,7 +77,8 @@ exports[`Listbox renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -83,7 +86,7 @@ exports[`Listbox renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
@@ -115,7 +118,8 @@ exports[`Listbox renders with a selected option 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -123,7 +127,7 @@ exports[`Listbox renders with a selected option 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
@@ -142,7 +146,8 @@ exports[`Listbox renders with a selected option 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -150,7 +155,7 @@ exports[`Listbox renders with a selected option 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
@@ -169,7 +174,8 @@ exports[`Listbox renders with a selected option 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -177,7 +183,7 @@ exports[`Listbox renders with a selected option 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+            d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
             fill="currentColor"
           />
         </svg>
diff --git a/packages/react-components/react-combobox/library/src/components/Option/__snapshots__/Option.test.tsx.snap b/packages/react-components/react-combobox/library/src/components/Option/__snapshots__/Option.test.tsx.snap
index 0ac1d3ba3e382..9e9700dd3626c 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/__snapshots__/Option.test.tsx.snap
+++ b/packages/react-components/react-combobox/library/src/components/Option/__snapshots__/Option.test.tsx.snap
@@ -31,7 +31,8 @@ exports[`Option renders a default single-select state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -39,7 +40,7 @@ exports[`Option renders a default single-select state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06l-9.94 9.94Z"
+          d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
           fill="currentColor"
         />
       </svg>
@@ -63,15 +64,16 @@ exports[`Option renders a selected multi-select state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z"
+          d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx b/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
index 219fbd17933a8..be9e93fdbe31b 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
+++ b/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
-import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
 import { useListboxContext_unstable } from '../../contexts/ListboxContext';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { OptionProps, OptionState } from './Option.types';
@@ -47,7 +47,7 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
   // check icon
   let CheckIcon: React.ReactNode = <CheckmarkFilled />;
   if (state.multiselect) {
-    CheckIcon = state.selected ? <Checkmark12Filled /> : '';
+    CheckIcon = state.selected ? <CheckmarkFilled /> : '';
   }
 
   if (state.checkIcon) {
diff --git a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
index 0cf436b00eb47..4eda526a81fa2 100644
--- a/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
+++ b/packages/react-components/react-combobox/library/src/components/Option/useOptionStyles.styles.ts
@@ -80,7 +80,7 @@ const useStyles = makeStyles({
     marginRight: tokens.spacingHorizontalXXS,
     visibility: 'hidden',
 
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       display: 'block',
     },
   },
diff --git a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx
index 770d5f7de1596..a75cab9825c6c 100644
--- a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { Combobox, makeStyles, Option, OptionGroup, useId } from '@fluentui/react-components';
 import type { ComboboxProps, OptionProps, OptionGroupProps } from '@fluentui/react-components';
-import { CheckmarkCircle20Filled } from '@fluentui/react-icons';
+import { CheckmarkCircleFilled } from '@fluentui/react-icons';
 
 const CustomOption = (props: OptionProps) => {
-  return <Option {...props} checkIcon={<CheckmarkCircle20Filled />} />;
+  return <Option {...props} checkIcon={<CheckmarkCircleFilled />} />;
 };
 
 const CustomOptionGroup = (props: Partial<OptionGroupProps> & { options: string[] }) => {
diff --git a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx
index 114378ba23979..79dee0268166f 100644
--- a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { Button, Combobox, makeStyles, Option, tokens, useId } from '@fluentui/react-components';
 import type { ComboboxProps } from '@fluentui/react-components';
-import { Dismiss12Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -74,7 +74,7 @@ export const MultiselectWithTags = (props: Partial<ComboboxProps>): JSXElement =
                 size="small"
                 shape="circular"
                 appearance="primary"
-                icon={<Dismiss12Regular />}
+                icon={<DismissRegular />}
                 iconPosition="after"
                 onClick={() => onTagClick(option, i)}
                 id={`${comboId}-remove-${i}`}
diff --git a/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx b/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx
index 8e3a69270e12c..3576f2af4dcc1 100644
--- a/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx
+++ b/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx
@@ -3,20 +3,20 @@ import type { JSXElement } from '@fluentui/react-components';
 import { Dropdown, makeStyles, Option, OptionGroup, useId } from '@fluentui/react-components';
 import type { DropdownProps, OptionProps, OptionGroupProps } from '@fluentui/react-components';
 import {
-  AnimalCat24Filled,
-  AnimalDog24Filled,
-  AnimalRabbit24Filled,
-  AnimalTurtle24Filled,
-  FoodFish24Filled,
-  CheckboxChecked24Regular,
+  AnimalCatFilled,
+  AnimalDogFilled,
+  AnimalRabbitFilled,
+  AnimalTurtleFilled,
+  FoodFishFilled,
+  CheckboxCheckedRegular,
 } from '@fluentui/react-icons';
 
 const animalIcons = {
-  Cat: AnimalCat24Filled,
-  Dog: AnimalDog24Filled,
-  Rabbit: AnimalRabbit24Filled,
-  Turtle: AnimalTurtle24Filled,
-  Fish: FoodFish24Filled,
+  Cat: AnimalCatFilled,
+  Dog: AnimalDogFilled,
+  Rabbit: AnimalRabbitFilled,
+  Turtle: AnimalTurtleFilled,
+  Fish: FoodFishFilled,
 };
 
 const useCustomOptionStyles = makeStyles({
@@ -36,7 +36,7 @@ const CustomOption = (props: CustomOptionProps) => {
   const Icon = animalIcons[animal];
   const styles = useCustomOptionStyles();
   return (
-    <Option text={animal} className={styles.option} checkIcon={<CheckboxChecked24Regular />} {...optionProps}>
+    <Option text={animal} className={styles.option} checkIcon={<CheckboxCheckedRegular />} {...optionProps}>
       <Icon className={styles.icon} />
       <span className={styles.text}>{animal}</span>
     </Option>
diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index b06f55781009a..e4ee5f3cd02b4 100644
--- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -26,7 +26,8 @@ Object {
         >
           <svg
             aria-hidden="true"
-            class=""
+            class="fui-Icon"
+            data-fui-icon=""
             fill="currentColor"
             height="1em"
             viewBox="0 0 20 20"
@@ -34,7 +35,7 @@ Object {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+              d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
               fill="currentColor"
             />
           </svg>
@@ -64,7 +65,8 @@ Object {
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -72,7 +74,7 @@ Object {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+            d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
             fill="currentColor"
           />
         </svg>
diff --git a/packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitle.tsx
index 9cc36b5f7d668..daa4d068040bb 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitle.tsx
+++ b/packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitle.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
-import { Dismiss20Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
 import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 
@@ -46,7 +46,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
               // TODO: find a better way to add internal labels
               aria-label="close"
             >
-              <Dismiss20Regular />
+              <DismissRegular fontSize={20} />
             </button>
           </DialogTrigger>
         ),
diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
index 85b9ec74ba823..b3a2492463048 100644
--- a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
+++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx
@@ -21,7 +21,7 @@ import {
   makeStyles,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import story from './DialogBackdropAppearance.md';
 
 const useStyles = makeStyles({
@@ -57,7 +57,7 @@ export const BackdropAppearance = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setDrawerOpen(false)}
               />
             }
diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx b/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx
index f5640724fc52e..c74d25a57c90e 100644
--- a/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx
+++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx
@@ -10,7 +10,7 @@ import {
   Button,
 } from '@fluentui/react-components';
 import story from './DialogTitleCustomAction.md';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 export const TitleCustomAction = (): JSXElement => {
   return (
@@ -23,7 +23,7 @@ export const TitleCustomAction = (): JSXElement => {
           <DialogTitle
             action={
               <DialogTrigger action="close">
-                <Button appearance="subtle" aria-label="close" icon={<Dismiss24Regular />} />
+                <Button appearance="subtle" aria-label="close" icon={<DismissRegular />} />
               </DialogTrigger>
             }
           >
diff --git a/packages/react-components/react-drawer/library/README.md b/packages/react-components/react-drawer/library/README.md
index 6915c5e62cc16..a619ac3bc21c7 100644
--- a/packages/react-components/react-drawer/library/README.md
+++ b/packages/react-components/react-drawer/library/README.md
@@ -27,7 +27,7 @@ Simple example of Drawer Usage:
 ```tsx
 import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-components';
 import { Button } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 export const App = () => (
   <Drawer type="inline" open>
@@ -37,7 +37,7 @@ export const App = () => (
           <Button
             appearance="subtle"
             aria-label="Close drawer"
-            icon={<Dismiss24Regular />}
+            icon={<DismissRegular />}
             onClick={() => setIsOpen(false)}
           />
         }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx
index 74296158f3b8c..8ee985b1cb16e 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx
@@ -13,7 +13,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   main: {
@@ -51,12 +51,7 @@ export const CustomSize = (): JSXElement => {
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
-              <Button
-                appearance="subtle"
-                aria-label="Close"
-                icon={<Dismiss24Regular />}
-                onClick={() => setOpen(false)}
-              />
+              <Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} onClick={() => setOpen(false)} />
             }
           >
             Drawer with {customSize}px size
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
index e4bff1aebf1f9..7888a6ed526f1 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
@@ -16,7 +16,7 @@ import {
   useRestoreFocusTarget,
   ToggleButton,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -74,7 +74,7 @@ export const Default = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
index d979884be2297..794109464d99e 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx
@@ -16,7 +16,7 @@ import {
   useRestoreFocusTarget,
   ToggleButton,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -75,7 +75,7 @@ export const KeepRenderedInTheDOM = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx
index 3e1091ff1c94d..02ba7a6957e37 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx
@@ -9,7 +9,7 @@ import {
   motionTokens,
   tokens,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 
@@ -141,7 +141,7 @@ export const MotionCustom = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
index 1c0525673ddec..1b6f65d96b67e 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx
@@ -15,7 +15,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -75,7 +75,7 @@ export const MotionDisabled = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
index d81eeb42acc2d..6e60f3924a703 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx
@@ -18,7 +18,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular, Calendar24Regular, Settings24Regular, ArrowLeft24Regular } from '@fluentui/react-icons';
+import { DismissRegular, CalendarRegular, SettingsRegular, ArrowLeftRegular } from '@fluentui/react-icons';
 import { fadeAtom, Scale, slideAtom } from '@fluentui/react-motion-components-preview';
 
 const useStyles = makeStyles({
@@ -100,7 +100,7 @@ export const MultipleLevels = (): JSXElement => {
                   <ToolbarButton
                     aria-label="Back"
                     appearance="subtle"
-                    icon={<ArrowLeft24Regular />}
+                    icon={<ArrowLeftRegular />}
                     onClick={() => setLevel(1)}
                   />
                 </IconPresenceMotion>
@@ -111,15 +111,15 @@ export const MultipleLevels = (): JSXElement => {
                   <ToolbarButton
                     aria-label="Go to calendar"
                     appearance="subtle"
-                    icon={<Calendar24Regular />}
+                    icon={<CalendarRegular />}
                     onClick={() => setLevel(2)}
                   />
                 </IconPresenceMotion>
-                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<Settings24Regular />} />
+                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<SettingsRegular />} />
                 <ToolbarButton
                   aria-label="Close panel"
                   appearance="subtle"
-                  icon={<Dismiss24Regular />}
+                  icon={<DismissRegular />}
                   onClick={() => setIsOpen(false)}
                 />
               </ToolbarGroup>
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
index f6785ca300625..a9b85596da397 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx
@@ -11,7 +11,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   content: {
@@ -64,7 +64,7 @@ export const Position = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx
index eed9ed1daed21..590f454063a8c 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx
@@ -9,7 +9,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 export const PreventClose = (): JSXElement => {
   const [open, setOpen] = React.useState(false);
@@ -25,12 +25,7 @@ export const PreventClose = (): JSXElement => {
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
-              <Button
-                appearance="subtle"
-                aria-label="Close"
-                icon={<Dismiss24Regular />}
-                onClick={() => setOpen(false)}
-              />
+              <Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} onClick={() => setOpen(false)} />
             }
           >
             Prevent close with Esc or outside click
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
index c3964b8ba776d..4e548fcd3047c 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx
@@ -21,7 +21,7 @@ import {
   DialogContent,
   shorthands,
 } from '@fluentui/react-components';
-import { Dismiss20Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const MIN_SIDEBAR_WIDTH = 240;
 const useStyles = makeStyles({
@@ -222,7 +222,7 @@ export const Resizable = (): JSXElement => {
                 <DialogTitle
                   action={
                     <DialogTrigger action="close">
-                      <Button appearance="subtle" aria-label="close" icon={<Dismiss20Regular />} />
+                      <Button appearance="subtle" aria-label="close" icon={<DismissRegular />} />
                     </DialogTrigger>
                   }
                 >
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
index 500ffe3a48ece..9215e26ab7da3 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx
@@ -11,7 +11,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -77,7 +77,7 @@ export const Responsive = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
index 9f598a07f6b2d..9a9ef0f771de5 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx
@@ -10,7 +10,7 @@ import {
   tokens,
   mergeClasses,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -48,7 +48,7 @@ const DrawerSeparatorExample: React.FC<DrawerSeparatorExampleProps> = ({ open, s
       <DrawerHeader>
         <DrawerHeaderTitle
           action={
-            <Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setOpen(false)} />
+            <Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} onClick={() => setOpen(false)} />
           }
         >
           Drawer with separator
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
index bdea618ebfeac..464bb231b7884 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx
@@ -15,7 +15,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   main: {
@@ -63,12 +63,7 @@ export const Size = (): JSXElement => {
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
-              <Button
-                appearance="subtle"
-                aria-label="Close"
-                icon={<Dismiss24Regular />}
-                onClick={() => setOpen(false)}
-              />
+              <Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} onClick={() => setOpen(false)} />
             }
           >
             {labelMap[size]} size
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx
index 877fad49f9786..f0cce32665842 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx
@@ -14,12 +14,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import {
-  Dismiss24Regular,
-  ArrowClockwise24Regular,
-  Settings24Regular,
-  ArrowLeft24Regular,
-} from '@fluentui/react-icons';
+import { DismissRegular, ArrowClockwiseRegular, SettingsRegular, ArrowLeftRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   header: {
@@ -48,15 +43,15 @@ export const WithNavigation = (): JSXElement => {
       >
         <DrawerHeader>
           <DrawerHeaderNavigation className={styles.header}>
-            <Button aria-label="Back" appearance="subtle" icon={<ArrowLeft24Regular />} />
+            <Button aria-label="Back" appearance="subtle" icon={<ArrowLeftRegular />} />
             <Toolbar>
               <ToolbarGroup>
-                <ToolbarButton aria-label="Reload content" appearance="subtle" icon={<ArrowClockwise24Regular />} />
-                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<Settings24Regular />} />
+                <ToolbarButton aria-label="Reload content" appearance="subtle" icon={<ArrowClockwiseRegular />} />
+                <ToolbarButton aria-label="Settings" appearance="subtle" icon={<SettingsRegular />} />
                 <ToolbarButton
                   aria-label="Close panel"
                   appearance="subtle"
-                  icon={<Dismiss24Regular />}
+                  icon={<DismissRegular />}
                   onClick={() => setIsOpen(false)}
                 />
               </ToolbarGroup>
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx
index f93914329268d..c1e3324219556 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { InlineDrawer, DrawerHeader, DrawerHeaderTitle, Button, makeStyles } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   drawer: {
@@ -16,7 +16,7 @@ export const WithTitle = (): JSXElement => {
       <DrawerHeader>
         <DrawerHeaderTitle>Drawer with title</DrawerHeaderTitle>
         <DrawerHeaderTitle heading={{ as: 'h1' }}>Drawer with custom tag</DrawerHeaderTitle>
-        <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} />}>
+        <DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} />}>
           Drawer with title and action
         </DrawerHeaderTitle>
       </DrawerHeader>
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
index 3ad34d7b0fccc..73ff75bb533d1 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
@@ -13,7 +13,7 @@ import {
   useRestoreFocusTarget,
   ToggleButton,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -69,7 +69,7 @@ const DrawerInlineExample: React.FC<DrawerInlineExampleProps> = ({ setOpen, ...p
       <DrawerHeader>
         <DrawerHeaderTitle
           action={
-            <Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={() => setOpen(false)} />
+            <Button appearance="subtle" aria-label="Close" icon={<DismissRegular />} onClick={() => setOpen(false)} />
           }
         >
           {capitalize(props.position!)} Inline Drawer
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx
index 0665a4a4c309e..268e5c3a80ff2 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx
@@ -9,7 +9,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 export const Overlay = (): JSXElement => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -33,7 +33,7 @@ export const Overlay = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx
index 07a1d9f49c4b1..fec38cef32370 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx
@@ -9,7 +9,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 export const OverlayNoModal = (): JSXElement => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -33,7 +33,7 @@ export const OverlayNoModal = (): JSXElement => {
               <Button
                 appearance="subtle"
                 aria-label="Close"
-                icon={<Dismiss24Regular />}
+                icon={<DismissRegular />}
                 onClick={() => setIsOpen(false)}
               />
             }
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx
index e9e6d0a816067..f982f9972f41f 100644
--- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx
+++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx
@@ -11,7 +11,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -57,7 +57,7 @@ export const OverlayInsideContainer = (): JSXElement => {
                 <Button
                   appearance="subtle"
                   aria-label="Close"
-                  icon={<Dismiss24Regular />}
+                  icon={<DismissRegular />}
                   onClick={() => setIsOpen(false)}
                 />
               }
diff --git a/packages/react-components/react-field/library/src/components/Field/Field.types.ts b/packages/react-components/react-field/library/src/components/Field/Field.types.ts
index 3568de1598e52..e180f3f9df25b 100644
--- a/packages/react-components/react-field/library/src/components/Field/Field.types.ts
+++ b/packages/react-components/react-field/library/src/components/Field/Field.types.ts
@@ -31,9 +31,9 @@ export type FieldSlots = {
    * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.
    *
    * The default depends on `validationState`:
-   * * error: `<ErrorCircle12Filled />`
-   * * warning: `<Warning12Filled />`
-   * * success: `<CheckmarkCircle12Filled />`
+   * * error: `<ErrorCircleFilled />`
+   * * warning: `<WarningFilled />`
+   * * success: `<CheckmarkCircleFilled />`
    * * none: `null`
    */
   validationMessageIcon?: Slot<'span'>;
diff --git a/packages/react-components/react-field/library/src/components/Field/useField.tsx b/packages/react-components/react-field/library/src/components/Field/useField.tsx
index add8cb321031e..e940267b3334e 100644
--- a/packages/react-components/react-field/library/src/components/Field/useField.tsx
+++ b/packages/react-components/react-field/library/src/components/Field/useField.tsx
@@ -2,16 +2,16 @@
 
 import * as React from 'react';
 
-import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
+import { CheckmarkCircleFilled, DiamondDismissFilled, WarningFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 import { slot } from '@fluentui/react-utilities';
 import type { FieldProps, FieldState } from './Field.types';
 import { useFieldBase_unstable } from './useFieldBase';
 
 const validationMessageIcons = {
-  error: <DiamondDismiss12Filled />,
-  warning: <Warning12Filled />,
-  success: <CheckmarkCircle12Filled />,
+  error: <DiamondDismissFilled />,
+  warning: <WarningFilled />,
+  success: <CheckmarkCircleFilled />,
   none: undefined,
 } as const;
 
diff --git a/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx b/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx
index ab52b21dc057a..02553303d6724 100644
--- a/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx
+++ b/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 
 import { Field, makeStyles } from '@fluentui/react-components';
-import { AnimalCat24Regular } from '@fluentui/react-icons';
+import { AnimalCatRegular } from '@fluentui/react-icons';
 
 const useCatInputStyles = makeStyles({
   root: {
@@ -16,7 +16,7 @@ const CatInput: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = props =>
   const styles = useCatInputStyles();
   return (
     <div className={styles.root}>
-      <AnimalCat24Regular />
+      <AnimalCatRegular fontSize={24} />
       <input {...props} />
     </div>
   );
diff --git a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
index 0e2a4177c4321..d6f3b584acdf3 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InfoLabel } from '@fluentui/react-headless-components-preview/info-label';
-import { Info16Regular } from '@fluentui/react-icons';
+import { InfoRegular } from '@fluentui/react-icons';
 
 import styles from './info-label.module.css';
 
@@ -18,7 +18,7 @@ export const Default = (): React.ReactNode => (
     }}
     infoButton={{
       className: styles.infoButton,
-      children: <Info16Regular />,
+      children: <InfoRegular fontSize={16} />,
     }}
   >
     Example label
diff --git a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelInField.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelInField.stories.tsx
index 888c18ccd8521..e0a1fec174120 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelInField.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelInField.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Info16Regular } from '@fluentui/react-icons';
+import { InfoRegular } from '@fluentui/react-icons';
 import { Field } from '@fluentui/react-headless-components-preview/field';
 import { InfoLabel } from '@fluentui/react-headless-components-preview/info-label';
 import { Input } from '@fluentui/react-headless-components-preview/input';
@@ -18,7 +18,7 @@ export const InField = (): React.ReactNode => (
           {...props}
           className={infoLabelStyles.infoLabel}
           info={{ className: infoLabelStyles.popover, children: 'Example info' }}
-          infoButton={{ className: infoLabelStyles.infoButton, children: <Info16Regular /> }}
+          infoButton={{ className: infoLabelStyles.infoButton, children: <InfoRegular fontSize={16} /> }}
         >
           Field with info label
         </InfoLabel>
diff --git a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelRequired.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelRequired.stories.tsx
index 6b367ce03a16c..6b70f7355239a 100644
--- a/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelRequired.stories.tsx
+++ b/packages/react-components/react-headless-components-preview/stories/src/InfoLabel/InfoLabelRequired.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InfoLabel } from '@fluentui/react-headless-components-preview/info-label';
-import { Info16Regular } from '@fluentui/react-icons';
+import { InfoRegular } from '@fluentui/react-icons';
 
 import styles from './info-label.module.css';
 
@@ -18,7 +18,7 @@ export const Required = (): React.ReactNode => (
     }}
     infoButton={{
       className: styles.infoButton,
-      children: <Info16Regular />,
+      children: <InfoRegular fontSize={16} />,
     }}
     required={{ className: styles.required, children: '*' }}
   >
diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/DefaultInfoButtonIcons.tsx b/packages/react-components/react-infolabel/library/src/components/InfoButton/DefaultInfoButtonIcons.tsx
index 463159b2ae819..95bb5b1cf4032 100644
--- a/packages/react-components/react-infolabel/library/src/components/InfoButton/DefaultInfoButtonIcons.tsx
+++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/DefaultInfoButtonIcons.tsx
@@ -1,13 +1,3 @@
-import {
-  Info12Regular,
-  Info12Filled,
-  Info16Regular,
-  Info16Filled,
-  Info20Regular,
-  Info20Filled,
-  bundleIcon,
-} from '@fluentui/react-icons';
+import { InfoRegular, InfoFilled, bundleIcon } from '@fluentui/react-icons';
 
-export const DefaultInfoButtonIcon12 = bundleIcon(Info12Filled, Info12Regular);
-export const DefaultInfoButtonIcon16 = bundleIcon(Info16Filled, Info16Regular);
-export const DefaultInfoButtonIcon20 = bundleIcon(Info20Filled, Info20Regular);
+export const DefaultInfoButtonIcon = bundleIcon(InfoFilled, InfoRegular);
diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx
index e336afd5ef0c4..4b1e836cdca8e 100644
--- a/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/useInfoButton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
+import { DefaultInfoButtonIcon } from './DefaultInfoButtonIcons';
 import {
   getIntrinsicElementProps,
   mergeCallbacks,
@@ -15,10 +15,10 @@ import { Popover, PopoverSurface } from '@fluentui/react-popover';
 import type { InfoButtonProps, InfoButtonState } from './InfoButton.types';
 import type { PopoverProps } from '@fluentui/react-popover';
 
-const infoButtonIconMap = {
-  small: <DefaultInfoButtonIcon12 />,
-  medium: <DefaultInfoButtonIcon16 />,
-  large: <DefaultInfoButtonIcon20 />,
+const infoButtonIconSizeMap = {
+  small: 12,
+  medium: 16,
+  large: 20,
 } as const;
 
 const popoverSizeMap = {
@@ -54,7 +54,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
     root: slot.always(
       // eslint-disable-next-line react-hooks/refs
       getIntrinsicElementProps('button', {
-        children: infoButtonIconMap[size],
+        children: <DefaultInfoButtonIcon fontSize={infoButtonIconSizeMap[size]} />,
         type: 'button',
         'aria-label': 'information',
         ...rest,
diff --git a/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts b/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts
index 57e013b7c2dfc..d9c04155e4133 100644
--- a/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts
+++ b/packages/react-components/react-input/library/src/components/Input/useInputStyles.styles.ts
@@ -306,7 +306,7 @@ const useContentClassName = makeResetStyles({
   display: 'flex',
   // special case styling for icons (most common case) to ensure they're centered vertically
   // size: medium (default)
-  '> svg': { fontSize: '20px' },
+  '> svg, > :where([data-fui-icon])': { fontSize: '20px' },
 });
 
 const useContentStyles = makeStyles({
@@ -315,13 +315,13 @@ const useContentStyles = makeStyles({
   },
   // Ensure resizable icons show up with the proper font size
   small: {
-    '> svg': { fontSize: '16px' },
+    '> svg, > :where([data-fui-icon])': { fontSize: '16px' },
   },
   medium: {
     // included in useContentClassName
   },
   large: {
-    '> svg': { fontSize: '24px' },
+    '> svg, > :where([data-fui-icon])': { fontSize: '24px' },
   },
 });
 
diff --git a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
index 2d98dbf10c0e1..2f361e2a7e18f 100644
--- a/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx
@@ -1,5 +1,5 @@
 import { Button, makeStyles, Persona, mergeClasses, Text, tokens } from '@fluentui/react-components';
-import { Mic16Regular } from '@fluentui/react-icons';
+import { MicRegular } from '@fluentui/react-icons';
 import { List, ListItem } from '@fluentui/react-components';
 import * as React from 'react';
 import type { JSXElement, SelectionItemId } from '@fluentui/react-components';
@@ -105,7 +105,7 @@ export const ListActiveElement = (): JSXElement => {
               <Button
                 aria-label={`Mute ${name}`}
                 size="small"
-                icon={<Mic16Regular />}
+                icon={<MicRegular />}
                 onClick={e => {
                   e.stopPropagation();
                   alert(`Muting ${name}`);
diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx b/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx
index d10be0f84524f..5a3150eb59adc 100644
--- a/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx
@@ -13,7 +13,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { List, ListItem } from '@fluentui/react-components';
 
 import * as React from 'react';
@@ -122,7 +122,7 @@ const CustomListItem = (props: { title: string; value: string }) => {
                 e.preventDefault();
               }}
               appearance="transparent"
-              icon={<MoreHorizontal20Regular />}
+              icon={<MoreHorizontalRegular />}
               aria-label="More actions"
             />
           </MenuTrigger>
diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx b/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx
index 1a951bb422a57..b5303d8aec9de 100644
--- a/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx
@@ -13,7 +13,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { List, ListItem } from '@fluentui/react-components';
 
 import * as React from 'react';
@@ -111,7 +111,7 @@ const CustomListItem = (props: { title: string; value: string }) => {
                 e.preventDefault();
               }}
               appearance="transparent"
-              icon={<MoreHorizontal20Regular />}
+              icon={<MoreHorizontalRegular />}
               aria-label="More actions"
             />
           </MenuTrigger>
diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx b/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx
index 6e200a5525e22..b58dc1a1723b8 100644
--- a/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx
+++ b/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx
@@ -13,7 +13,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { List, ListItem } from '@fluentui/react-components';
 
 import * as React from 'react';
@@ -109,7 +109,7 @@ const CustomListItem = (props: { title: string; value: string }) => {
           <MenuTrigger disableButtonEnhancement>
             <Button
               appearance="transparent"
-              icon={<MoreHorizontal20Regular />}
+              icon={<MoreHorizontalRegular />}
               onClick={e => e.preventDefault()}
               aria-label="More actions"
             />
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 1c400aadd6fe1..71ac26df571c5 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -13,15 +13,17 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
+      class="fui-Icon"
+      data-fui-icon=""
       fill="currentColor"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      font-size="16"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 0 1 4.9 12L2.22 9.28a.75.75 0 1 1 1.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 0 1 1.06.04Z"
+        d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
         fill="currentColor"
       />
     </svg>
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.test.tsx
index ab03b4af040e1..4efb59fe96488 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.test.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import { Checkmark16Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
 import { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';
 import { MenuListProvider } from '../../contexts/menuListContext';
 import { MenuProvider } from '../../contexts/menuContext';
@@ -179,7 +179,7 @@ describe('useMenuItemCheckbox_unstable', () => {
   });
 
   describe('checkmark slot — default icon injection', () => {
-    it('injects Checkmark16Filled when no checkmark.children provided', () => {
+    it('injects CheckmarkFilled when no checkmark.children provided', () => {
       const ref = React.createRef<ARIAButtonElement<'div'>>();
 
       const { result } = renderHook(() => useMenuItemCheckbox_unstable({ name: 'foo', value: '1' }, ref), {
@@ -188,10 +188,10 @@ describe('useMenuItemCheckbox_unstable', () => {
 
       const children = result.current.checkmark?.children as React.ReactElement;
       expect(children).toBeDefined();
-      expect(children.type).toBe(Checkmark16Filled);
+      expect(children.type).toBe(CheckmarkFilled);
     });
 
-    it('preserves user-provided checkmark children over default Checkmark16Filled', () => {
+    it('preserves user-provided checkmark children over default CheckmarkFilled', () => {
       const ref = React.createRef<ARIAButtonElement<'div'>>();
       const customIcon = React.createElement('span', { 'data-testid': 'custom-checkmark' });
 
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx
index 899f26d39d724..430b55f80ab5f 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
-import { Checkmark16Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
 import type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';
@@ -17,7 +17,7 @@ export const useMenuItemCheckbox_unstable = (
 
   // Set default checkmark icon
   if (state.checkmark) {
-    state.checkmark.children ??= <Checkmark16Filled />;
+    state.checkmark.children ??= <CheckmarkFilled fontSize={16} />;
   }
 
   return state;
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index a437b996daab4..134c8e82bd850 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-components/react-menu/library/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -13,15 +13,17 @@ exports[`MenuItemRadio renders a default state 1`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
+      class="fui-Icon"
+      data-fui-icon=""
       fill="currentColor"
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
+      font-size="16"
+      height="1em"
+      viewBox="0 0 20 20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 0 1 4.9 12L2.22 9.28a.75.75 0 1 1 1.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 0 1 1.06.04Z"
+        d="M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z"
         fill="currentColor"
       />
     </svg>
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.test.tsx
index 78ec9c8d03a89..3f4f91db9cb65 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.test.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import { Checkmark16Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
 import { useMenuItemRadio_unstable } from './useMenuItemRadio';
 import { MenuListProvider } from '../../contexts/menuListContext';
 import { MenuProvider } from '../../contexts/menuContext';
@@ -168,7 +168,7 @@ describe('useMenuItemRadio_unstable', () => {
   });
 
   describe('checkmark slot — default icon injection', () => {
-    it('injects Checkmark16Filled when no checkmark.children provided', () => {
+    it('injects CheckmarkFilled when no checkmark.children provided', () => {
       const ref = React.createRef<ARIAButtonElement<'div'>>();
 
       const { result } = renderHook(() => useMenuItemRadio_unstable({ name: 'foo', value: '1' }, ref), {
@@ -177,10 +177,10 @@ describe('useMenuItemRadio_unstable', () => {
 
       const children = result.current.checkmark?.children as React.ReactElement;
       expect(children).toBeDefined();
-      expect(children.type).toBe(Checkmark16Filled);
+      expect(children.type).toBe(CheckmarkFilled);
     });
 
-    it('preserves user-provided checkmark children over default Checkmark16Filled', () => {
+    it('preserves user-provided checkmark children over default CheckmarkFilled', () => {
       const ref = React.createRef<ARIAButtonElement<'div'>>();
       const customIcon = React.createElement('span', { 'data-testid': 'custom-checkmark' });
 
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx b/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx
index bbc9d0c2b9ac6..037558153f56d 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemRadio/useMenuItemRadio.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
-import { Checkmark16Filled } from '@fluentui/react-icons';
+import { CheckmarkFilled } from '@fluentui/react-icons';
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuItemBase_unstable } from '../MenuItem/useMenuItemBase';
 import type {
@@ -24,7 +24,7 @@ export const useMenuItemRadio_unstable = (
 
   // Set default checkmark icon
   if (state.checkmark) {
-    state.checkmark.children ??= <Checkmark16Filled />;
+    state.checkmark.children ??= <CheckmarkFilled fontSize={16} />;
   }
 
   return state;
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/__snapshots__/MenuItemSwitch.test.tsx.snap b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/__snapshots__/MenuItemSwitch.test.tsx.snap
index 77c8dea17059a..bf0923eb2750d 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/__snapshots__/MenuItemSwitch.test.tsx.snap
+++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/__snapshots__/MenuItemSwitch.test.tsx.snap
@@ -19,7 +19,8 @@ exports[`MenuItemSwitch renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="fui-MenuItemSwitch__switchIndicator__circleFilled"
+        class="fui-Icon fui-MenuItemSwitch__switchIndicator__circleFilled"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -27,7 +28,7 @@ exports[`MenuItemSwitch renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"
+          d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
index f13409918fc8c..452eedf8bd9b9 100644
--- a/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
+++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -12,7 +12,8 @@ exports[`MessageBar renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -20,7 +21,7 @@ exports[`MessageBar renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"
+          d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0M9.5 8.91a.5.5 0 0 1 1 0v4.69a.5.5 0 0 1-1 0V8.9m-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
index e3588ec34f365..54b26a5bdeb46 100644
--- a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
+++ b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
@@ -277,7 +277,7 @@ export type StyledTextSlots = {
 };
 
 // @public (undocumented)
-export const useFlexStyles: () => Record<"flex" | "fill" | "inline" | "column" | "wrap" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
+export const useFlexStyles: () => Record<"fill" | "flex" | "inline" | "column" | "wrap" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;
 
 // @public (undocumented)
 export const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>;
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentIcon.styles.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentIcon.styles.ts
index 5e57fea619ea5..ace807d7a0e58 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentIcon.styles.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentIcon.styles.ts
@@ -10,7 +10,7 @@ export const useAttachmentIconStyles = makeStyles({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       height: '100%',
       width: '100%',
     },
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts b/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
index f077825d0a4a6..d2f7537f4272c 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Button/ButtonMigration.mixins.ts
@@ -26,7 +26,7 @@ export const v9HoverClasses = (): GriffelStyle => ({
 
 export const v9Icon = (): GriffelStyle => ({
   // styles that allow to keep consistent size of v9 icon with v0 icon
-  '& svg': {
+  '& svg, & :where([data-fui-icon])': {
     width: '100%',
     paddingBottom: '100%',
     // negative margin is necessary here for centering v9 icon
@@ -38,7 +38,7 @@ export const v9Icon = (): GriffelStyle => ({
 });
 
 export const v9CustomSizeIcon = (): GriffelStyle => ({
-  '& svg': { overflow: 'visible' },
+  '& svg, & :where([data-fui-icon])': { overflow: 'visible' },
   ...v9HoverClasses(),
 });
 
diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Button/__snapshots__/ButtonMigration.mixins.test.ts.snap b/packages/react-components/react-migration-v0-v9/library/src/components/Button/__snapshots__/ButtonMigration.mixins.test.ts.snap
index 13684670df15b..43f93ad8dd571 100644
--- a/packages/react-components/react-migration-v0-v9/library/src/components/Button/__snapshots__/ButtonMigration.mixins.test.ts.snap
+++ b/packages/react-components/react-migration-v0-v9/library/src/components/Button/__snapshots__/ButtonMigration.mixins.test.ts.snap
@@ -8,7 +8,7 @@ Object {
   "& .fui-Icon-regular": Object {
     "display": "inline",
   },
-  "& svg": Object {
+  "& svg, & :where([data-fui-icon])": Object {
     "margin": "-4px 0 0 -4px",
     "overflow": "visible",
     "paddingBottom": "100%",
@@ -33,7 +33,7 @@ Object {
   "& .fui-Icon-regular": Object {
     "display": "inline",
   },
-  "& svg": Object {
+  "& svg, & :where([data-fui-icon])": Object {
     "overflow": "visible",
   },
   "&:hover": Object {
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
index f23fd00d20e4f..7fe3d56f79857 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.stories.tsx
@@ -3,7 +3,7 @@ import StaggerStaggerInDescription from './StaggerStaggerIn.stories.md';
 import type { PresenceBadgeStatus, JSXElement } from '@fluentui/react-components';
 import { Avatar, Button, Card, CardHeader, Text, makeStyles, motionTokens, tokens } from '@fluentui/react-components';
 import { Stagger, CollapseRelaxed } from '@fluentui/react-motion-components-preview';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 
 const useClasses = makeStyles({
   container: {
@@ -110,7 +110,7 @@ export const StaggerIn = (): JSXElement => {
                     </Text>
                   </div>
                 }
-                action={<Button appearance="subtle" icon={<MoreHorizontal20Regular />} size="small" />}
+                action={<Button appearance="subtle" icon={<MoreHorizontalRegular />} size="small" />}
               />
 
               <div className={classes.cardContent}>
diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
index 1b7604fe60dfb..0c0ed541fb717 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PresenceBadgeStatus, JSXElement } from '@fluentui/react-components';
 import { Avatar, Button, Card, CardHeader, Text, makeStyles, motionTokens, tokens } from '@fluentui/react-components';
 import { Stagger, Collapse } from '@fluentui/react-motion-components-preview';
-import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import StaggerStaggerOutDescription from './StaggerStaggerOut.stories.md';
 
 const useClasses = makeStyles({
@@ -112,7 +112,7 @@ export const StaggerOut = (): JSXElement => {
                     </Text>
                   </div>
                 }
-                action={<Button appearance="subtle" icon={<MoreHorizontal20Regular />} size="small" />}
+                action={<Button appearance="subtle" icon={<MoreHorizontalRegular />} size="small" />}
               />
 
               <div className={classes.cardContent}>
diff --git a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx
index bfc6326520026..0b1a4a3654f6e 100644
--- a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx
+++ b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.stories.tsx
@@ -18,7 +18,7 @@ import {
   motionTokens,
   tokens,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 import description from './CustomMotion.stories.md';
 
@@ -237,7 +237,7 @@ const DrawerExample = () => {
                 <Button
                   appearance="subtle"
                   aria-label="Close"
-                  icon={<Dismiss24Regular />}
+                  icon={<DismissRegular />}
                   onClick={() => setIsOpen(false)}
                 />
               }
diff --git a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx
index 350f98869763c..4d1e90176c6d7 100644
--- a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx
+++ b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.stories.tsx
@@ -18,7 +18,7 @@ import {
   useRestoreFocusSource,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Dismiss24Regular } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 
 import description from './DisableMotion.stories.md';
 
@@ -156,7 +156,7 @@ const DrawerExample = () => {
                 <Button
                   appearance="subtle"
                   aria-label="Close"
-                  icon={<Dismiss24Regular />}
+                  icon={<DismissRegular />}
                   onClick={() => setIsOpen(false)}
                 />
               }
diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/useHamburger.tsx b/packages/react-components/react-nav/library/src/components/Hamburger/useHamburger.tsx
index 3b1e403cf8c55..4bf051df2d3af 100644
--- a/packages/react-components/react-nav/library/src/components/Hamburger/useHamburger.tsx
+++ b/packages/react-components/react-nav/library/src/components/Hamburger/useHamburger.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useButton_unstable } from '@fluentui/react-button';
-import { Navigation20Filled } from '@fluentui/react-icons';
+import { NavigationFilled } from '@fluentui/react-icons';
 import type { HamburgerProps, HamburgerState } from './Hamburger.types';
 
 /**
@@ -15,5 +15,5 @@ export const useHamburger_unstable = (
   props: HamburgerProps,
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): HamburgerState => {
-  return useButton_unstable({ icon: <Navigation20Filled />, appearance: 'transparent', ...props }, ref);
+  return useButton_unstable({ icon: <NavigationFilled />, appearance: 'transparent', ...props }, ref);
 };
diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
index 3a5fce02375a3..42c5a3c151ede 100644
--- a/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
+++ b/packages/react-components/react-nav/library/src/components/NavCategoryItem/useNavCategoryItem.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback } from '@fluentui/react-utilities';
-import { ChevronDown20Regular } from '@fluentui/react-icons';
+import { ChevronDownRegular } from '@fluentui/react-icons';
 import { createPresenceComponentVariant, motionTokens, presenceMotionSlot } from '@fluentui/react-motion';
 
 import type {
@@ -49,7 +49,7 @@ export const useNavCategoryItem_unstable = (
     },
     expandIcon: slot.always(props.expandIcon, {
       defaultProps: {
-        children: <ChevronDown20Regular />,
+        children: <ChevronDownRegular fontSize={20} />,
         'aria-hidden': true,
       },
       elementType: 'span',
diff --git a/packages/react-components/react-nav/library/src/components/SplitNavItem/useSplitNavItem.tsx b/packages/react-components/react-nav/library/src/components/SplitNavItem/useSplitNavItem.tsx
index 86b2b8862fffa..3b1cbff5b8f86 100644
--- a/packages/react-components/react-nav/library/src/components/SplitNavItem/useSplitNavItem.tsx
+++ b/packages/react-components/react-nav/library/src/components/SplitNavItem/useSplitNavItem.tsx
@@ -6,7 +6,7 @@ import { Tooltip } from '@fluentui/react-tooltip';
 import type { SplitNavItemProps, SplitNavItemState } from './SplitNavItem.types';
 import { useNavContext_unstable } from '../NavContext';
 import { Button, MenuButton, ToggleButton } from '@fluentui/react-button';
-import { MoreHorizontalFilled, Pin20Regular } from '@fluentui/react-icons';
+import { MoreHorizontalFilled, PinRegular } from '@fluentui/react-icons';
 import { NavItem } from '../NavItem/index';
 import { NavSubItem } from '../NavSubItem/NavSubItem';
 import { useNavCategoryContext_unstable } from '../NavCategoryContext';
@@ -50,7 +50,7 @@ export const useSplitNavItem_unstable = (
 
   const actionButtonShorthand = slot.optional(actionButton, {
     defaultProps: {
-      icon: <Pin20Regular />,
+      icon: <PinRegular />,
       size: 'small',
       appearance: 'transparent',
     },
@@ -59,7 +59,7 @@ export const useSplitNavItem_unstable = (
 
   const toggleButtonShorthand = slot.optional(toggleButton, {
     defaultProps: {
-      icon: <Pin20Regular />,
+      icon: <PinRegular />,
       size: 'small',
       appearance: 'transparent',
     },
diff --git a/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
index 15d80cabf75d6..96efb88a1f96b 100644
--- a/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/Basic.stories.tsx
@@ -27,34 +27,34 @@ import {
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
 import {
-  Board20Filled,
-  Board20Regular,
-  BoxMultiple20Filled,
-  BoxMultiple20Regular,
-  DataArea20Filled,
-  DataArea20Regular,
-  DocumentBulletListMultiple20Filled,
-  DocumentBulletListMultiple20Regular,
-  HeartPulse20Filled,
-  HeartPulse20Regular,
-  MegaphoneLoud20Filled,
-  MegaphoneLoud20Regular,
-  NotePin20Filled,
-  NotePin20Regular,
-  People20Filled,
-  People20Regular,
-  PeopleStar20Filled,
-  PeopleStar20Regular,
-  Person20Filled,
-  PersonLightbulb20Filled,
-  PersonLightbulb20Regular,
-  Person20Regular,
-  PersonSearch20Filled,
-  PersonSearch20Regular,
-  PreviewLink20Filled,
-  PreviewLink20Regular,
+  BoardFilled,
+  BoardRegular,
+  BoxMultipleFilled,
+  BoxMultipleRegular,
+  DataAreaFilled,
+  DataAreaRegular,
+  DocumentBulletListMultipleFilled,
+  DocumentBulletListMultipleRegular,
+  HeartPulseFilled,
+  HeartPulseRegular,
+  MegaphoneLoudFilled,
+  MegaphoneLoudRegular,
+  NotePinFilled,
+  NotePinRegular,
+  PeopleFilled,
+  PeopleRegular,
+  PeopleStarFilled,
+  PeopleStarRegular,
+  PersonFilled,
+  PersonLightbulbFilled,
+  PersonLightbulbRegular,
+  PersonRegular,
+  PersonSearchFilled,
+  PersonSearchRegular,
+  PreviewLinkFilled,
+  PreviewLinkRegular,
   bundleIcon,
-  PersonCircle32Regular,
+  PersonCircleRegular,
 } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -82,19 +82,19 @@ const useStyles = makeStyles({
   },
 });
 
-const Person = bundleIcon(Person20Filled, Person20Regular);
-const Dashboard = bundleIcon(Board20Filled, Board20Regular);
-const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular);
-const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular);
-const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular);
-const PerformanceReviews = bundleIcon(PreviewLink20Filled, PreviewLink20Regular);
-const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular);
-const Interviews = bundleIcon(People20Filled, People20Regular);
-const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular);
-const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular);
-const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
-const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
-const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
+const Person = bundleIcon(PersonFilled, PersonRegular);
+const Dashboard = bundleIcon(BoardFilled, BoardRegular);
+const Announcements = bundleIcon(MegaphoneLoudFilled, MegaphoneLoudRegular);
+const EmployeeSpotlight = bundleIcon(PersonLightbulbFilled, PersonLightbulbRegular);
+const Search = bundleIcon(PersonSearchFilled, PersonSearchRegular);
+const PerformanceReviews = bundleIcon(PreviewLinkFilled, PreviewLinkRegular);
+const JobPostings = bundleIcon(NotePinFilled, NotePinRegular);
+const Interviews = bundleIcon(PeopleFilled, PeopleRegular);
+const HealthPlans = bundleIcon(HeartPulseFilled, HeartPulseRegular);
+const TrainingPrograms = bundleIcon(BoxMultipleFilled, BoxMultipleRegular);
+const CareerDevelopment = bundleIcon(PeopleStarFilled, PeopleStarRegular);
+const Analytics = bundleIcon(DataAreaFilled, DataAreaRegular);
+const Reports = bundleIcon(DocumentBulletListMultipleFilled, DocumentBulletListMultipleRegular);
 
 type DrawerType = Required<DrawerProps>['type'];
 
@@ -132,7 +132,7 @@ export const Basic = (): JSXElement => {
         </NavDrawerHeader>
 
         <NavDrawerBody>
-          <AppItem icon={<PersonCircle32Regular />} as="a" href={linkDestination}>
+          <AppItem icon={<PersonCircleRegular />} as="a" href={linkDestination}>
             Contoso HR
           </AppItem>
           <NavItem href={linkDestination} icon={<Dashboard />} value="1">
diff --git a/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
index e7008c5d35d1c..8b5e44449b040 100644
--- a/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/Controlled.stories.tsx
@@ -16,34 +16,34 @@ import {
 } from '@fluentui/react-components';
 import { Button, Label, Switch, Tooltip, makeStyles, tokens, useId } from '@fluentui/react-components';
 import {
-  Board20Filled,
-  Board20Regular,
-  BoxMultiple20Filled,
-  BoxMultiple20Regular,
-  DataArea20Filled,
-  DataArea20Regular,
-  DocumentBulletListMultiple20Filled,
-  DocumentBulletListMultiple20Regular,
-  HeartPulse20Filled,
-  HeartPulse20Regular,
-  MegaphoneLoud20Filled,
-  MegaphoneLoud20Regular,
-  NotePin20Filled,
-  NotePin20Regular,
-  People20Filled,
-  People20Regular,
-  PeopleStar20Filled,
-  PeopleStar20Regular,
-  Person20Filled,
-  PersonLightbulb20Filled,
-  PersonLightbulb20Regular,
-  Person20Regular,
-  PersonSearch20Filled,
-  PersonSearch20Regular,
-  PreviewLink20Filled,
-  PreviewLink20Regular,
+  BoardFilled,
+  BoardRegular,
+  BoxMultipleFilled,
+  BoxMultipleRegular,
+  DataAreaFilled,
+  DataAreaRegular,
+  DocumentBulletListMultipleFilled,
+  DocumentBulletListMultipleRegular,
+  HeartPulseFilled,
+  HeartPulseRegular,
+  MegaphoneLoudFilled,
+  MegaphoneLoudRegular,
+  NotePinFilled,
+  NotePinRegular,
+  PeopleFilled,
+  PeopleRegular,
+  PeopleStarFilled,
+  PeopleStarRegular,
+  PersonFilled,
+  PersonLightbulbFilled,
+  PersonLightbulbRegular,
+  PersonRegular,
+  PersonSearchFilled,
+  PersonSearchRegular,
+  PreviewLinkFilled,
+  PreviewLinkRegular,
   bundleIcon,
-  PersonCircle32Regular,
+  PersonCircleRegular,
 } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -71,19 +71,19 @@ const useStyles = makeStyles({
   },
 });
 
-const Person = bundleIcon(Person20Filled, Person20Regular);
-const Dashboard = bundleIcon(Board20Filled, Board20Regular);
-const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular);
-const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular);
-const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular);
-const PerformanceReviews = bundleIcon(PreviewLink20Filled, PreviewLink20Regular);
-const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular);
-const Interviews = bundleIcon(People20Filled, People20Regular);
-const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular);
-const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular);
-const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
-const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
-const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
+const Person = bundleIcon(PersonFilled, PersonRegular);
+const Dashboard = bundleIcon(BoardFilled, BoardRegular);
+const Announcements = bundleIcon(MegaphoneLoudFilled, MegaphoneLoudRegular);
+const EmployeeSpotlight = bundleIcon(PersonLightbulbFilled, PersonLightbulbRegular);
+const Search = bundleIcon(PersonSearchFilled, PersonSearchRegular);
+const PerformanceReviews = bundleIcon(PreviewLinkFilled, PreviewLinkRegular);
+const JobPostings = bundleIcon(NotePinFilled, NotePinRegular);
+const Interviews = bundleIcon(PeopleFilled, PeopleRegular);
+const HealthPlans = bundleIcon(HeartPulseFilled, HeartPulseRegular);
+const TrainingPrograms = bundleIcon(BoxMultipleFilled, BoxMultipleRegular);
+const CareerDevelopment = bundleIcon(PeopleStarFilled, PeopleStarRegular);
+const Analytics = bundleIcon(DataAreaFilled, DataAreaRegular);
+const Reports = bundleIcon(DocumentBulletListMultipleFilled, DocumentBulletListMultipleRegular);
 
 // A type that represents a navItemValue and its potential children.
 // An empty children array indicates a Single top level NavItem.
@@ -216,7 +216,7 @@ export const Controlled = (): JSXElement => {
         <NavDrawerHeader>{renderHamburgerWithToolTip()}</NavDrawerHeader>
 
         <NavDrawerBody>
-          <AppItem icon={<PersonCircle32Regular />} as="a">
+          <AppItem icon={<PersonCircleRegular />} as="a">
             Contoso HR
           </AppItem>
           <NavItem icon={<Dashboard />} value="1">
diff --git a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
index e848296d31f0b..86b871d267a49 100644
--- a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.stories.tsx
@@ -28,34 +28,34 @@ import {
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
 import {
-  Board20Filled,
-  Board20Regular,
-  BoxMultiple20Filled,
-  BoxMultiple20Regular,
-  DataArea20Filled,
-  DataArea20Regular,
-  DocumentBulletListMultiple20Filled,
-  DocumentBulletListMultiple20Regular,
-  HeartPulse20Filled,
-  HeartPulse20Regular,
-  MegaphoneLoud20Filled,
-  MegaphoneLoud20Regular,
-  NotePin20Filled,
-  NotePin20Regular,
-  People20Filled,
-  People20Regular,
-  PeopleStar20Filled,
-  PeopleStar20Regular,
-  Person20Filled,
-  PersonLightbulb20Filled,
-  PersonLightbulb20Regular,
-  Person20Regular,
-  PersonSearch20Filled,
-  PersonSearch20Regular,
-  PreviewLink20Filled,
-  PreviewLink20Regular,
+  BoardFilled,
+  BoardRegular,
+  BoxMultipleFilled,
+  BoxMultipleRegular,
+  DataAreaFilled,
+  DataAreaRegular,
+  DocumentBulletListMultipleFilled,
+  DocumentBulletListMultipleRegular,
+  HeartPulseFilled,
+  HeartPulseRegular,
+  MegaphoneLoudFilled,
+  MegaphoneLoudRegular,
+  NotePinFilled,
+  NotePinRegular,
+  PeopleFilled,
+  PeopleRegular,
+  PeopleStarFilled,
+  PeopleStarRegular,
+  PersonFilled,
+  PersonLightbulbFilled,
+  PersonLightbulbRegular,
+  PersonRegular,
+  PersonSearchFilled,
+  PersonSearchRegular,
+  PreviewLinkFilled,
+  PreviewLinkRegular,
   bundleIcon,
-  PersonCircle32Regular,
+  PersonCircleRegular,
 } from '@fluentui/react-icons';
 
 const drawerWidth = '260px';
@@ -169,19 +169,19 @@ const ContentMotion = createPresenceComponent(() => {
   };
 });
 
-const Person = bundleIcon(Person20Filled, Person20Regular);
-const Dashboard = bundleIcon(Board20Filled, Board20Regular);
-const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular);
-const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular);
-const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular);
-const PerformanceReviews = bundleIcon(PreviewLink20Filled, PreviewLink20Regular);
-const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular);
-const Interviews = bundleIcon(People20Filled, People20Regular);
-const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular);
-const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular);
-const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
-const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
-const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
+const Person = bundleIcon(PersonFilled, PersonRegular);
+const Dashboard = bundleIcon(BoardFilled, BoardRegular);
+const Announcements = bundleIcon(MegaphoneLoudFilled, MegaphoneLoudRegular);
+const EmployeeSpotlight = bundleIcon(PersonLightbulbFilled, PersonLightbulbRegular);
+const Search = bundleIcon(PersonSearchFilled, PersonSearchRegular);
+const PerformanceReviews = bundleIcon(PreviewLinkFilled, PreviewLinkRegular);
+const JobPostings = bundleIcon(NotePinFilled, NotePinRegular);
+const Interviews = bundleIcon(PeopleFilled, PeopleRegular);
+const HealthPlans = bundleIcon(HeartPulseFilled, HeartPulseRegular);
+const TrainingPrograms = bundleIcon(BoxMultipleFilled, BoxMultipleRegular);
+const CareerDevelopment = bundleIcon(PeopleStarFilled, PeopleStarRegular);
+const Analytics = bundleIcon(DataAreaFilled, DataAreaRegular);
+const Reports = bundleIcon(DocumentBulletListMultipleFilled, DocumentBulletListMultipleRegular);
 
 type DrawerType = Required<DrawerProps>['type'];
 
@@ -215,7 +215,7 @@ export const CustomMotion = (): JSXElement => {
         className={styles.nav}
       >
         <NavDrawerBody>
-          <AppItem icon={<PersonCircle32Regular />} as="a" href={linkDestination}>
+          <AppItem icon={<PersonCircleRegular />} as="a" href={linkDestination}>
             Contoso HR
           </AppItem>
           <NavItem href={linkDestination} icon={<Dashboard />} value="1">
diff --git a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
index 01373eebdf951..4922adb2e03ce 100644
--- a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.stories.tsx
@@ -38,37 +38,36 @@ import {
   useId,
 } from '@fluentui/react-components';
 import {
-  Board20Filled,
-  Board20Regular,
-  BoxMultiple20Filled,
-  BoxMultiple20Regular,
-  DataArea20Filled,
-  DataArea20Regular,
-  DocumentBulletListMultiple20Filled,
-  DocumentBulletListMultiple20Regular,
-  HeartPulse20Filled,
-  HeartPulse20Regular,
-  MegaphoneLoud20Filled,
-  MegaphoneLoud20Regular,
-  People20Filled,
-  People20Regular,
-  PersonLightbulb20Filled,
-  PersonLightbulb20Regular,
-  PersonSearch20Filled,
-  PersonSearch20Regular,
-  PreviewLink20Filled,
-  PreviewLink20Regular,
+  BoardFilled,
+  BoardRegular,
+  BoxMultipleFilled,
+  BoxMultipleRegular,
+  DataAreaFilled,
+  DataAreaRegular,
+  DocumentBulletListMultipleFilled,
+  DocumentBulletListMultipleRegular,
+  HeartPulseFilled,
+  HeartPulseRegular,
+  MegaphoneLoudFilled,
+  MegaphoneLoudRegular,
+  PeopleFilled,
+  PeopleRegular,
+  PersonLightbulbFilled,
+  PersonLightbulbRegular,
+  PersonSearchFilled,
+  PersonSearchRegular,
+  PreviewLinkFilled,
+  PreviewLinkRegular,
   bundleIcon,
-  PersonCircle32Regular,
-  PersonCircle24Regular,
-  Pin20Filled,
-  Pin20Regular,
-  NotePin20Filled,
-  NotePin20Regular,
-  PeopleStar20Filled,
-  PeopleStar20Regular,
-  Person20Filled,
-  Person20Regular,
+  PersonCircleRegular,
+  PinFilled,
+  PinRegular,
+  NotePinFilled,
+  NotePinRegular,
+  PeopleStarFilled,
+  PeopleStarRegular,
+  PersonFilled,
+  PersonRegular,
 } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -100,20 +99,20 @@ const useStyles = makeStyles({
   },
 });
 
-const Dashboard = bundleIcon(Board20Filled, Board20Regular);
-const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular);
-const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular);
-const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular);
-const PerformanceReviews = bundleIcon(PreviewLink20Filled, PreviewLink20Regular);
-const Interviews = bundleIcon(People20Filled, People20Regular);
-const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular);
-const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular);
-const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
-const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
-const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular);
-const Person = bundleIcon(Person20Filled, Person20Regular);
-const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
-const Pin = bundleIcon(Pin20Filled, Pin20Regular);
+const Dashboard = bundleIcon(BoardFilled, BoardRegular);
+const Announcements = bundleIcon(MegaphoneLoudFilled, MegaphoneLoudRegular);
+const EmployeeSpotlight = bundleIcon(PersonLightbulbFilled, PersonLightbulbRegular);
+const Search = bundleIcon(PersonSearchFilled, PersonSearchRegular);
+const PerformanceReviews = bundleIcon(PreviewLinkFilled, PreviewLinkRegular);
+const Interviews = bundleIcon(PeopleFilled, PeopleRegular);
+const HealthPlans = bundleIcon(HeartPulseFilled, HeartPulseRegular);
+const TrainingPrograms = bundleIcon(BoxMultipleFilled, BoxMultipleRegular);
+const Analytics = bundleIcon(DataAreaFilled, DataAreaRegular);
+const Reports = bundleIcon(DocumentBulletListMultipleFilled, DocumentBulletListMultipleRegular);
+const JobPostings = bundleIcon(NotePinFilled, NotePinRegular);
+const Person = bundleIcon(PersonFilled, PersonRegular);
+const CareerDevelopment = bundleIcon(PeopleStarFilled, PeopleStarRegular);
+const Pin = bundleIcon(PinFilled, PinRegular);
 
 type SplitNavItemNestedProps = {
   splitNavItem?: SplitNavItemProps;
@@ -208,9 +207,9 @@ export const SplitNavItems = (): JSXElement => {
 
   const appItemIcon = isAppItemIconPresent ? (
     density === 'small' ? (
-      <PersonCircle24Regular />
+      <PersonCircleRegular fontSize={24} />
     ) : (
-      <PersonCircle32Regular />
+      <PersonCircleRegular fontSize={32} />
     )
   ) : undefined;
 
@@ -237,7 +236,7 @@ export const SplitNavItems = (): JSXElement => {
       return {
         checked: isPinned,
         onClick: () => handlePinClick(value),
-        icon: isPinned ? <Pin /> : <Pin20Regular />,
+        icon: isPinned ? <Pin /> : <PinRegular fontSize={20} />,
         className: isPinned ? styles.pinned : '',
       };
     }
diff --git a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
index f3f97096215cc..dc5b7f41bb776 100644
--- a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
+++ b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.stories.tsx
@@ -17,35 +17,34 @@ import {
 } from '@fluentui/react-components';
 import { Label, Switch, Tooltip, makeStyles, tokens, useId, Radio, RadioGroup } from '@fluentui/react-components';
 import {
-  Board20Filled,
-  Board20Regular,
-  BoxMultiple20Filled,
-  BoxMultiple20Regular,
-  DataArea20Filled,
-  DataArea20Regular,
-  DocumentBulletListMultiple20Filled,
-  DocumentBulletListMultiple20Regular,
-  HeartPulse20Filled,
-  HeartPulse20Regular,
-  MegaphoneLoud20Filled,
-  MegaphoneLoud20Regular,
-  NotePin20Filled,
-  NotePin20Regular,
-  People20Filled,
-  People20Regular,
-  PeopleStar20Filled,
-  PeopleStar20Regular,
-  Person20Filled,
-  PersonLightbulb20Filled,
-  PersonLightbulb20Regular,
-  Person20Regular,
-  PersonSearch20Filled,
-  PersonSearch20Regular,
-  PreviewLink20Filled,
-  PreviewLink20Regular,
+  BoardFilled,
+  BoardRegular,
+  BoxMultipleFilled,
+  BoxMultipleRegular,
+  DataAreaFilled,
+  DataAreaRegular,
+  DocumentBulletListMultipleFilled,
+  DocumentBulletListMultipleRegular,
+  HeartPulseFilled,
+  HeartPulseRegular,
+  MegaphoneLoudFilled,
+  MegaphoneLoudRegular,
+  NotePinFilled,
+  NotePinRegular,
+  PeopleFilled,
+  PeopleRegular,
+  PeopleStarFilled,
+  PeopleStarRegular,
+  PersonFilled,
+  PersonLightbulbFilled,
+  PersonLightbulbRegular,
+  PersonRegular,
+  PersonSearchFilled,
+  PersonSearchRegular,
+  PreviewLinkFilled,
+  PreviewLinkRegular,
   bundleIcon,
-  PersonCircle24Regular,
-  PersonCircle32Regular,
+  PersonCircleRegular,
 } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -73,19 +72,19 @@ const useStyles = makeStyles({
   },
 });
 
-const Person = bundleIcon(Person20Filled, Person20Regular);
-const Dashboard = bundleIcon(Board20Filled, Board20Regular);
-const Announcements = bundleIcon(MegaphoneLoud20Filled, MegaphoneLoud20Regular);
-const EmployeeSpotlight = bundleIcon(PersonLightbulb20Filled, PersonLightbulb20Regular);
-const Search = bundleIcon(PersonSearch20Filled, PersonSearch20Regular);
-const PerformanceReviews = bundleIcon(PreviewLink20Filled, PreviewLink20Regular);
-const JobPostings = bundleIcon(NotePin20Filled, NotePin20Regular);
-const Interviews = bundleIcon(People20Filled, People20Regular);
-const HealthPlans = bundleIcon(HeartPulse20Filled, HeartPulse20Regular);
-const TrainingPrograms = bundleIcon(BoxMultiple20Filled, BoxMultiple20Regular);
-const CareerDevelopment = bundleIcon(PeopleStar20Filled, PeopleStar20Regular);
-const Analytics = bundleIcon(DataArea20Filled, DataArea20Regular);
-const Reports = bundleIcon(DocumentBulletListMultiple20Filled, DocumentBulletListMultiple20Regular);
+const Person = bundleIcon(PersonFilled, PersonRegular);
+const Dashboard = bundleIcon(BoardFilled, BoardRegular);
+const Announcements = bundleIcon(MegaphoneLoudFilled, MegaphoneLoudRegular);
+const EmployeeSpotlight = bundleIcon(PersonLightbulbFilled, PersonLightbulbRegular);
+const Search = bundleIcon(PersonSearchFilled, PersonSearchRegular);
+const PerformanceReviews = bundleIcon(PreviewLinkFilled, PreviewLinkRegular);
+const JobPostings = bundleIcon(NotePinFilled, NotePinRegular);
+const Interviews = bundleIcon(PeopleFilled, PeopleRegular);
+const HealthPlans = bundleIcon(HeartPulseFilled, HeartPulseRegular);
+const TrainingPrograms = bundleIcon(BoxMultipleFilled, BoxMultipleRegular);
+const CareerDevelopment = bundleIcon(PeopleStarFilled, PeopleStarRegular);
+const Analytics = bundleIcon(DataAreaFilled, DataAreaRegular);
+const Reports = bundleIcon(DocumentBulletListMultipleFilled, DocumentBulletListMultipleRegular);
 
 export const VariableDensityItems = (props: Partial<NavDrawerProps>): JSXElement => {
   const styles = useStyles();
@@ -104,9 +103,9 @@ export const VariableDensityItems = (props: Partial<NavDrawerProps>): JSXElement
 
   const appItemIcon = isAppItemIconPresent ? (
     density === 'small' ? (
-      <PersonCircle24Regular />
+      <PersonCircleRegular fontSize={24} />
     ) : (
-      <PersonCircle32Regular />
+      <PersonCircleRegular fontSize={32} />
     )
   ) : undefined;
 
diff --git a/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx b/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx
index 77b85b8f46487..231b951257503 100644
--- a/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx
+++ b/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx
@@ -19,7 +19,7 @@ import {
   useOverflowMenu,
   OverflowDivider,
 } from '@fluentui/react-components';
-import { ChevronRight20Regular } from '@fluentui/react-icons';
+import { ChevronRightRegular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   container: {
@@ -101,7 +101,7 @@ const OverflowGroupDivider: React.FC<{
   return (
     <OverflowDivider groupId={props.groupId}>
       <div>
-        <ChevronRight20Regular />
+        <ChevronRightRegular fontSize={20} />
       </div>
     </OverflowDivider>
   );
diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts
index 73ecff572a893..3a8bf14706846 100644
--- a/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts
+++ b/packages/react-components/react-rating/library/src/components/RatingItem/useRatingItemStyles.styles.ts
@@ -85,7 +85,7 @@ const useIndicatorBaseClassName = makeResetStyles({
 const useIndicatorStyles = makeStyles({
   lowerHalf: {
     right: '50%',
-    '& > svg': {
+    '& > svg, & > :where([data-fui-icon])': {
       flex: '0 0 auto',
     },
   },
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/react-components/react-search/library/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index 805be26bfcdda..afc7194c8321a 100644
--- a/packages/react-components/react-search/library/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/packages/react-components/react-search/library/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -10,7 +10,8 @@ exports[`SearchBox renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -18,7 +19,7 @@ exports[`SearchBox renders a default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12.73 13.44a6.5 6.5 0 1 1 .7-.7l3.42 3.4a.5.5 0 0 1-.63.77l-.07-.06-3.42-3.41Zm-.71-.71A5.54 5.54 0 0 0 14 8.5a5.5 5.5 0 1 0-1.98 4.23Z"
+          d="M13.73 14.44a6.5 6.5 0 1 1 .7-.7l3.42 3.4a.5.5 0 0 1-.63.77l-.07-.06zm-.71-.71A5.5 5.5 0 0 0 15 9.5a5.5 5.5 0 1 0-1.98 4.23"
           fill="currentColor"
         />
       </svg>
@@ -39,7 +40,8 @@ exports[`SearchBox renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -47,7 +49,7 @@ exports[`SearchBox renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+            d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
             fill="currentColor"
           />
         </svg>
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBoxStyles.styles.ts b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBoxStyles.styles.ts
index f01ef66ae5af7..e9238f5cb7e62 100644
--- a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBoxStyles.styles.ts
+++ b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBoxStyles.styles.ts
@@ -89,7 +89,7 @@ const useDismissClassName = makeResetStyles({
   display: 'flex',
   // special case styling for icons (most common case) to ensure they're centered vertically
   // size: medium (default)
-  '> svg': { fontSize: '20px' },
+  '> svg, > :where([data-fui-icon])': { fontSize: '20px' },
   cursor: 'pointer',
 });
 
@@ -99,13 +99,13 @@ const useDismissStyles = makeStyles({
   },
   // Ensure resizable icons show up with the proper font size
   small: {
-    '> svg': { fontSize: '16px' },
+    '> svg, > :where([data-fui-icon])': { fontSize: '16px' },
   },
   medium: {
     // included in useDismissClassName
   },
   large: {
-    '> svg': { fontSize: '24px' },
+    '> svg, > :where([data-fui-icon])': { fontSize: '24px' },
   },
 });
 
diff --git a/packages/react-components/react-select/library/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/react-components/react-select/library/src/components/Select/__snapshots__/Select.test.tsx.snap
index f12e589fc11b7..fc633ce0999f6 100644
--- a/packages/react-components/react-select/library/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-components/react-select/library/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -40,7 +40,8 @@ exports[`Select renders option children 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -48,7 +49,7 @@ exports[`Select renders option children 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
           fill="currentColor"
         />
       </svg>
@@ -70,7 +71,8 @@ exports[`Select renders the default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -78,7 +80,7 @@ exports[`Select renders the default state 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts b/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
index 10f2d9eb1a500..3732953337d01 100644
--- a/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
+++ b/packages/react-components/react-select/library/src/components/Select/useSelectStyles.styles.ts
@@ -214,7 +214,7 @@ const useIconStyles = makeStyles({
 
     // the SVG must have display: block for accurate positioning
     // otherwise an extra inline space is inserted after the svg element
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       display: 'block',
     },
   },
diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
index 47fadc853d9de..5234c26678ccf 100644
--- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
+++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
@@ -21,7 +21,7 @@ import type {
   SpinButtonBounds,
 } from './SpinButton.types';
 import { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';
-import { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';
+import { ChevronUpRegular, ChevronDownRegular } from '@fluentui/react-icons';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 
 type InternalState = {
@@ -396,8 +396,8 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
 
   const state = useSpinButtonBase_unstable(baseProps, ref);
 
-  state.incrementButton.children ??= <ChevronUp16Regular />;
-  state.decrementButton.children ??= <ChevronDown16Regular />;
+  state.incrementButton.children ??= <ChevronUpRegular fontSize={16} />;
+  state.decrementButton.children ??= <ChevronDownRegular fontSize={16} />;
 
   return { ...state, appearance, size };
 };
diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx
index eeb7684c16215..cbc4ab33764f5 100644
--- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx
+++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx
@@ -48,7 +48,8 @@ describe('SwatchPicker', () => {
             >
               <svg
                 aria-hidden="true"
-                class=""
+                class="fui-Icon"
+                data-fui-icon=""
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 20 20"
@@ -56,7 +57,7 @@ describe('SwatchPicker', () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-1.5 0c0-1.52-.53-2.93-1.4-4.04L5.96 15.1A6.5 6.5 0 0 0 16.5 10ZM4.9 14.04l9.14-9.14a6.5 6.5 0 0 0-9.13 9.13Z"
+                  d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-1.5 0c0-1.52-.53-2.93-1.4-4.04L5.96 15.1A6.5 6.5 0 0 0 16.5 10M4.9 14.04l9.14-9.14a6.5 6.5 0 0 0-9.13 9.13"
                   fill="currentColor"
                 />
               </svg>
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index a59eada9efaf0..2ab6355d25b29 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react-components/react-tabs/library/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -55,7 +55,8 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -63,7 +64,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -93,7 +94,8 @@ exports[`Tab renders large size and vertical correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -101,7 +103,7 @@ exports[`Tab renders large size and vertical correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -131,7 +133,8 @@ exports[`Tab renders large size correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -139,7 +142,7 @@ exports[`Tab renders large size correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -169,7 +172,8 @@ exports[`Tab renders medium size and vertical correctly with icon slotted 1`] =
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -177,7 +181,7 @@ exports[`Tab renders medium size and vertical correctly with icon slotted 1`] =
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -207,7 +211,8 @@ exports[`Tab renders medium size correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -215,7 +220,7 @@ exports[`Tab renders medium size correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -245,7 +250,8 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -253,7 +259,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -283,7 +289,8 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -291,7 +298,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -321,7 +328,8 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -329,7 +337,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
@@ -359,7 +367,8 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
         height="1em"
         viewBox="0 0 20 20"
@@ -367,7 +376,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3h9Zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5ZM7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+          d="M14.5 3A2.5 2.5 0 0 1 17 5.5v9a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5M7 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2M7 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/__snapshots__/TagPickerControl.test.tsx.snap b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/__snapshots__/TagPickerControl.test.tsx.snap
index f5b5fd4394376..297c950a817db 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/__snapshots__/TagPickerControl.test.tsx.snap
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/__snapshots__/TagPickerControl.test.tsx.snap
@@ -16,7 +16,8 @@ exports[`TagPickerControl renders a default state 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
+          class="fui-Icon"
+          data-fui-icon=""
           fill="currentColor"
           height="1em"
           viewBox="0 0 20 20"
@@ -24,7 +25,7 @@ exports[`TagPickerControl renders a default state 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0"
             fill="currentColor"
           />
         </svg>
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
index db3f83670836e..711b38482e4da 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/useTagPickerControlStyles.styles.ts
@@ -198,7 +198,7 @@ const useIconStyles = makeStyles({
     fontSize: tokens.fontSizeBase500,
     // the SVG must have display: block for accurate positioning
     // otherwise an extra inline space is inserted after the svg element
-    '& svg': {
+    '& svg, & :where([data-fui-icon])': {
       display: 'block',
     },
   },
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap
index 4551f85e3ab9c..19fb1b96a3be5 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap
@@ -11,15 +11,17 @@ exports[`TeachingPopoverHeader renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
+        font-size="16"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4.5 6.5A3.5 3.5 0 1 1 10.45 9c-.19.19-.36.43-.44.73L9.66 11H6.34l-.35-1.27c-.08-.3-.25-.54-.44-.73A3.49 3.49 0 0 1 4.5 6.5ZM6.6 12h2.8l-.18.63a.5.5 0 0 1-.48.37H7.26a.5.5 0 0 1-.48-.37L6.61 12ZM8 2a4.5 4.5 0 0 0-3.16 7.7c.1.1.16.2.19.3l.79 2.9c.17.65.77 1.1 1.44 1.1h1.48a1.5 1.5 0 0 0 1.44-1.1l.8-2.9c.02-.1.08-.2.18-.3A4.49 4.49 0 0 0 8 2Z"
+          d="M10 2c3.31 0 6 2.6 6 5.8q-.01 2.53-2.2 4.6a1 1 0 0 0-.15.2l-.02.09-.94 3.92a1.8 1.8 0 0 1-1.67 1.38l-.15.01H9.13c-.82 0-1.54-.52-1.78-1.26l-.04-.14-.93-3.91a.6.6 0 0 0-.17-.3A6.3 6.3 0 0 1 4 8.04L4 7.8v-.2A5.9 5.9 0 0 1 10 2m2.05 13h-4.1l.32 1.33.03.1c.1.3.38.52.71.56l.12.01h1.81a.9.9 0 0 0 .75-.53l.03-.1zM10 3a4.9 4.9 0 0 0-4.98 4.41L5 7.63V8q.08 1.95 1.9 3.67.27.27.4.64l.05.15.37 1.54h4.57l.38-1.61.05-.16q.13-.32.39-.56Q15 9.87 15 7.8A4.9 4.9 0 0 0 10 3"
           fill="currentColor"
         />
       </svg>
@@ -32,15 +34,17 @@ exports[`TeachingPopoverHeader renders a default state 1`] = `
     >
       <svg
         aria-hidden="true"
-        class=""
+        class="fui-Icon"
+        data-fui-icon=""
         fill="currentColor"
-        height="12"
-        viewBox="0 0 12 12"
-        width="12"
+        font-size="12"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z"
           fill="currentColor"
         />
       </svg>
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.test.tsx
index 43d371c1eb3fb..098e60fc5f6bc 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.test.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';
+import { DismissRegular, LightbulbRegular } from '@fluentui/react-icons';
 import { PopoverProvider } from '@fluentui/react-popover';
 import type { PopoverContextValue } from '@fluentui/react-popover';
 import { useTeachingPopoverHeader_unstable } from './useTeachingPopoverHeader';
@@ -43,7 +43,7 @@ describe('useTeachingPopoverHeader_unstable', () => {
     expect(result.current.icon).toBeDefined();
     const iconChildren = result.current.icon?.children as React.ReactElement | undefined;
     expect(iconChildren).toBeDefined();
-    expect((iconChildren as React.ReactElement).type).toBe(Lightbulb16Regular);
+    expect((iconChildren as React.ReactElement).type).toBe(LightbulbRegular);
     expect(result.current.icon?.['aria-hidden']).toBe(true);
   });
 
@@ -62,7 +62,7 @@ describe('useTeachingPopoverHeader_unstable', () => {
     const { result } = renderHook(() => useTeachingPopoverHeader_unstable({}, ref), { wrapper: makeWrapper() });
     expect(result.current.dismissButton).toBeDefined();
     const btnChildren = result.current.dismissButton?.children as React.ReactElement | undefined;
-    expect((btnChildren as React.ReactElement).type).toBe(Dismiss12Regular);
+    expect((btnChildren as React.ReactElement).type).toBe(DismissRegular);
     expect(result.current.dismissButton?.role).toBe('button');
     expect(result.current.dismissButton?.['aria-label']).toBe('dismiss');
     expect(typeof result.current.dismissButton?.onClick).toBe('function');
diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx
index ecbdb5afc6f50..e58100fd82aa4 100644
--- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx
+++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx
@@ -9,7 +9,7 @@ import type {
   TeachingPopoverHeaderState,
 } from './TeachingPopoverHeader.types';
 
-import { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons';
+import { DismissRegular, LightbulbRegular } from '@fluentui/react-icons';
 import { usePopoverContext_unstable } from '@fluentui/react-popover';
 
 /**
@@ -83,11 +83,11 @@ export const useTeachingPopoverHeader_unstable = (
 
   const icon =
     baseState.icon && baseState.icon.children === undefined
-      ? { ...baseState.icon, children: <Lightbulb16Regular /> }
+      ? { ...baseState.icon, children: <LightbulbRegular fontSize={16} /> }
       : baseState.icon;
   const dismissButton =
     baseState.dismissButton && baseState.dismissButton.children === undefined
-      ? { ...baseState.dismissButton, children: <Dismiss12Regular /> }
+      ? { ...baseState.dismissButton, children: <DismissRegular fontSize={12} /> }
       : baseState.dismissButton;
 
   return {
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
index 08b6435d28a90..e2e26ed315c8c 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement, ToolbarProps } from '@fluentui/react-components';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { TextBoldRegular, TextItalicRegular, TextUnderlineRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components';
 
 export const ControlledToggleButton = (): JSXElement => {
@@ -15,11 +15,11 @@ export const ControlledToggleButton = (): JSXElement => {
 
   return (
     <Toolbar aria-label="with controlled Toggle Button" checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
-      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
+      <ToolbarToggleButton aria-label="Bold" icon={<TextBoldRegular />} name="textOptions" value="bold" />
+      <ToolbarToggleButton aria-label="Italic" icon={<TextItalicRegular />} name="textOptions" value="italic" />
       <ToolbarToggleButton
         aria-label="Underline"
-        icon={<TextUnderline24Regular />}
+        icon={<TextUnderlineRegular />}
         name="textOptions"
         value="underline"
       />
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarDefault.stories.tsx
index b326185d5fb7c..4f5dff9652092 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarDefault.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarDefault.stories.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import {
-  FontIncrease24Regular,
-  FontDecrease24Regular,
-  TextFont24Regular,
-  MoreHorizontal24Filled,
-} from '@fluentui/react-icons';
+import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular, MoreHorizontalFilled } from '@fluentui/react-icons';
 import {
   Toolbar,
   ToolbarButton,
@@ -20,13 +15,13 @@ import type { ToolbarProps } from '@fluentui/react-components';
 
 export const Default = (props: Partial<ToolbarProps>): JSXElement => (
   <Toolbar aria-label="Default" {...props}>
-    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
-    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
-    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />} />
     <ToolbarDivider />
     <Menu>
       <MenuTrigger>
-        <ToolbarButton aria-label="More" icon={<MoreHorizontal24Filled />} />
+        <ToolbarButton aria-label="More" icon={<MoreHorizontalFilled />} />
       </MenuTrigger>
 
       <MenuPopover>
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx
index 43cc2188446c8..3c50255d7cc04 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons';
+import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -14,9 +14,9 @@ export const Large = (props: Partial<ToolbarProps>): JSXElement => (
       borderRadius: '8px',
     }}
   >
-    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
-    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
-    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />} />
   </Toolbar>
 );
 
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx
index caf59ccd3082e..71aabba5e32a9 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons';
+import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -14,9 +14,9 @@ export const Medium = (props: Partial<ToolbarProps>): JSXElement => (
       borderRadius: '8px',
     }}
   >
-    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
-    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
-    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />} />
   </Toolbar>
 );
 
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx
index 81a7ff38120e2..2a095c36fa8b0 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import {
-  FontDecrease24Regular,
-  TextFont24Regular,
-  FontIncrease24Regular,
-  MoreHorizontal20Filled,
-} from '@fluentui/react-icons';
+import { FontDecreaseRegular, TextFontRegular, FontIncreaseRegular, MoreHorizontalFilled } from '@fluentui/react-icons';
 import {
   Toolbar,
   ToolbarButton,
@@ -38,15 +33,15 @@ const ToolbarOverflowMenuItem: React.FC<ToolbarOverflowMenuItemProps> = props =>
   }
 
   if (id.includes('increase')) {
-    return <MenuItem icon={<FontIncrease24Regular />}>Increase Font Size</MenuItem>;
+    return <MenuItem icon={<FontIncreaseRegular />}>Increase Font Size</MenuItem>;
   }
 
   if (id.includes('decrease')) {
-    return <MenuItem icon={<FontDecrease24Regular />}>Decrease Font Size</MenuItem>;
+    return <MenuItem icon={<FontDecreaseRegular />}>Decrease Font Size</MenuItem>;
   }
 
   if (id.includes('reset')) {
-    return <MenuItem icon={<TextFont24Regular />}>Reset Font Size</MenuItem>;
+    return <MenuItem icon={<TextFontRegular />}>Reset Font Size</MenuItem>;
   }
 
   return <MenuItem {...(rest as MenuItemProps)}>Item {id}</MenuItem>;
@@ -74,7 +69,7 @@ const OverflowMenu: React.FC<{ itemIds: Array<Array<string>> }> = ({ itemIds })
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <Button ref={ref} icon={<MoreHorizontal20Filled />} aria-label="More items" appearance="subtle" />
+        <Button ref={ref} icon={<MoreHorizontalFilled />} aria-label="More items" appearance="subtle" />
       </MenuTrigger>
 
       <MenuPopover>
@@ -137,7 +132,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="1"
           appearance="subtle"
           aria-label="Increase Font Size ( Group 1 )"
-          icon={<FontIncrease24Regular />}
+          icon={<FontIncreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -145,7 +140,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="1"
           appearance="subtle"
           aria-label="Decrease Font Size ( Group 1 )"
-          icon={<FontDecrease24Regular />}
+          icon={<FontDecreaseRegular />}
         />
 
         <ToolbarOverflowDivider groupId="1" />
@@ -155,7 +150,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="2"
           appearance="subtle"
           aria-label="Increase Font Size ( Group 2 )"
-          icon={<FontIncrease24Regular />}
+          icon={<FontIncreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -163,7 +158,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="2"
           appearance="subtle"
           aria-label="Decrease Font Size ( Group 2 )"
-          icon={<FontDecrease24Regular />}
+          icon={<FontDecreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -171,7 +166,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="2"
           appearance="subtle"
           aria-label="Reset Font Size ( Group 2 )"
-          icon={<TextFont24Regular />}
+          icon={<TextFontRegular />}
         />
 
         <ToolbarOverflowButton
@@ -179,7 +174,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="2"
           appearance="subtle"
           aria-label="Increase Font Size ( Group 2 )"
-          icon={<FontIncrease24Regular />}
+          icon={<FontIncreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -187,7 +182,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="2"
           appearance="subtle"
           aria-label="Decrease Font Size ( Group 2 )"
-          icon={<FontDecrease24Regular />}
+          icon={<FontDecreaseRegular />}
         />
 
         <ToolbarOverflowDivider groupId="2" />
@@ -197,7 +192,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="3"
           appearance="subtle"
           aria-label="Increase Font Size ( Group 3 )"
-          icon={<FontIncrease24Regular />}
+          icon={<FontIncreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -205,7 +200,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="3"
           appearance="subtle"
           aria-label="Decrease Font Size ( Group 3 )"
-          icon={<FontDecrease24Regular />}
+          icon={<FontDecreaseRegular />}
         />
 
         <ToolbarOverflowButton
@@ -213,7 +208,7 @@ export const OverflowItems = (props: Partial<ToolbarProps>): JSXElement => (
           overflowGroupId="3"
           appearance="subtle"
           aria-label="Reset Font Size ( Group 3 )"
-          icon={<TextFont24Regular />}
+          icon={<TextFontRegular />}
         />
 
         <OverflowMenu
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx
index 2c7e6cbdd8de9..8e5e815ff0372 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { AlignCenterHorizontal24Regular, AlignLeft24Regular, AlignRight24Regular } from '@fluentui/react-icons';
+import { AlignCenterHorizontalRegular, AlignLeftRegular, AlignRightRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarRadioButton, ToolbarRadioGroup } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -13,14 +13,14 @@ export const Radio = (props: Partial<ToolbarProps>): JSXElement => (
     }}
   >
     <ToolbarRadioGroup>
-      <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
+      <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeftRegular />} />
       <ToolbarRadioButton
         aria-label="Align Center"
         name="textOptions"
         value="center"
-        icon={<AlignCenterHorizontal24Regular />}
+        icon={<AlignCenterHorizontalRegular />}
       />
-      <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
+      <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRightRegular />} />
     </ToolbarRadioGroup>
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx
index 69e921da39a4a..34a469ddd6425 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { AlignCenterHorizontal24Regular, AlignLeft24Regular, AlignRight24Regular } from '@fluentui/react-icons';
+import { AlignCenterHorizontalRegular, AlignLeftRegular, AlignRightRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarRadioButton, ToolbarRadioGroup } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -18,14 +18,14 @@ export const ControlledRadio = (props: Partial<ToolbarProps>): JSXElement => {
   return (
     <Toolbar aria-label="with controlled Radio Button" checkedValues={checkedValues} onCheckedValueChange={onChange}>
       <ToolbarRadioGroup>
-        <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
+        <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeftRegular />} />
         <ToolbarRadioButton
           aria-label="Align Center"
           name="textOptions"
           value="center"
-          icon={<AlignCenterHorizontal24Regular />}
+          icon={<AlignCenterHorizontalRegular />}
         />
-        <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
+        <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRightRegular />} />
       </ToolbarRadioGroup>
     </Toolbar>
   );
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx
index db80631c1666f..28a37ba126454 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons';
+import { FontIncreaseRegular, FontDecreaseRegular, TextFontRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -14,9 +14,9 @@ export const Small = (props: Partial<ToolbarProps>): JSXElement => (
       borderRadius: '8px',
     }}
   >
-    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
-    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
-    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />} />
   </Toolbar>
 );
 
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx
index e71725196f092..522a23464491f 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { TextBoldRegular, TextItalicRegular, TextUnderlineRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -9,21 +9,21 @@ export const Subtle = (props: Partial<ToolbarProps>): JSXElement => (
     <ToolbarToggleButton
       appearance="subtle"
       aria-label="Bold"
-      icon={<TextBold24Regular />}
+      icon={<TextBoldRegular />}
       name="textOptions"
       value="bold"
     />
     <ToolbarToggleButton
       appearance="subtle"
       aria-label="Italic"
-      icon={<TextItalic24Regular />}
+      icon={<TextItalicRegular />}
       name="textOptions"
       value="italic"
     />
     <ToolbarToggleButton
       appearance="subtle"
       aria-label="Underline"
-      icon={<TextUnderline24Regular />}
+      icon={<TextUnderlineRegular />}
       name="textOptions"
       value="underline"
     />
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx
index 0dd97f05ab30d..8aa6d079d0e24 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { TextBoldRegular, TextItalicRegular, TextUnderlineRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
@@ -9,21 +9,21 @@ export const Transparent = (props: Partial<ToolbarProps>): JSXElement => (
     <ToolbarToggleButton
       appearance="transparent"
       aria-label="Bold"
-      icon={<TextBold24Regular />}
+      icon={<TextBoldRegular />}
       name="textOptions"
       value="bold"
     />
     <ToolbarToggleButton
       appearance="transparent"
       aria-label="Italic"
-      icon={<TextItalic24Regular />}
+      icon={<TextItalicRegular />}
       name="textOptions"
       value="italic"
     />
     <ToolbarToggleButton
       appearance="transparent"
       aria-label="Underline"
-      icon={<TextUnderline24Regular />}
+      icon={<TextUnderlineRegular />}
       name="textOptions"
       value="underline"
     />
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx
index 8204b257e6a5d..1c88b4cb6c3e6 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { TextBoldRegular, TextItalicRegular, TextUnderlineRegular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton } from '@fluentui/react-components';
 import type { ToolbarProps } from '@fluentui/react-components';
 
 export const Vertical = (props: Partial<ToolbarProps>): JSXElement => (
   <Toolbar vertical {...props} aria-label="Vertical">
-    <ToolbarToggleButton name="text" value="bold" aria-label="Bold" icon={<TextBold24Regular />} />
-    <ToolbarToggleButton name="text" value="italic" aria-label="Italic" icon={<TextItalic24Regular />} />
-    <ToolbarToggleButton name="text" value="underline" aria-label="Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarToggleButton name="text" value="bold" aria-label="Bold" icon={<TextBoldRegular />} />
+    <ToolbarToggleButton name="text" value="italic" aria-label="Italic" icon={<TextItalicRegular />} />
+    <ToolbarToggleButton name="text" value="underline" aria-label="Underline" icon={<TextUnderlineRegular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx
index 446a10ac93a62..a4bb458f64a8f 100644
--- a/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx
+++ b/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx
@@ -10,7 +10,7 @@ import {
   PopoverTrigger,
   Button,
 } from '@fluentui/react-components';
-import { MathFormatLinear24Regular, Image24Regular, Table24Filled } from '@fluentui/react-icons';
+import { MathFormatLinearRegular, ImageRegular, TableFilled } from '@fluentui/react-icons';
 
 export const WithPopover = (props: Partial<ToolbarProps>): JSXElement => {
   const [open, setOpen] = React.useState<'first' | 'second' | 'third' | 'fourth' | undefined>();
@@ -24,7 +24,7 @@ export const WithPopover = (props: Partial<ToolbarProps>): JSXElement => {
         onOpenChange={(_, data) => setOpen(data.open ? 'first' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Insert image" icon={<Image24Regular />} />
+          <ToolbarButton aria-label="Insert image" icon={<ImageRegular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
@@ -40,7 +40,7 @@ export const WithPopover = (props: Partial<ToolbarProps>): JSXElement => {
         onOpenChange={(_, data) => setOpen(data.open ? 'second' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table" />
+          <ToolbarButton appearance="primary" icon={<TableFilled />} aria-label="Insert Table" />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
@@ -56,7 +56,7 @@ export const WithPopover = (props: Partial<ToolbarProps>): JSXElement => {
         onOpenChange={(_, data) => setOpen(data.open ? 'third' : undefined)}
       >
         <PopoverTrigger disableButtonEnhancement>
-          <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinear24Regular />} />
+          <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinearRegular />} />
         </PopoverTrigger>
         <PopoverSurface>
           <div>
diff --git a/packages/react-components/react-tree/library/src/components/TreeItemChevron.tsx b/packages/react-components/react-tree/library/src/components/TreeItemChevron.tsx
index 53b99803f428c..7d79d7dc886b1 100644
--- a/packages/react-components/react-tree/library/src/components/TreeItemChevron.tsx
+++ b/packages/react-components/react-tree/library/src/components/TreeItemChevron.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { ChevronRight12Regular } from '@fluentui/react-icons';
+import { ChevronRightRegular } from '@fluentui/react-icons';
 import { durations, curves } from '@fluentui/react-motion';
 import { useTreeItemContext_unstable } from '../contexts/treeItemContext';
 
@@ -13,7 +13,8 @@ export const TreeItemChevron = React.memo(() => {
 
   const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
   return (
-    <ChevronRight12Regular
+    <ChevronRightRegular
+      fontSize={12}
       style={{
         ...expandIconInlineStyles[expandIconRotation],
         transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx
index 2b2f8fbd4b60e..6897a7591af19 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, TreeItemProps } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
-import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { EditRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
 import {
   Button,
   Menu,
@@ -35,10 +35,10 @@ const CustomTreeItem = ({ children, ...props }: CustomTreeItemProps) => {
           <TreeItemLayout
             actions={
               <>
-                <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+                <Button aria-label="Edit" appearance="subtle" icon={<EditRegular />} />
                 <Menu>
                   <MenuTrigger disableButtonEnhancement>
-                    <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+                    <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontalRegular />} />
                   </MenuTrigger>
                   <MenuPopover>
                     <MenuList>{commonMenuItems}</MenuList>
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx
index 1a2ea52b3c998..a00351ee6b73b 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx
@@ -3,15 +3,16 @@ import type { JSXElement } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
 import { CounterBadge } from '@fluentui/react-components';
 import type { FluentIconsProps } from '@fluentui/react-icons';
-import { Important16Regular } from '@fluentui/react-icons';
+import { ImportantRegular } from '@fluentui/react-icons';
 
 const iconStyleProps: FluentIconsProps = {
+  fontSize: 16,
   primaryFill: 'red',
 };
 
 const AsideContent = ({ isImportant, messageCount }: { isImportant?: boolean; messageCount?: number }) => (
   <>
-    {isImportant && <Important16Regular {...iconStyleProps} />}
+    {isImportant && <ImportantRegular {...iconStyleProps} />}
     {messageCount && messageCount > 0 && <CounterBadge count={messageCount} color="danger" size="small" />}
   </>
 );
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx
index 99885d49a4797..0d16525813b15 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, TreeItemValue, TreeOpenChangeData, TreeOpenChangeEvent } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
-import { AddSquare16Regular, SubtractSquare16Regular } from '@fluentui/react-icons';
+import { AddSquareRegular, SubtractSquareRegular } from '@fluentui/react-icons';
 
 export const ExpandIcon = (): JSXElement => {
   const [openItems, setOpenItems] = React.useState<TreeItemValue[]>([]);
@@ -12,14 +12,26 @@ export const ExpandIcon = (): JSXElement => {
     <Tree aria-label="Expand Icon" openItems={openItems} onOpenChange={handleOpenChange}>
       <TreeItem itemType="branch" value="tree-item-2">
         <TreeItemLayout
-          expandIcon={openItems.includes('tree-item-2') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}
+          expandIcon={
+            openItems.includes('tree-item-2') ? (
+              <SubtractSquareRegular fontSize={16} />
+            ) : (
+              <AddSquareRegular fontSize={16} />
+            )
+          }
         >
           level 1, item 1
         </TreeItemLayout>
         <Tree>
           <TreeItem itemType="branch" value="tree-item-3">
             <TreeItemLayout
-              expandIcon={openItems.includes('tree-item-3') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}
+              expandIcon={
+                openItems.includes('tree-item-3') ? (
+                  <SubtractSquareRegular fontSize={16} />
+                ) : (
+                  <AddSquareRegular fontSize={16} />
+                )
+              }
             >
               level 2, item 1
             </TreeItemLayout>
@@ -33,7 +45,13 @@ export const ExpandIcon = (): JSXElement => {
       </TreeItem>
       <TreeItem itemType="branch" value="tree-item-1">
         <TreeItemLayout
-          expandIcon={openItems.includes('tree-item-1') ? <SubtractSquare16Regular /> : <AddSquare16Regular />}
+          expandIcon={
+            openItems.includes('tree-item-1') ? (
+              <SubtractSquareRegular fontSize={16} />
+            ) : (
+              <AddSquareRegular fontSize={16} />
+            )
+          }
         >
           level 1, item 2
         </TreeItemLayout>
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx
index b7000b48246d5..d46678525ee8e 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx
@@ -1,31 +1,31 @@
 import * as React from 'react';
 import type { JSXElement } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
-import { Image20Regular, LockClosed20Regular, Person20Regular, Warning20Regular } from '@fluentui/react-icons';
+import { ImageRegular, LockClosedRegular, PersonRegular, WarningRegular } from '@fluentui/react-icons';
 
 export const IconBeforeAndAfter = (): JSXElement => {
   return (
     <Tree aria-label="Icon Before & After">
       <TreeItem itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />} iconAfter={<LockClosed20Regular />}>
+        <TreeItemLayout iconBefore={<ImageRegular />} iconAfter={<LockClosedRegular />}>
           level 1, item 1
         </TreeItemLayout>
         <Tree>
           <TreeItem itemType="leaf">
-            <TreeItemLayout iconBefore={<Person20Regular />}>icon before</TreeItemLayout>
+            <TreeItemLayout iconBefore={<PersonRegular />}>icon before</TreeItemLayout>
           </TreeItem>
           <TreeItem itemType="leaf">
-            <TreeItemLayout iconBefore={<Person20Regular />}>icon before</TreeItemLayout>
+            <TreeItemLayout iconBefore={<PersonRegular />}>icon before</TreeItemLayout>
           </TreeItem>
         </Tree>
       </TreeItem>
       <TreeItem itemType="branch">
-        <TreeItemLayout iconBefore={<Image20Regular />} iconAfter={<LockClosed20Regular />}>
+        <TreeItemLayout iconBefore={<ImageRegular />} iconAfter={<LockClosedRegular />}>
           level 1, item 2
         </TreeItemLayout>
         <Tree>
           <TreeItem itemType="leaf">
-            <TreeItemLayout iconAfter={<Warning20Regular />}>icon after</TreeItemLayout>
+            <TreeItemLayout iconAfter={<WarningRegular />}>icon after</TreeItemLayout>
           </TreeItem>
         </Tree>
       </TreeItem>
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx
index ec95aaf20c102..afe8b57f94f79 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx
@@ -6,7 +6,7 @@ import type {
   FlatTreeItemProps,
 } from '@fluentui/react-components';
 import { FlatTree, FlatTreeItem, TreeItemLayout, useHeadlessFlatTree_unstable } from '@fluentui/react-components';
-import { Delete20Regular } from '@fluentui/react-icons';
+import { DeleteRegular } from '@fluentui/react-icons';
 import {
   Button,
   Menu,
@@ -57,7 +57,7 @@ const CustomTreeItem = React.forwardRef(
                     aria-label="Remove item"
                     appearance="subtle"
                     onClick={handleRemoveItem}
-                    icon={<Delete20Regular />}
+                    icon={<DeleteRegular />}
                   />
                 ) : undefined
               }
diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx
index dd8b76d2b3dd8..fcfbbfeb240d6 100644
--- a/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { JSXElement, TreeItemProps } from '@fluentui/react-components';
 import { Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
-import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { EditRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
 import {
   Button,
   Menu,
@@ -35,10 +35,10 @@ const CustomTreeItem = ({ children, ...props }: CustomTreeItemProps) => {
           <TreeItemLayout
             actions={
               <>
-                <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+                <Button aria-label="Edit" appearance="subtle" icon={<EditRegular />} />
                 <Menu>
                   <MenuTrigger disableButtonEnhancement>
-                    <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+                    <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontalRegular />} />
                   </MenuTrigger>
                   <MenuPopover>
                     <MenuList>{commonMenuItems}</MenuList>
diff --git a/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx
index 25026c0d9a3f5..aeb24bcb844cc 100644
--- a/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx
+++ b/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx
@@ -17,7 +17,7 @@ import {
   MenuTrigger,
   useRestoreFocusTarget,
 } from '@fluentui/react-components';
-import { Edit20Regular, MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { EditRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
 
 type FlatItem = HeadlessFlatTreeItemProps & { content: string };
 
@@ -82,10 +82,10 @@ const flatTreeItems: FlatItem[] = [
 
 const ActionsExample = () => (
   <>
-    <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+    <Button aria-label="Edit" appearance="subtle" icon={<EditRegular />} />
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontal20Regular />} />
+        <Button aria-label="More options" appearance="subtle" icon={<MoreHorizontalRegular />} />
       </MenuTrigger>
 
       <MenuPopover>
diff --git a/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx b/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
index 28a5ccd1f7938..3075ef0e401c4 100644
--- a/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
+++ b/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Attach24Regular } from '@fluentui/react-icons';
+import { AttachRegular } from '@fluentui/react-icons';
 import { mergeClasses } from '@griffel/react';
 import { Text } from '@fluentui/react-text';
 import type { JSXElement } from '@fluentui/react-utilities';
@@ -71,7 +71,7 @@ export const FlexSkeleton = (): JSXElement => {
 
 export const IconMediaObject = (): JSXElement => (
   <MediaObject
-    media={<Attach24Regular />}
+    media={<AttachRegular />}
     text={
       <>
         <Text size={400} weight="bold">
@@ -92,7 +92,7 @@ export const TextPositionVariations = (): JSXElement => {
       {positions.map(textPosition => (
         <MediaObject
           textPosition={textPosition}
-          media={<Attach24Regular />}
+          media={<AttachRegular />}
           key={textPosition}
           text={
             <>
@@ -118,7 +118,7 @@ export const TextAlignmentVariations = (): JSXElement => {
         <MediaObject
           textAlignment={alignment}
           key={alignment}
-          media={<Attach24Regular />}
+          media={<AttachRegular />}
           text={
             <>
               <Text size={400} weight="bold">
diff --git a/packages/react-components/theme-designer/src/components/Export/ExportPanel.tsx b/packages/react-components/theme-designer/src/components/Export/ExportPanel.tsx
index d5f0e952d7352..11be6ae7e9b9a 100644
--- a/packages/react-components/theme-designer/src/components/Export/ExportPanel.tsx
+++ b/packages/react-components/theme-designer/src/components/Export/ExportPanel.tsx
@@ -15,7 +15,7 @@ import {
   tokens,
   webLightTheme,
 } from '@fluentui/react-components';
-import { DismissSquare24Regular } from '@fluentui/react-icons';
+import { DismissSquareRegular } from '@fluentui/react-icons';
 import type { JSXElement } from '@fluentui/react-utilities';
 
 import { getBrandValues, objectToString } from '../../utils/toString';
@@ -136,7 +136,7 @@ export const ExportPanel = (): JSXElement => {
                 <Button
                   size="small"
                   appearance="subtle"
-                  icon={<DismissSquare24Regular />}
+                  icon={<DismissSquareRegular />}
                   // eslint-disable-next-line react/jsx-no-bind
                   onClick={onCloseExportPanel}
                 />
diff --git a/tools/storybook-llms-extractor/src/__fixtures__/storybook-store-items.ts b/tools/storybook-llms-extractor/src/__fixtures__/storybook-store-items.ts
index 74e6ff54cf14e..81505cb2c5f8c 100644
--- a/tools/storybook-llms-extractor/src/__fixtures__/storybook-store-items.ts
+++ b/tools/storybook-llms-extractor/src/__fixtures__/storybook-store-items.ts
@@ -442,7 +442,7 @@ export const storybookStoreItems: StorybookStoreItem[] = [
             },
           },
           fullSource:
-            'import * as React from "react";\nimport { Add20Filled, Subtract20Filled } from "@fluentui/react-icons";\nimport {\n  Accordion,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionToggleEventHandler,\n} from "@fluentui/react-components";\n\nexport const ExpandIcon = () => {\n  const [openItem, setOpenItems] = React.useState(0);\n  const handleToggle = React.useCallback<AccordionToggleEventHandler>(\n    (_, data) => {\n      setOpenItems(data.value as number);\n    },\n    []\n  );\n  return (\n    <Accordion onToggle={handleToggle} openItems={openItem}>\n      <AccordionItem value={1}>\n        <AccordionHeader\n          expandIcon={openItem === 1 ? <Subtract20Filled /> : <Add20Filled />}\n        >\n          Accordion Header 1\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 1</div>\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value={2}>\n        <AccordionHeader\n          expandIcon={openItem === 2 ? <Subtract20Filled /> : <Add20Filled />}\n        >\n          Accordion Header 2\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 2</div>\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value={3}>\n        <AccordionHeader\n          expandIcon={openItem === 3 ? <Subtract20Filled /> : <Add20Filled />}\n        >\n          Accordion Header 3\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 3</div>\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n',
+            'import * as React from "react";\nimport { AddFilled, SubtractFilled } from "@fluentui/react-icons";\nimport {\n  Accordion,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionToggleEventHandler,\n} from "@fluentui/react-components";\n\nexport const ExpandIcon = () => {\n  const [openItem, setOpenItems] = React.useState(0);\n  const handleToggle = React.useCallback<AccordionToggleEventHandler>(\n    (_, data) => {\n      setOpenItems(data.value as number);\n    },\n    []\n  );\n  return (\n    <Accordion onToggle={handleToggle} openItems={openItem}>\n      <AccordionItem value={1}>\n        <AccordionHeader\n          expandIcon={openItem === 1 ? <SubtractFilled /> : <AddFilled />}\n        >\n          Accordion Header 1\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 1</div>\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value={2}>\n        <AccordionHeader\n          expandIcon={openItem === 2 ? <SubtractFilled /> : <AddFilled />}\n        >\n          Accordion Header 2\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 2</div>\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value={3}>\n        <AccordionHeader\n          expandIcon={openItem === 3 ? <SubtractFilled /> : <AddFilled />}\n        >\n          Accordion Header 3\n        </AccordionHeader>\n        <AccordionPanel>\n          <div>Accordion Panel 3</div>\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n',
         },
       },
       'components-accordion--expand-icon-position': {
diff --git a/tools/storybook-llms-extractor/src/utils.spec.ts b/tools/storybook-llms-extractor/src/utils.spec.ts
index a6cd11807d7db..66f5fa7f07bd7 100644
--- a/tools/storybook-llms-extractor/src/utils.spec.ts
+++ b/tools/storybook-llms-extractor/src/utils.spec.ts
@@ -452,7 +452,7 @@ describe('generate-llms-docs', () => {
 
         \`\`\`tsx
         import * as React from \\"react\\";
-        import { Add20Filled, Subtract20Filled } from \\"@fluentui/react-icons\\";
+        import { AddFilled, SubtractFilled } from \\"@fluentui/react-icons\\";
         import {
           Accordion,
           AccordionHeader,
@@ -473,7 +473,7 @@ describe('generate-llms-docs', () => {
             <Accordion onToggle={handleToggle} openItems={openItem}>
               <AccordionItem value={1}>
                 <AccordionHeader
-                  expandIcon={openItem === 1 ? <Subtract20Filled /> : <Add20Filled />}
+                  expandIcon={openItem === 1 ? <SubtractFilled /> : <AddFilled />}
                 >
                   Accordion Header 1
                 </AccordionHeader>
@@ -483,7 +483,7 @@ describe('generate-llms-docs', () => {
               </AccordionItem>
               <AccordionItem value={2}>
                 <AccordionHeader
-                  expandIcon={openItem === 2 ? <Subtract20Filled /> : <Add20Filled />}
+                  expandIcon={openItem === 2 ? <SubtractFilled /> : <AddFilled />}
                 >
                   Accordion Header 2
                 </AccordionHeader>
@@ -493,7 +493,7 @@ describe('generate-llms-docs', () => {
               </AccordionItem>
               <AccordionItem value={3}>
                 <AccordionHeader
-                  expandIcon={openItem === 3 ? <Subtract20Filled /> : <Add20Filled />}
+                  expandIcon={openItem === 3 ? <SubtractFilled /> : <AddFilled />}
                 >
                   Accordion Header 3
                 </AccordionHeader>
diff --git a/yarn.lock b/yarn.lock
index bc2a2274150b3..b68aae1b1b15f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2153,31 +2153,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/core@npm:^1.1.0, @emnapi/core@npm:^1.4.3":
-  version: 1.6.0
-  resolution: "@emnapi/core@npm:1.6.0"
+"@emnapi/core@npm:1.9.2, @emnapi/core@npm:^1.1.0, @emnapi/core@npm:^1.4.3":
+  version: 1.9.2
+  resolution: "@emnapi/core@npm:1.9.2"
   dependencies:
-    "@emnapi/wasi-threads": "npm:1.1.0"
+    "@emnapi/wasi-threads": "npm:1.2.1"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/40e384f39104a9f8260e671c0110f8618961afc564afb2e626af79175717a8b5e2d8b2ae3d30194d318a71247e0fc833601666233adfeb244c46cadc06c58a51
+  checksum: 10c0/5500393f953951bad0768fafaa9191f2d938956b20c6d6a79e5ab696a613a25ce6ad23422bc18e86e6ce8deb147619d8d0d7d413a69f84adc01a6633cc353cd9
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.4.3":
-  version: 1.6.0
-  resolution: "@emnapi/runtime@npm:1.6.0"
+"@emnapi/runtime@npm:1.9.2, @emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.4.3":
+  version: 1.9.2
+  resolution: "@emnapi/runtime@npm:1.9.2"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/e3d2452a8fb83bb59fe60dfcf4cff99f9680c13c07dff8ad28639ccc8790151841ef626a67014bde132939bad73dfacc440ade8c3db2ab12693ea9c8ba4d37fb
+  checksum: 10c0/61c3a59e0c36784558b8d58eb02bd04815aa5fb0dbfbaf84d1b3050a78aa0cc63ea129ae806bd1e48062bfeb7fc36eb0e5431740d62f64ea51bdf426404b8caa
   languageName: node
   linkType: hard
 
-"@emnapi/wasi-threads@npm:1.1.0":
-  version: 1.1.0
-  resolution: "@emnapi/wasi-threads@npm:1.1.0"
+"@emnapi/wasi-threads@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@emnapi/wasi-threads@npm:1.2.1"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/e6d54bf2b1e64cdd83d2916411e44e579b6ae35d5def0dea61a3c452d9921373044dff32a8b8473ae60c80692bdc39323e98b96a3f3d87ba6886b24dd0ef7ca1
+  checksum: 10c0/32fcfa81ab396533b2ec1f4082b1ff779a05d9c836bbbd3f4398405b0e6814c0d9503b7993130e37bc6941dbc1ded49f55e9700ae9ca4e803bab2b5bc5deb331
   languageName: node
   linkType: hard
 
@@ -2727,11 +2727,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@fluentui/eslint-plugin-react-icons@npm:0.0.1":
+  version: 0.0.1
+  resolution: "@fluentui/eslint-plugin-react-icons@npm:0.0.1"
+  dependencies:
+    "@typescript-eslint/utils": "npm:7.18.0"
+  peerDependencies:
+    eslint: ">=8.0.0"
+  checksum: 10c0/95541e607c2864b8edd8702db81eb5d8870502c430ea5fd8ca1cf2ecbb8ff882fff1d01825cae5c09dc53fe044d47e315207e53398b7271764ac9bc62203a5d6
+  languageName: node
+  linkType: hard
+
 "@fluentui/eslint-plugin@npm:*, @fluentui/eslint-plugin@workspace:packages/eslint-plugin":
   version: 0.0.0-use.local
   resolution: "@fluentui/eslint-plugin@workspace:packages/eslint-plugin"
   dependencies:
     "@eslint/compat": "npm:1.3.0"
+    "@fluentui/eslint-plugin-react-icons": "npm:0.0.1"
     "@griffel/eslint-plugin": "npm:^2.0.0"
     "@nx/eslint-plugin": "npm:21.6.10"
     "@rnx-kit/eslint-plugin": "npm:^0.8.4"
@@ -2811,8 +2823,11 @@ __metadata:
     "@eslint/compat": "npm:1.3.0"
     "@eslint/js": "npm:9.26.0"
     "@floating-ui/dom": "npm:1.6.12"
+    "@fluentui/eslint-plugin-react-icons": "npm:0.0.1"
     "@fluentui/react-compiler-analyzer": "npm:0.0.0-experimental.rc-analyzer.20260526-7c5862ce36.0"
-    "@fluentui/react-icons": "npm:^2.0.306"
+    "@fluentui/react-icons": "npm:^2.0.339"
+    "@fluentui/react-icons-atomic-webpack-loader": "npm:0.0.6"
+    "@fluentui/react-icons-font-subsetting-webpack-plugin": "npm:2.0.339"
     "@fluentui/react-icons-northstar": "npm:0.66.5"
     "@fluentui/react-integration-tester": "npm:*"
     "@fluentui/react-northstar": "npm:0.66.5"
@@ -4433,6 +4448,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@fluentui/react-icons-atomic-webpack-loader@npm:0.0.6":
+  version: 0.0.6
+  resolution: "@fluentui/react-icons-atomic-webpack-loader@npm:0.0.6"
+  dependencies:
+    magic-string: "npm:^0.30.0"
+    oxc-parser: "npm:^0.125.0"
+  peerDependencies:
+    webpack: ">=5.0.0"
+  checksum: 10c0/71de8245669185fdd717b379eef8e663d4705358ebd48f8ea23a758906fd12e0c03547abeef99436bfa4ab1879ffd7c502f97b8debeee0959daa653bd5beb1ca
+  languageName: node
+  linkType: hard
+
 "@fluentui/react-icons-compat-stories@workspace:packages/react-components/react-icons-compat/stories":
   version: 0.0.0-use.local
   resolution: "@fluentui/react-icons-compat-stories@workspace:packages/react-components/react-icons-compat/stories"
@@ -4458,6 +4485,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@fluentui/react-icons-font-subsetting-webpack-plugin@npm:2.0.339":
+  version: 2.0.339
+  resolution: "@fluentui/react-icons-font-subsetting-webpack-plugin@npm:2.0.339"
+  dependencies:
+    subset-font: "npm:^1.4.0"
+  peerDependencies:
+    "@rspack/core": ">=2.1.0"
+    webpack: ">=5.0.0"
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10c0/66d72f70a4cd2fc3d862c9949df74152395f02c5359f87eb50a0af145830c1d88673452f48326810ab4982e9dea04e021602736b0dbf184346a1fe3ab0bd8218
+  languageName: node
+  linkType: hard
+
 "@fluentui/react-icons-mdl2-branded@npm:*, @fluentui/react-icons-mdl2-branded@workspace:packages/react-icons-mdl2-branded":
   version: 0.0.0-use.local
   resolution: "@fluentui/react-icons-mdl2-branded@workspace:packages/react-icons-mdl2-branded"
@@ -4503,15 +4547,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fluentui/react-icons@npm:^2.0.237, @fluentui/react-icons@npm:^2.0.239, @fluentui/react-icons@npm:^2.0.245, @fluentui/react-icons@npm:^2.0.306":
-  version: 2.0.311
-  resolution: "@fluentui/react-icons@npm:2.0.311"
+"@fluentui/react-icons@npm:^2.0.237, @fluentui/react-icons@npm:^2.0.239, @fluentui/react-icons@npm:^2.0.245, @fluentui/react-icons@npm:^2.0.306, @fluentui/react-icons@npm:^2.0.339":
+  version: 2.0.339
+  resolution: "@fluentui/react-icons@npm:2.0.339"
   dependencies:
-    "@griffel/react": "npm:^1.0.0"
+    "@griffel/react": "npm:^1.6.1"
     tslib: "npm:^2.1.0"
   peerDependencies:
     react: ">=16.8.0 <20.0.0"
-  checksum: 10c0/92374c68a5271afb4f8ed7e42e012bf422b3569aa0209216b65a2ec0d828bf011c1a6eccc438ff5fea7f49bf114df919ce2da861f3dcc21091025c1a4e430563
+  checksum: 10c0/343b4a003cfca6e02d8ada30585cee18be5a28c079275733529f2ce0727e8ceb3252aae8353bf5c42f4297017baae7bbf73f84f097d5d8c2c2a855c7eb776a7d
   languageName: node
   linkType: hard
 
@@ -6802,17 +6846,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@griffel/core@npm:^1.16.0, @griffel/core@npm:^1.19.2":
-  version: 1.19.2
-  resolution: "@griffel/core@npm:1.19.2"
+"@griffel/core@npm:^1.16.0, @griffel/core@npm:^1.21.3":
+  version: 1.21.3
+  resolution: "@griffel/core@npm:1.21.3"
   dependencies:
     "@emotion/hash": "npm:^0.9.0"
-    "@griffel/style-types": "npm:^1.3.0"
-    csstype: "npm:^3.1.3"
+    "@griffel/style-types": "npm:^1.4.2"
+    csstype: "npm:^3.2.3"
     rtl-css-js: "npm:^1.16.1"
-    stylis: "npm:^4.2.0"
+    stylis: "npm:^4.4.0"
     tslib: "npm:^2.1.0"
-  checksum: 10c0/6e086ba2132e130360e14d1ab0493f6b7e34e3dba82c928a0a438ac7f48628555845ba5366a8dfaaf163ee67b3bca1776906347d02dc0ab32c03ef85bd113ba2
+  checksum: 10c0/9bfa315a90b2351e3292798cf7aeaa64709aa6acf29c6dd8b9c1fc3e4805dae4c81e1c0d1b4767a3a4772c66dd55a10788e36ac472f2e7ca08db43ec14f15c11
   languageName: node
   linkType: hard
 
@@ -6839,15 +6883,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@griffel/react@npm:^1.0.0, @griffel/react@npm:^1.5.32":
-  version: 1.5.32
-  resolution: "@griffel/react@npm:1.5.32"
+"@griffel/react@npm:^1.5.32, @griffel/react@npm:^1.6.1":
+  version: 1.7.7
+  resolution: "@griffel/react@npm:1.7.7"
   dependencies:
-    "@griffel/core": "npm:^1.19.2"
+    "@griffel/core": "npm:^1.21.3"
     tslib: "npm:^2.1.0"
   peerDependencies:
-    react: ">=16.8.0 <20.0.0"
-  checksum: 10c0/ae451721830808dc9868d496869d38096905554f13c8a3cbc7bbbe6c235fc23b6ef39a294ee005b77a5af687634672899eb8855c302aa1dd6f08bc24e1072c60
+    react: ">=16.14.0 <20.0.0"
+  checksum: 10c0/6b2a81b3965efb4850efefbbb141dbe5a25331c22a2c0a567b909388e31f8f859148951d92010e36eac414ebc494969b0d2d6e2820b40413022ec6a3f5e9a276
   languageName: node
   linkType: hard
 
@@ -6861,12 +6905,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@griffel/style-types@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@griffel/style-types@npm:1.3.0"
+"@griffel/style-types@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@griffel/style-types@npm:1.4.2"
   dependencies:
-    csstype: "npm:^3.1.3"
-  checksum: 10c0/94c63ed89398e154f5ced769b25ff7e14471c991672f32f69ac27daa463f880650cb2d7d5ef7e00811e3cd3a6cd2694b9ef861d9bc294cf72838e31761d72ef8
+    csstype: "npm:^3.2.3"
+  checksum: 10c0/5049b59d5f978c7d34774e49da6824c9f44178bc0261f38f5359512661a5cb6da827ecb855cc6237bc9ffdf2e584e6cbe8b622f2bcac347eb1307920ce583652
   languageName: node
   linkType: hard
 
@@ -8041,6 +8085,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^1.1.3":
+  version: 1.2.3
+  resolution: "@napi-rs/wasm-runtime@npm:1.2.3"
+  dependencies:
+    "@tybys/wasm-util": "npm:^0.10.3"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.4
+    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.4
+  checksum: 10c0/6da0a4bf9df79e9abfb3e3d462f6a5d42889be39426040038c9dd5925865585d7dbd06dd439c2ffc20f49ef2751412da5bd748cfb3c5b049142d72c0550f6f79
+  languageName: node
+  linkType: hard
+
 "@nevware21/ts-async@npm:>= 0.5.5 < 0.6.0":
   version: 0.5.5
   resolution: "@nevware21/ts-async@npm:0.5.5"
@@ -8666,6 +8722,157 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@oxc-parser/binding-android-arm-eabi@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-android-arm-eabi@npm:0.125.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-android-arm64@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-android-arm64@npm:0.125.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-darwin-arm64@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-darwin-arm64@npm:0.125.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-darwin-x64@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-darwin-x64@npm:0.125.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-freebsd-x64@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-freebsd-x64@npm:0.125.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm-gnueabihf@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-arm-gnueabihf@npm:0.125.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm-musleabihf@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-arm-musleabihf@npm:0.125.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm64-gnu@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-arm64-gnu@npm:0.125.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-arm64-musl@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-arm64-musl@npm:0.125.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-ppc64-gnu@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-ppc64-gnu@npm:0.125.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-riscv64-gnu@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-riscv64-gnu@npm:0.125.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-riscv64-musl@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-riscv64-musl@npm:0.125.0"
+  conditions: os=linux & cpu=riscv64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-s390x-gnu@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-s390x-gnu@npm:0.125.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-x64-gnu@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-x64-gnu@npm:0.125.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-linux-x64-musl@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-linux-x64-musl@npm:0.125.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-openharmony-arm64@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-openharmony-arm64@npm:0.125.0"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-wasm32-wasi@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-wasm32-wasi@npm:0.125.0"
+  dependencies:
+    "@emnapi/core": "npm:1.9.2"
+    "@emnapi/runtime": "npm:1.9.2"
+    "@napi-rs/wasm-runtime": "npm:^1.1.3"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-arm64-msvc@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-win32-arm64-msvc@npm:0.125.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-ia32-msvc@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-win32-ia32-msvc@npm:0.125.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@oxc-parser/binding-win32-x64-msvc@npm:0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-parser/binding-win32-x64-msvc@npm:0.125.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@oxc-project/types@npm:^0.125.0":
+  version: 0.125.0
+  resolution: "@oxc-project/types@npm:0.125.0"
+  checksum: 10c0/95e3d64cd8e0fb6e909ed34717e8411bf02508dded0fd7f19e74e3e56948647b8477b6d80493368793e737f35d336de634f6c0acd52f409ff955c11b8a018c25
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-android-arm64@npm:2.5.1":
   version: 2.5.1
   resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
@@ -10037,12 +10244,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tybys/wasm-util@npm:^0.10.0":
-  version: 0.10.1
-  resolution: "@tybys/wasm-util@npm:0.10.1"
+"@tybys/wasm-util@npm:^0.10.0, @tybys/wasm-util@npm:^0.10.3":
+  version: 0.10.3
+  resolution: "@tybys/wasm-util@npm:0.10.3"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/b255094f293794c6d2289300c5fbcafbb5532a3aed3a5ffd2f8dc1828e639b88d75f6a376dd8f94347a44813fd7a7149d8463477a9a49525c8b2dcaa38c2d1e8
+  checksum: 10c0/fd2bd2a79c6cd8c79ed1cf7a0fa375c64589264c88a27acaf9756d556b453ea222b62a4f68dd2fbb8b3a78b6bab3b1f4fb2431b6afc6aeda8344b53a521a1cd3
   languageName: node
   linkType: hard
 
@@ -11490,6 +11697,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:7.18.0, @typescript-eslint/utils@npm:^7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/utils@npm:7.18.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:8.46.2":
   version: 8.46.2
   resolution: "@typescript-eslint/utils@npm:8.46.2"
@@ -11520,20 +11741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:^7.18.0":
-  version: 7.18.0
-  resolution: "@typescript-eslint/utils@npm:7.18.0"
-  dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:7.18.0"
-    "@typescript-eslint/types": "npm:7.18.0"
-    "@typescript-eslint/typescript-estree": "npm:7.18.0"
-  peerDependencies:
-    eslint: ^8.56.0
-  checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:7.18.0":
   version: 7.18.0
   resolution: "@typescript-eslint/visitor-keys@npm:7.18.0"
@@ -15538,10 +15745,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "csstype@npm:3.1.3"
-  checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
+"csstype@npm:^3.0.2, csstype@npm:^3.1.3, csstype@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
   languageName: node
   linkType: hard
 
@@ -18924,6 +19131,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fontverter@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "fontverter@npm:2.0.0"
+  dependencies:
+    wawoff2: "npm:^2.0.0"
+    woff2sfnt-sfnt2woff: "npm:^1.0.0"
+  checksum: 10c0/372f272fca749814594874050ef019e26741c85553b6b1ccf1490477d2f0a303869c35e95650b68866a138b60e0ec7baa2a1113d640ce54fd15a621a5ed35d2a
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3, for-each@npm:^0.3.5":
   version: 0.3.5
   resolution: "for-each@npm:0.3.5"
@@ -19838,6 +20055,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"harfbuzzjs@npm:^0.3.0":
+  version: 0.3.6
+  resolution: "harfbuzzjs@npm:0.3.6"
+  checksum: 10c0/96eedbae5bb8b03a39ede5e0d925659704b4a8b69ae338dde91de462a3ce11fb47f8d37a29acc6b049838827e79cf77a1784631f83044f5d388ffbc778a43b31
+  languageName: node
+  linkType: hard
+
 "harmony-reflect@npm:^1.4.6":
   version: 1.6.2
   resolution: "harmony-reflect@npm:1.6.2"
@@ -23447,7 +23671,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.12, magic-string@npm:^0.30.17, magic-string@npm:^0.30.5":
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.12, magic-string@npm:^0.30.17, magic-string@npm:^0.30.5":
   version: 0.30.21
   resolution: "magic-string@npm:0.30.21"
   dependencies:
@@ -25937,6 +26161,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oxc-parser@npm:^0.125.0":
+  version: 0.125.0
+  resolution: "oxc-parser@npm:0.125.0"
+  dependencies:
+    "@oxc-parser/binding-android-arm-eabi": "npm:0.125.0"
+    "@oxc-parser/binding-android-arm64": "npm:0.125.0"
+    "@oxc-parser/binding-darwin-arm64": "npm:0.125.0"
+    "@oxc-parser/binding-darwin-x64": "npm:0.125.0"
+    "@oxc-parser/binding-freebsd-x64": "npm:0.125.0"
+    "@oxc-parser/binding-linux-arm-gnueabihf": "npm:0.125.0"
+    "@oxc-parser/binding-linux-arm-musleabihf": "npm:0.125.0"
+    "@oxc-parser/binding-linux-arm64-gnu": "npm:0.125.0"
+    "@oxc-parser/binding-linux-arm64-musl": "npm:0.125.0"
+    "@oxc-parser/binding-linux-ppc64-gnu": "npm:0.125.0"
+    "@oxc-parser/binding-linux-riscv64-gnu": "npm:0.125.0"
+    "@oxc-parser/binding-linux-riscv64-musl": "npm:0.125.0"
+    "@oxc-parser/binding-linux-s390x-gnu": "npm:0.125.0"
+    "@oxc-parser/binding-linux-x64-gnu": "npm:0.125.0"
+    "@oxc-parser/binding-linux-x64-musl": "npm:0.125.0"
+    "@oxc-parser/binding-openharmony-arm64": "npm:0.125.0"
+    "@oxc-parser/binding-wasm32-wasi": "npm:0.125.0"
+    "@oxc-parser/binding-win32-arm64-msvc": "npm:0.125.0"
+    "@oxc-parser/binding-win32-ia32-msvc": "npm:0.125.0"
+    "@oxc-parser/binding-win32-x64-msvc": "npm:0.125.0"
+    "@oxc-project/types": "npm:^0.125.0"
+  dependenciesMeta:
+    "@oxc-parser/binding-android-arm-eabi":
+      optional: true
+    "@oxc-parser/binding-android-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-arm64":
+      optional: true
+    "@oxc-parser/binding-darwin-x64":
+      optional: true
+    "@oxc-parser/binding-freebsd-x64":
+      optional: true
+    "@oxc-parser/binding-linux-arm-gnueabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm-musleabihf":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-arm64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-ppc64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-riscv64-musl":
+      optional: true
+    "@oxc-parser/binding-linux-s390x-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-gnu":
+      optional: true
+    "@oxc-parser/binding-linux-x64-musl":
+      optional: true
+    "@oxc-parser/binding-openharmony-arm64":
+      optional: true
+    "@oxc-parser/binding-wasm32-wasi":
+      optional: true
+    "@oxc-parser/binding-win32-arm64-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-ia32-msvc":
+      optional: true
+    "@oxc-parser/binding-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/0b5a94b15c43323a57005a953bebecb82d171a24a4474a330d248d76ae05cd0c36cd37d3a2542743ea8df3e6764ecc6505e91d2ceb53a3a8058163e44611503a
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^3.0.0":
   version: 3.0.0
   resolution: "p-cancelable@npm:3.0.0"
@@ -26162,7 +26456,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pako@npm:^1.0.3, pako@npm:~1.0.2":
+"pako@npm:^1.0.3, pako@npm:^1.0.7, pako@npm:~1.0.2":
   version: 1.0.11
   resolution: "pako@npm:1.0.11"
   checksum: 10c0/86dd99d8b34c3930345b8bbeb5e1cd8a05f608eeb40967b293f72fe469d0e9c88b783a8777e4cc7dc7c91ce54c5e93d88ff4b4f060e6ff18408fd21030d9ffbe
@@ -30106,10 +30400,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "stylis@npm:4.3.0"
-  checksum: 10c0/5a9f7e0cf2a15591efaacc1c6416a8785d2b57522cd38bb8e0a81a03c23d3bea2363659fa5f9d486a73d1b6ebaf1d32826ce1c1974c95afdb5b495d98acb25c0
+"stylis@npm:^4.2.0, stylis@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "stylis@npm:4.4.0"
+  checksum: 10c0/259be096d90dfbfe903c8656dcb7591e52a421e577e950ef42ebd9ca02f387623a1165dd08761492fb6e92a7a562d62a53a694a10b0a2f6dcd7a0db107b4bf55
+  languageName: node
+  linkType: hard
+
+"subset-font@npm:^1.4.0":
+  version: 1.7.1
+  resolution: "subset-font@npm:1.7.1"
+  dependencies:
+    fontverter: "npm:^2.0.0"
+    harfbuzzjs: "npm:^0.3.0"
+    lodash: "npm:^4.17.21"
+    p-limit: "npm:^3.1.0"
+  checksum: 10c0/2ad9406ed0693a8e9988917d3346267600e1462776509f2d9c929094724a30d71375a4a0ebd4118f096dee6d7226924dfd3e898d2e0bedf2296cbbacb8bab4df
   languageName: node
   linkType: hard
 
@@ -32226,6 +32532,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wawoff2@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "wawoff2@npm:2.0.1"
+  dependencies:
+    argparse: "npm:^2.0.1"
+  bin:
+    woff2_compress.js: bin/woff2_compress.js
+    woff2_decompress.js: bin/woff2_decompress.js
+  checksum: 10c0/98a286b60114e15ed578bbeeef1759b4890a1e8106e1486d8d0d4106b8e6c7a99c4c1d1b64afc76a83893dae040cc19a59dd64cffd5754b5337b5c82efed3d12
+  languageName: node
+  linkType: hard
+
 "wbuf@npm:^1.1.0, wbuf@npm:^1.7.3":
   version: 1.7.3
   resolution: "wbuf@npm:1.7.3"
@@ -32739,6 +33057,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"woff2sfnt-sfnt2woff@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "woff2sfnt-sfnt2woff@npm:1.0.0"
+  dependencies:
+    pako: "npm:^1.0.7"
+  checksum: 10c0/2af93bdb98c511e1615bd2f31df023bf96c91922197ab7c1401177a0e77ae3528b53b0aeef57ee69e79857cffc8bdb974d7557089b0d999f1765c41ebc1e7ab5
+  languageName: node
+  linkType: hard
+
 "word-wrap@npm:^1.2.5":
   version: 1.2.5
   resolution: "word-wrap@npm:1.2.5"