diff --git a/.changeset/twenty-spoons-give.md b/.changeset/twenty-spoons-give.md
new file mode 100644
index 00000000000..4e5c00442c6
--- /dev/null
+++ b/.changeset/twenty-spoons-give.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+chore(AvatarPair): Convert AvatarPair to CSS modules
diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png
index aea3c6eb037..306083cc0dd 100644
Binary files a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png
index 9099b96851d..7b58f631af4 100644
Binary files a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png
index 6e8ff89ea9d..306083cc0dd 100644
Binary files a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-linux.png differ
diff --git a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png
index aea3c6eb037..306083cc0dd 100644
Binary files a/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png and b/.playwright/snapshots/components/AvatarPair.test.ts-snapshots/AvatarPair-Parent-Square-light-tritanopia-linux.png differ
diff --git a/packages/react/src/AvatarPair/AvatarPair.module.css b/packages/react/src/AvatarPair/AvatarPair.module.css
new file mode 100644
index 00000000000..9c572fdbedd
--- /dev/null
+++ b/packages/react/src/AvatarPair/AvatarPair.module.css
@@ -0,0 +1,20 @@
+.AvatarPair {
+  position: relative;
+  display: inline-flex;
+
+  [data-component='Avatar']:last-child,
+  [data-component='SkeletonAvatar']:last-child {
+    position: absolute;
+    right: -15%;
+    bottom: -9%;
+    box-shadow: var(--avatar-shadow);
+  }
+
+  [data-component='SkeletonAvatar']:last-child {
+    box-shadow: inset var(--avatar-shadow);
+  }
+}
+
+.AvatarChild {
+  background-color: var(--bgColor-default);
+}
diff --git a/packages/react/src/AvatarPair/AvatarPair.tsx b/packages/react/src/AvatarPair/AvatarPair.tsx
index a203ed3ab6c..b6f0aa1b967 100644
--- a/packages/react/src/AvatarPair/AvatarPair.tsx
+++ b/packages/react/src/AvatarPair/AvatarPair.tsx
@@ -1,31 +1,13 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, {type HTMLProps} from 'react'
 import type {AvatarProps} from '../Avatar'
 import Avatar from '../Avatar'
-import {get} from '../constants'
-import Box, {type BoxProps} from '../Box'
 import {SkeletonAvatar} from '../experimental/Skeleton/SkeletonAvatar'
+import classes from './AvatarPair.module.css'
+import {clsx} from 'clsx'
 
-const StyledAvatarPair = styled(Box)`
-  position: relative;
-  display: inline-flex;
+export type AvatarPairProps = HTMLProps<HTMLDivElement>
 
-  [data-component='Avatar']:last-child,
-  [data-component='SkeletonAvatar']:last-child {
-    position: absolute;
-    right: -15%;
-    bottom: -9%;
-    box-shadow: ${get('shadows.avatar.childShadow')};
-  }
-
-  [data-component='SkeletonAvatar']:last-child {
-    box-shadow: inset ${get('shadows.avatar.childShadow')};
-  }
-`
-
-export type AvatarPairProps = BoxProps
-
-const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
+const AvatarPair = ({children, className, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
     if (!React.isValidElement(child)) {
       return child
@@ -39,13 +21,16 @@ const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
       return <SkeletonAvatar {...child.props} size={20} />
     }
 
-    return <Avatar bg="canvas.default" {...child.props} size={20} />
+    return <Avatar className={clsx(child.props.className, classes.AvatarChild)} {...child.props} size={20} />
   })
 
-  return <StyledAvatarPair {...rest}>{avatars}</StyledAvatarPair>
+  return (
+    <div className={clsx(className, classes.AvatarPair)} {...rest}>
+      {avatars}
+    </div>
+  )
 }
 
-// styled() changes this
 AvatarPair.displayName = 'AvatarPair'
 
 export default AvatarPair