diff --git a/.changeset/tame-boats-hide.md b/.changeset/tame-boats-hide.md
new file mode 100644
index 00000000000..d13e7497cc4
--- /dev/null
+++ b/.changeset/tame-boats-hide.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Refactor Avatar component to use CSS modules behind feature flag
diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts
index dab9f9de809..cbf9922090b 100644
--- a/e2e/components/Avatar.test.ts
+++ b/e2e/components/Avatar.test.ts
@@ -3,139 +3,151 @@ import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
 test.describe('Avatar', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+  for (const enabled of [true, false]) {
+    test.describe(`Feature flag enabled: ${enabled}`, () => {
+      test.describe('Default', () => {
+        for (const theme of themes) {
+          test.describe(theme, () => {
+            test('default @vrt', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar--default',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Default.${theme}.png`)
-        })
+              // Default state
+              expect(await page.screenshot()).toMatchSnapshot(`Avatar.Default.${theme}.png`)
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
+            test('axe @aat', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar--default',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
+              await expect(page).toHaveNoViolations({
+                rules: {
+                  'color-contrast': {
+                    enabled: theme !== 'dark_dimmed',
+                  },
+                },
+              })
+            })
           })
-        })
+        }
       })
-    }
-  })
 
-  test.describe('Size', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--size',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+      test.describe('Size', () => {
+        for (const theme of themes) {
+          test.describe(theme, () => {
+            test('default @vrt', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--size',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size.${theme}.png`)
-        })
+              // Default state
+              expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size.${theme}.png`)
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--size',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
+            test('axe @aat', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--size',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
+              await expect(page).toHaveNoViolations({
+                rules: {
+                  'color-contrast': {
+                    enabled: theme !== 'dark_dimmed',
+                  },
+                },
+              })
+            })
           })
-        })
+        }
       })
-    }
-  })
 
-  test.describe('Size Responsive', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--size-responsive',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+      test.describe('Size Responsive', () => {
+        for (const theme of themes) {
+          test.describe(theme, () => {
+            test('default @vrt', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--size-responsive',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size Responsive.${theme}.png`)
-        })
+              // Default state
+              expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size Responsive.${theme}.png`)
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--size-responsive',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
+            test('axe @aat', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--size-responsive',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
+              await expect(page).toHaveNoViolations({
+                rules: {
+                  'color-contrast': {
+                    enabled: theme !== 'dark_dimmed',
+                  },
+                },
+              })
+            })
           })
-        })
+        }
       })
-    }
-  })
 
-  test.describe('Square', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--square',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+      test.describe('Square', () => {
+        for (const theme of themes) {
+          test.describe(theme, () => {
+            test('default @vrt', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--square',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Avatar.Square.${theme}.png`)
-        })
+              // Default state
+              expect(await page.screenshot()).toMatchSnapshot(`Avatar.Square.${theme}.png`)
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-avatar-features--square',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
+            test('axe @aat', async ({page}) => {
+              await visit(page, {
+                id: 'components-avatar-features--square',
+                globals: {
+                  colorScheme: theme,
+                  primer_react_css_modules_team: enabled,
+                },
+              })
+              await expect(page).toHaveNoViolations({
+                rules: {
+                  'color-contrast': {
+                    enabled: theme !== 'dark_dimmed',
+                  },
+                },
+              })
+            })
           })
-        })
+        }
       })
-    }
-  })
+    })
+  }
 })
