diff --git a/packages/react-icons/src/utils/constants.tsx b/packages/react-icons/src/utils/constants.tsx
index 2d4d22d75a..81a894aa22 100644
--- a/packages/react-icons/src/utils/constants.tsx
+++ b/packages/react-icons/src/utils/constants.tsx
@@ -1,3 +1,4 @@
 export const iconFilledClassName = "fui-Icon-filled";
 export const iconRegularClassName = "fui-Icon-regular";
-export const iconLightClassName = "fui-Icon-light";
\ No newline at end of file
+export const iconLightClassName = "fui-Icon-light";
+export const fontIconClassName = "fui-Icon-font"
\ No newline at end of file
diff --git a/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx b/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
index 894fc1c6c1..c5541b7569 100644
--- a/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
+++ b/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { FluentIconsProps } from '../FluentIconsProps.types';
 import { makeStyles, makeStaticStyles, mergeClasses } from "@griffel/react";
 import { useIconState } from '../useIconState';
+import { fontIconClassName } from '../constants';
 
 import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
 import fontFilledWoff from './FluentSystemIcons-Filled.woff';
@@ -96,7 +97,7 @@ export function createFluentFontIcon(displayName: string, codepoint: string, fon
     const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & { codepoint: string} = (props) => {
         useStaticStyles();
         const styles = useRootStyles();
-        const className = mergeClasses(styles.root, styles[font], props.className);
+        const className = mergeClasses(styles.root, styles[font], fontIconClassName, props.className);
         const state = useIconState<React.HTMLAttributes<HTMLElement>, HTMLElement>({...props, className}, { flipInRtl: options?.flipInRtl });