diff --git a/packages/react/src/Avatar/Avatar.features.stories.tsx b/packages/react/src/Avatar/Avatar.features.stories.tsx
index d9d85814c15..dc5ee4b0636 100644
--- a/packages/react/src/Avatar/Avatar.features.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.features.stories.tsx
@@ -9,6 +9,16 @@ export default {
 
 export const Square = () => <Avatar square alt="primer" src="https://avatars.githubusercontent.com/primer" />
 
+export const SquareSxProp = () => (
+  <Avatar
+    square
+    sx={{border: '1px solid red'}}
+    size={40}
+    alt="primer"
+    src="https://avatars.githubusercontent.com/primer"
+  />
+)
+
 export const Size = () => (
   <div>
     <Avatar size={4} alt="mona" src="https://avatars.githubusercontent.com/u/92997159?v=4" />
diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
new file mode 100644
index 00000000000..db820ccc99f
--- /dev/null
+++ b/packages/react/src/Avatar/Avatar.module.css
@@ -0,0 +1,31 @@
+:where(.Avatar) {
+  display: inline-block;
+  width: var(--avatarSize-regular);
+  height: var(--avatarSize-regular);
+  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
+
+  &:where([data-square]) {
+    border-radius: var(--borderRadius-medium);
+  }
+
+  &:where([data-responsive]) {
+    @media screen and (--viewportRange-narrow) {
+      width: var(--avatarSize-narrow);
+      height: var(--avatarSize-narrow);
+    }
+
+    @media screen and (--viewportRange-regular) {
+      width: var(--avatarSize-regular);
+      height: var(--avatarSize-regular);
+    }
+
+    @media screen and (--viewportRange-wide) {
+      width: var(--avatarSize-wide);
+      height: var(--avatarSize-wide);
+    }
+  }
+}
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index a24622b47c7..2f4cb8d0a5d 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -1,4 +1,6 @@
+import {clsx} from 'clsx'
 import React from 'react'
+import Box from '../Box'
 import styled from 'styled-components'
 import {get} from '../constants'
 import type {BetterCssProperties, BetterSystemStyleObject, SxProp} from '../sx'
@@ -8,6 +10,8 @@ import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 import {defaultSxProp} from '../utils/defaultSxProp'
+import classes from './Avatar.module.css'
+import {useFeatureFlag} from '../FeatureFlags'
 
 export const DEFAULT_AVATAR_SIZE = 20
 
@@ -41,10 +45,12 @@ const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
 export type AvatarProps = ComponentProps<typeof StyledAvatar>
 
 const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
-  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, ...rest},
+  {alt = '', size = DEFAULT_AVATAR_SIZE, square = false, sx: sxProp = defaultSxProp, className, ...rest},
   ref,
 ) {
-  const avatarSx = isResponsiveValue(size)
+  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const isResponsive = isResponsiveValue(size)
+  const avatarSx = isResponsive
     ? merge<BetterCssProperties | BetterSystemStyleObject>(
         getBreakpointDeclarations(
           size,
@@ -54,8 +60,65 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
         sxProp as SxProp,
       )
     : merge({'--avatar-size': `${size}px`} as React.CSSProperties, sxProp as SxProp)
+
+  if (enabled) {
+    const cssSizeVars = {} as Record<string, string>
+
+    if (isResponsive) {
+      for (const [key, value] of Object.entries(size)) {
+        cssSizeVars[`--avatarSize-${key}`] = `${value}px`
+      }
+    } else {
+      cssSizeVars['--avatarSize-regular'] = `${size}px`
+    }
+
+    if (sxProp !== defaultSxProp) {
+      return (
+        <Box
+          as="img"
+          data-component="Avatar"
+          className={clsx(className, classes.Avatar)}
+          ref={ref}
+          alt={alt}
+          data-responsive={isResponsive ? '' : undefined}
+          data-square={square ? '' : undefined}
+          width={isResponsive ? undefined : size}
+          height={isResponsive ? undefined : size}
+          // @ts-ignore - it's not allowing CSS properties here
+          style={cssSizeVars as React.CSSProperties}
+          sx={sxProp}
+          {...rest}
+        />
+      )
+    }
+
+    return (
+      <img
+        data-component="Avatar"
+        className={clsx(className, classes.Avatar)}
+        alt={alt}
+        data-responsive={isResponsive ? 'true' : undefined}
+        data-square={square ? 'true' : undefined}
+        width={isResponsive ? undefined : size}
+        height={isResponsive ? undefined : size}
+        // @ts-ignore - it's not allowing CSS properties here
+        style={cssSizeVars as React.CSSProperties}
+        {...rest}
+      />
+    )
+  }
+
   return (
-    <StyledAvatar data-component="Avatar" ref={ref} alt={alt} size={size} square={square} sx={avatarSx} {...rest} />
+    <StyledAvatar
+      data-component="Avatar"
+      className={className}
+      ref={ref}
+      alt={alt}
+      size={size}
+      square={square}
+      sx={avatarSx}
+      {...rest}
+    />
   )
 })