diff --git a/.changeset/hot-apples-press.md b/.changeset/hot-apples-press.md
new file mode 100644
index 00000000000..a9cd6754f93
--- /dev/null
+++ b/.changeset/hot-apples-press.md
@@ -0,0 +1,14 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `size` prop values for the Avatar component. See the following table for the new prop mappings.
+
+| Before                    | After       |
+| ------------------------- | ----------- |
+| `size="extraSmall"`       | `size="xs"` |
+| `size="small"`            | `size="sm"` |
+| `size="medium"`           | `size="md"` |
+| `size="large"`            | `size="lg"` |
+| `size="xl-experimental"`  | `size="xl"` |
+| `size="2xl-experimental"` | `size="xl"` |
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
index 21b2ede1d12..35f0ea06359 100644
--- a/documentation/guides/migrating-from-v11-to-v12.md
+++ b/documentation/guides/migrating-from-v11-to-v12.md
@@ -8,6 +8,22 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 ## Quick migration guide
 
+**Avatar**
+
+`npx @shopify/polaris-migrator v12-react-avatar-component <path>`
+
+- Remove the `customer` prop
+- Replace the `size` prop with the new mapping below
+
+| Before                    | After       |
+| ------------------------- | ----------- |
+| `size="extraSmall"`       | `size="xs"` |
+| `size="small"`            | `size="sm"` |
+| `size="medium"`           | `size="md"` |
+| `size="large"`            | `size="lg"` |
+| `size="xl-experimental"`  | `size="xl"` |
+| `size="2xl-experimental"` | `size="xl"` |
+
 **Badge**
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Badge" --from="status" --to="tone"`
diff --git a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
index 2459bc2e379..5593fe89e7c 100644
--- a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
+++ b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
@@ -1,4 +1,10 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
+import type {
+  API,
+  FileInfo,
+  Options,
+  ArrayExpression,
+  ASTPath,
+} from 'jscodeshift';
 
 import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {
@@ -69,15 +75,12 @@ export default function transformer(
       return true;
     })
     .find(j.ArrayExpression)
-    .replaceWith((nodePath) => {
+    .replaceWith((nodePath: ASTPath<ArrayExpression>) => {
       const arrayOfBreadcrumbs = nodePath.node.elements;
 
       if (arrayOfBreadcrumbs.length === 0) {
-        removeJSXAttributes(
-          j,
-          nodePath.parentPath.parentPath.parentPath.parentPath,
-          'breadcrumbs',
-        );
+        const element = j(nodePath).closest(j.JSXElement).paths()[0];
+        removeJSXAttributes(j, element, 'breadcrumbs');
         return;
       }
 
diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts
new file mode 100644
index 00000000000..6f89565e37f
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts
@@ -0,0 +1,14 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-avatar-component';
+const fixtures = ['v12-react-avatar-component'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    options: {
+      relative: fixture.includes('relative') ? true : undefined,
+    },
+  });
+}
diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx
new file mode 100644
index 00000000000..127b8ea2b2f
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <Avatar customer size="unknown" />
+      <Avatar customer size="extraSmall" />
+      <Avatar customer size="small" />
+      <Avatar customer size="medium" />
+      <Avatar customer size="large" />
+      <Avatar size="xl-experimental" />
+      <Avatar size="2xl-experimental" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx
new file mode 100644
index 00000000000..123720922c3
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <Avatar size="unknown" />
+      <Avatar size="xs" />
+      <Avatar size="sm" />
+      <Avatar size="md" />
+      <Avatar size="lg" />
+      <Avatar size="xl" />
+      <Avatar size="xl" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts b/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts
new file mode 100644
index 00000000000..fe692d4805c
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts
@@ -0,0 +1,66 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+
+import {
+  getImportSpecifierName,
+  hasImportDeclaration,
+  hasImportSpecifier,
+  normalizeImportSourcePaths,
+} from '../../utilities/imports';
+import {removeJSXAttributes, replaceJSXAttributes} from '../../utilities/jsx';
+
+export interface MigrationOptions extends Options {
+  relative?: boolean;
+}
+
+export default function transformer(
+  file: FileInfo,
+  {jscodeshift: j}: API,
+  options: MigrationOptions,
+) {
+  const source = j(file.source);
+
+  if (
+    !options.relative &&
+    !hasImportDeclaration(j, source, '@shopify/polaris')
+  ) {
+    return file.source;
+  }
+
+  const sourcePaths = normalizeImportSourcePaths(j, source, {
+    relative: options.relative,
+    from: 'Avatar',
+    to: 'Avatar',
+  });
+
+  if (!sourcePaths) return;
+  if (
+    !hasImportSpecifier(j, source, 'Avatar', sourcePaths.from) &&
+    !hasImportSpecifier(j, source, 'AvatarProps', sourcePaths.from)
+  ) {
+    return;
+  }
+
+  const localElementName =
+    getImportSpecifierName(j, source, 'Avatar', sourcePaths.from) || 'Avatar';
+
+  // Find all JSX elements with the name 'Avatar'
+  source.findJSXElements(localElementName).forEach((element) => {
+    // Remove the 'customer' prop
+    removeJSXAttributes(j, element, 'customer');
+    // Replace the 'size' prop value with the new size
+    replaceJSXAttributes(j, element, 'size', 'size', sizeMapping);
+  });
+
+  return source.toSource();
+}
+
+// Define the mapping of old sizes to new sizes
+const sizeMapping = {
+  extraSmall: 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  'xl-experimental': 'xl',
+  // 2xl-experimental is not supported in the new Avatar component
+  '2xl-experimental': 'xl',
+};
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index a63ab4dc6e9..5b418b71993 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -39,7 +39,7 @@ export function removeJSXAttributes(
   element: ASTPath<JSXElement>,
   attributeName: string,
 ) {
-  const jsxAttributes = element.value.attributes?.filter(
+  const jsxAttributes = element.value.openingElement?.attributes?.filter(
     (attr) => attr.type === 'JSXAttribute' && attr.name.name === attributeName,
   );
 
@@ -97,10 +97,18 @@ export function replaceJSXAttributes(
     j(attribute)
       .find(j.StringLiteral)
       .forEach((literal) => {
-        literal.node.value =
-          typeof newAttributeValue === 'string'
-            ? newAttributeValue
-            : newAttributeValue[literal.node.value];
+        const isStringLiteral = typeof newAttributeValue === 'string';
+
+        if (isStringLiteral) {
+          literal.node.value = newAttributeValue;
+          return;
+        }
+
+        const value = literal.node.value as string;
+
+        if (value in newAttributeValue) {
+          literal.node.value = newAttributeValue[literal.node.value];
+        }
       });
   });
 }
diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
index afee067d7c3..7aae78cb9e1 100644
--- a/polaris-react/src/components/ActionList/ActionList.stories.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -374,7 +374,7 @@ export function WithAPrefixAndASuffix() {
           },
           {
             content: 'Or there',
-            prefix: <Avatar customer name="Farrah" size="small" />,
+            prefix: <Avatar name="Farrah" size="sm" />,
             suffix: <Icon source={ChevronRightMinor} />,
           },
         ]}
diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
index 3c92d7c86f8..bb73c1f2c10 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
@@ -58,7 +58,7 @@ export function Default(_, context) {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
@@ -121,7 +121,7 @@ export function WithI18n(_, context) {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 87969a21d90..132235de340 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -2,18 +2,17 @@
 
 .Avatar {
   // stylelint-disable -- Polaris component custom properties
-  --pc-avatar-extra-small-size: 20px;
-  --pc-avatar-small-size: 24px;
-  --pc-avatar-medium-size: 28px;
-  --pc-avatar-large-size: 32px;
-  --pc-avatar-xl-size-experimental: 40px;
-  --pc-avatar-2xl-size-experimental: 54px;
+  --pc-avatar-xs-size: 20px;
+  --pc-avatar-sm-size: 24px;
+  --pc-avatar-md-size: 28px;
+  --pc-avatar-lg-size: 32px;
+  --pc-avatar-xl-size: 40px;
   // stylelint-enable
   position: relative;
   display: block;
   overflow: hidden;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  min-width: var(--pc-avatar-extra-small-size);
+  min-width: var(--pc-avatar-xs-size);
   max-width: 100%;
   background: var(--p-color-avatar-background-experimental);
   color: var(--p-color-avatar-color-experimental);
@@ -48,48 +47,41 @@
   visibility: hidden;
 }
 
-.sizeExtraSmall {
+.sizeXs {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-extra-small-size);
+  width: var(--pc-avatar-xs-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 4px;
 }
 
-.sizeSmall {
+.sizeSm {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-small-size);
+  width: var(--pc-avatar-sm-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 6px;
 }
 
-.sizeMedium {
+.sizeMd {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-medium-size);
+  width: var(--pc-avatar-md-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 6px;
 }
 
-.sizeLarge {
+.sizeLg {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: var(--pc-avatar-large-size);
+  width: var(--pc-avatar-lg-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 8px;
 }
 
-.sizeXl-experimental {
+.sizeXl {
   // stylelint-disable-next-line -- custom overrides
-  width: var(--pc-avatar-xl-size-experimental);
+  width: var(--pc-avatar-xl-size);
   // stylelint-disable-next-line -- custom overrides
   border-radius: 8px;
 }
 
-.size2xl-experimental {
-  // stylelint-disable-next-line -- custom overrides
-  width: var(--pc-avatar-2xl-size-experimental);
-  // stylelint-disable-next-line -- custom overrides
-  border-radius: 10px;
-}
-
 .styleOne {
   background: var(--p-color-avatar-style-one-background-experimental);
   color: var(--p-color-avatar-style-one-color-experimental);
diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
index 1b2529251bd..4dea0fe51a2 100644
--- a/polaris-react/src/components/Avatar/Avatar.stories.tsx
+++ b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -20,18 +20,13 @@ export default {
   component: Avatar,
 } as ComponentMeta<typeof Avatar>;
 
-const sizes: {
-  [S in NonNullable<AvatarProps['size']>]: string;
-} = {
-  '2xl-experimental': 'XXL',
-  'xl-experimental': 'XL',
-  large: 'Large',
-  medium: 'Medium',
-  small: 'Small',
-  extraSmall: 'XS',
-};
-
-const sizeEntries = Object.entries(sizes) as Entries<typeof sizes>;
+const sizes: NonNullable<AvatarProps['size']>[] = [
+  'xl',
+  'lg',
+  'md',
+  'sm',
+  'xs',
+];
 
 type Style = typeof STYLE_CLASSES[number];
 
@@ -73,7 +68,7 @@ export function All() {
               Default
             </Text>
             <InlineStack gap="2" blockAlign="center">
-              {sizeEntries.map(([size]) => (
+              {sizes.map((size) => (
                 <Avatar key={size} size={size} />
               ))}
             </InlineStack>
@@ -83,8 +78,8 @@ export function All() {
               With customer
             </Text>
             <InlineStack gap="2" blockAlign="center">
-              {sizeEntries.map(([size]) => (
-                <Avatar key={size} size={size} customer />
+              {sizes.map((size) => (
+                <Avatar key={size} size={size} />
               ))}
             </InlineStack>
           </BlockStack>
@@ -120,7 +115,7 @@ export function All() {
             </Text>
             <BlockStack gap="2">
               <InlineStack gap="2" blockAlign="center">
-                {sizeEntries.map(([size]) => (
+                {sizes.map((size) => (
                   <Avatar key={size} size={size} initials="WWW" />
                 ))}
               </InlineStack>
@@ -141,7 +136,7 @@ export function IconColorsSizes() {
     <BlockStack gap="2">
       {styleInitialsDefaultEntries.map(([style, initials]) => (
         <InlineStack key={style} gap="2" blockAlign="center">
-          {sizeEntries.map(([size]) => (
+          {sizes.map((size) => (
             <Avatar key={size} name={initials} size={size} />
           ))}
         </InlineStack>
@@ -155,7 +150,7 @@ export function InitialsColorsSizes() {
     <BlockStack gap="2">
       {styleInitialsDefaultEntries.map(([style, initials]) => (
         <InlineStack key={style} gap="2" blockAlign="center">
-          {sizeEntries.map(([size]) => (
+          {sizes.map((size) => (
             <Avatar key={size} initials={initials} size={size} />
           ))}
         </InlineStack>
@@ -169,7 +164,7 @@ export function InitialsLong() {
     <BlockStack gap="2">
       {styleInitialsLongEntries.map(([style, initialsLong]) => (
         <InlineStack key={style} gap="2" blockAlign="center">
-          {sizeEntries.map(([size]) => (
+          {sizes.map((size) => (
             <Avatar key={size} initials={initialsLong} size={size} />
           ))}
         </InlineStack>
@@ -194,13 +189,11 @@ export function ExtraSmallInContext() {
           items={[
             {
               content: 'Chet Baker',
-              prefix: <Avatar customer size="extraSmall" name="Chet Baker" />,
+              prefix: <Avatar size="xs" name="Chet Baker" />,
             },
             {
               content: 'Farrah Fawcett',
-              prefix: (
-                <Avatar customer size="extraSmall" name="Farrah Fawcett" />
-              ),
+              prefix: <Avatar size="xs" name="Farrah Fawcett" />,
             },
           ]}
         />
@@ -212,7 +205,7 @@ export function ExtraSmallInContext() {
 export function Image() {
   return (
     <InlineStack gap="2" blockAlign="center">
-      {sizeEntries.map(([size]) => (
+      {sizes.map((size) => (
         <Avatar
           key={size}
           size={size}
diff --git a/polaris-react/src/components/Avatar/Avatar.tsx b/polaris-react/src/components/Avatar/Avatar.tsx
index 843e8d7c89d..b986e6cefa9 100644
--- a/polaris-react/src/components/Avatar/Avatar.tsx
+++ b/polaris-react/src/components/Avatar/Avatar.tsx
@@ -1,6 +1,5 @@
 import React, {useState, useCallback, useEffect} from 'react';
 
-import type {Experimental} from '../../types';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
 import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount';
@@ -8,12 +7,7 @@ import {Image} from '../Image';
 
 import styles from './Avatar.scss';
 
-type Size =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | Experimental<'xl' | '2xl'>;
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 enum Status {
   Pending = 'PENDING',
@@ -24,12 +18,11 @@ enum Status {
 export const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'] as const;
 
 const avatarStrokeWidth: {[S in Size]: string} = {
-  extraSmall: '3',
-  small: '2.5',
-  medium: '2.5',
-  large: '2.5',
-  'xl-experimental': '2',
-  '2xl-experimental': '1.5',
+  xs: '3',
+  sm: '2.5',
+  md: '2.5',
+  lg: '2.5',
+  xl: '2',
 };
 
 /**
@@ -62,8 +55,6 @@ export interface AvatarProps {
   name?: string;
   /** Initials of person to display */
   initials?: string;
-  /** Whether the avatar is for a customer */
-  customer?: boolean;
   /** URL of the avatar image which falls back to initials if the image fails to load */
   source?: string;
   /** Callback fired when the image fails to load  */
@@ -77,8 +68,7 @@ export function Avatar({
   source,
   onError,
   initials,
-  customer,
-  size = 'medium',
+  size = 'md',
   accessibilityLabel,
 }: AvatarProps) {
   const i18n = useI18n();
@@ -122,9 +112,7 @@ export function Avatar({
     styles.Avatar,
     size && styles[variationName('size', size)],
     hasImage && status === Status.Loaded && styles.imageHasLoaded,
-    !customer &&
-      !source &&
-      styles[variationName('style', styleClass(nameString))],
+    !source && styles[variationName('style', styleClass(nameString))],
   );
 
   const textClassName = classNames(
@@ -170,21 +158,20 @@ export function Avatar({
     </>
   );
 
-  const avatarBody =
-    customer || !initials ? (
-      avatarPath
-    ) : (
-      <text
-        className={textClassName}
-        x="50%"
-        y="50%"
-        dy={verticalOffset}
-        fill="currentColor"
-        textAnchor="middle"
-      >
-        {initials}
-      </text>
-    );
+  const avatarBody = !initials ? (
+    avatarPath
+  ) : (
+    <text
+      className={textClassName}
+      x="50%"
+      y="50%"
+      dy={verticalOffset}
+      fill="currentColor"
+      textAnchor="middle"
+    >
+      {initials}
+    </text>
+  );
 
   const svgMarkup = hasImage ? null : (
     <span className={styles.Initials}>
diff --git a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
index f851def0a3b..a63027f1907 100644
--- a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
+++ b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx
@@ -36,7 +36,7 @@ describe('<Avatar />', () => {
       const src = 'image/path/';
       const avatar = mountWithApp(<Avatar source={src} />);
       expect(avatar).toContainReactComponent('span', {
-        className: 'Avatar sizeMedium',
+        className: 'Avatar sizeMd',
       });
       expect(avatar).toContainReactComponent('span', {
         className: expect.not.stringContaining('styleOne'),
@@ -46,21 +46,21 @@ describe('<Avatar />', () => {
 
   describe('customer', () => {
     it('renders an inline svg', () => {
-      const avatar = mountWithApp(<Avatar customer />);
+      const avatar = mountWithApp(<Avatar />);
       expect(avatar).toContainReactComponentTimes('svg', 1);
     });
 
     it('does not render a customer Avatar if a source is provided', () => {
       const src = 'image/path/';
-      const avatar = mountWithApp(<Avatar customer source={src} />);
+      const avatar = mountWithApp(<Avatar source={src} />);
       expect(avatar).not.toContainReactComponent('svg');
     });
 
     it('does not apply a style class', () => {
       const src = 'image/path/';
-      const avatar = mountWithApp(<Avatar customer source={src} />);
+      const avatar = mountWithApp(<Avatar source={src} />);
       expect(avatar).toContainReactComponent('span', {
-        className: 'Avatar sizeMedium',
+        className: 'Avatar sizeMd',
       });
       expect(avatar).toContainReactComponent('span', {
         className: expect.not.stringContaining('styleOne'),
@@ -71,7 +71,7 @@ describe('<Avatar />', () => {
   describe('Initials', () => {
     it('renders initials if the Image onError prop is triggered and the Intials are provided', () => {
       const avatar = mountWithApp(
-        <Avatar size="large" initials="DL" source="image/path/" />,
+        <Avatar size="lg" initials="DL" source="image/path/" />,
       );
 
       expect(avatar).toContainReactComponent(Image);
@@ -97,12 +97,7 @@ describe('<Avatar />', () => {
     it('gets invoked in the event of an error', () => {
       const spy = jest.fn();
       const avatar = mountWithApp(
-        <Avatar
-          size="large"
-          initials="DL"
-          source="image/path/"
-          onError={spy}
-        />,
+        <Avatar size="lg" initials="DL" source="image/path/" onError={spy} />,
       );
 
       avatar.find(Image)!.trigger('onError');
@@ -114,7 +109,7 @@ describe('<Avatar />', () => {
     it('re-renders the image if a the source prop is changed after an error', () => {
       const workingSrc = 'image/goodPath/';
       const avatar = mountWithApp(
-        <Avatar size="large" initials="DL" source="image/path/" />,
+        <Avatar size="lg" initials="DL" source="image/path/" />,
       );
       avatar.find(Image)!.trigger('onError');
 
diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
index 238e3627dfa..ecff159bcfa 100644
--- a/polaris-react/src/components/Filters/Filters.stories.tsx
+++ b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -184,7 +184,7 @@ export function WithAResourceList() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -500,7 +500,7 @@ export function WithChildrenContent() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -631,7 +631,7 @@ export function Disabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -781,7 +781,7 @@ export function SomeDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -983,7 +983,7 @@ export function WithQueryFieldHidden() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1181,7 +1181,7 @@ export function WithQueryFieldDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1405,7 +1405,7 @@ export function WithAdditionalFilterSections() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx
index 0da230589f4..e1b8312d3a4 100644
--- a/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx
+++ b/polaris-react/src/components/LegacyFilters/LegacyFilters.stories.tsx
@@ -179,7 +179,7 @@ export function WithAResourceList() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -493,7 +493,7 @@ export function WithChildrenContent() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -621,7 +621,7 @@ export function Disabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -768,7 +768,7 @@ export function SomeDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -897,7 +897,7 @@ export function WithoutClearButton() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1090,7 +1090,7 @@ export function WithHelpText() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1286,7 +1286,7 @@ export function WithQueryFieldHidden() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
@@ -1482,7 +1482,7 @@ export function WithQueryFieldDisabled() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris-react/src/components/OptionList/OptionList.stories.tsx b/polaris-react/src/components/OptionList/OptionList.stories.tsx
index bbb84e0f4f8..18276f84d5f 100644
--- a/polaris-react/src/components/OptionList/OptionList.stories.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.stories.tsx
@@ -334,12 +334,12 @@ export function All() {
                 {
                   value: 'avatar_extra_small',
                   label: 'Avatar extra small',
-                  media: <Avatar name="Hello World" size="extraSmall" />,
+                  media: <Avatar name="Hello World" size="sm" />,
                 },
                 {
                   value: 'avatar_small',
                   label: 'Avatar small',
-                  media: <Avatar name="Hello World" size="small" />,
+                  media: <Avatar name="Hello World" size="sm" />,
                 },
               ],
             },
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 18ea7bd96de..f70945d7a15 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -299,7 +299,7 @@ export function WithLazyLoadedList() {
     return (
       <ResourceList.Item
         id={name}
-        media={<Avatar size="extraSmall" name={name} initials={initials} />}
+        media={<Avatar size="xs" name={name} initials={initials} />}
         verticalAlignment="center"
         onClick={handleResourceListItemClick}
       >
@@ -407,7 +407,7 @@ export function WithScrollableLazyLoadedList() {
     return (
       <ResourceList.Item
         id={name}
-        media={<Avatar size="extraSmall" name={name} initials={initials} />}
+        media={<Avatar size="xs" name={name} initials={initials} />}
         verticalAlignment="center"
         onClick={handleResourceListItemClick}
       >
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx b/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
index 16ecccfb8b1..7f9cc8ad282 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx
@@ -102,14 +102,7 @@ export function SelectableWithMedia() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
@@ -149,14 +142,7 @@ export function WithMedia() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
@@ -197,14 +183,7 @@ export function WithShortcutActions() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               shortcutActions={[
                 {content: 'View latest order', url: latestOrderUrl},
               ]}
@@ -251,14 +230,7 @@ export function WithPersistedShortcutActions() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               persistActions
               shortcutActions={shortcutActions}
               accessibilityLabel={`View details for ${name}`}
@@ -301,14 +273,7 @@ export function WithVerticalAlignment() {
               verticalAlignment="center"
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
diff --git a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
index 2c1140b74a7..7b285c5b881 100644
--- a/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
+++ b/polaris-react/src/components/ResourceItem/tests/ResourceItem.test.tsx
@@ -559,7 +559,7 @@ describe('<ResourceItem />', () => {
     it('includes an <Avatar /> if one is provided', () => {
       const wrapper = mountWithApp(
         <ResourceListContext.Provider value={mockDefaultContext}>
-          <ResourceItem id={itemId} url={url} media={<Avatar customer />} />
+          <ResourceItem id={itemId} url={url} media={<Avatar />} />
         </ResourceListContext.Provider>,
       );
       expect(wrapper).toContainReactComponent(Avatar);
diff --git a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
index 457390e2e37..a46f4245b8f 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
+++ b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
@@ -39,7 +39,7 @@ export function Default() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
 
           return (
             <ResourceItem
@@ -147,7 +147,7 @@ export function WithSelectionAndNoBulkActions() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -228,7 +228,7 @@ export function WithBulkActions() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -305,7 +305,7 @@ export function WithBulkActionsAndManyItems() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -387,7 +387,7 @@ export function WithLoadingState() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -428,7 +428,7 @@ export function WithTotalCount() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
 
           return (
             <ResourceItem
@@ -474,7 +474,7 @@ export function WithHeaderContent() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
 
           return (
             <ResourceItem
@@ -542,7 +542,7 @@ export function WithSorting() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -596,7 +596,7 @@ export function WithAlternateTool() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -706,7 +706,7 @@ export function WithFiltering() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
@@ -819,7 +819,7 @@ export function WithACustomEmptySearchResultState() {
 
   function renderItem(item) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
@@ -874,7 +874,7 @@ export function WithItemShortcutActions() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
@@ -930,7 +930,7 @@ export function WithPersistentItemShortcutActions() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
@@ -1050,7 +1050,7 @@ export function WithMultiselect() {
 
   function renderItem(item, _, index) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
@@ -1208,7 +1208,7 @@ export function WithAllOfItsElements() {
 
   function renderItem(item) {
     const {id, url, name, location, latestOrderUrl} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
     const shortcutActions = latestOrderUrl
       ? [{content: 'View latest order', url: latestOrderUrl}]
       : null;
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index fc192834e33..d6c4949fbbe 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -172,7 +172,7 @@ export function WithCustomActivator() {
 
   const customActivator = (
     <>
-      <Avatar size="small" initials="XA" name="Xquenda Andreev" />
+      <Avatar size="sm" initials="XA" name="Xquenda Andreev" />
       <span style={{marginLeft: '0.5rem'}}>
         <Text as="p" alignment="start" fontWeight="medium" truncate>
           Xquenda Andreev
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
index 22850eb096e..41cd869ffd3 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.tsx
@@ -72,7 +72,7 @@ export function UserMenu({
       </span>
       <MessageIndicator active={showIndicator}>
         <Avatar
-          size="medium"
+          size="md"
           initials={initials && initials.replace(' ', '')}
           source={avatar}
           name={name}
diff --git a/polaris.shopify.com/content/components/images-and-icons/avatar.md b/polaris.shopify.com/content/components/images-and-icons/avatar.md
index 88dec239d81..1aaa33800ef 100644
--- a/polaris.shopify.com/content/components/images-and-icons/avatar.md
+++ b/polaris.shopify.com/content/components/images-and-icons/avatar.md
@@ -44,12 +44,13 @@ Avatars are used to show a thumbnail representation of an individual or business
 
 ## Best practices
 
-Avatars should be one of 4 sizes:
+Avatars should be one of 6 sizes:
 
-- Extra small (24 x 24 px): use in tightly condensed layouts
-- Small (32 × 32 px): use when the medium size is too big for the layout, or when the avatar has less importance
-- Medium (40 × 40 px): use as the default size
-- Large (60 × 60 px): use when an avatar is a focal point, such as on a single customer card
+- Extra small (20 x 20 px): use in tightly condensed layouts
+- Small (24 × 24 px): use when the medium size is too big for the layout, or when the avatar has less importance
+- Medium (28 × 28 px): use as the default size
+- Large (32 × 32 px): use when an avatar is a focal point, such as on a single customer card
+- Extra large (40 × 40 px): use when an avatar is a focal point, such as on a single customer card
 
 ---
 
diff --git a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx b/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
index f2b9cc97ac8..00d204610c2 100644
--- a/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
+++ b/polaris.shopify.com/pages/examples/action-list-with-a-prefix-and-a-suffix.tsx
@@ -22,7 +22,7 @@ function ActionListWithPrefixSuffixExample() {
           },
           {
             content: 'Or there',
-            prefix: <Avatar customer name="Farrah" size="small" />,
+            prefix: <Avatar name="Farrah" size="sm" />,
             suffix: <Icon source={ChevronRightMinor} />,
           },
         ]}
diff --git a/polaris.shopify.com/pages/examples/app-provider-default.tsx b/polaris.shopify.com/pages/examples/app-provider-default.tsx
index a3382b4fc31..128e6ee3291 100644
--- a/polaris.shopify.com/pages/examples/app-provider-default.tsx
+++ b/polaris.shopify.com/pages/examples/app-provider-default.tsx
@@ -49,7 +49,7 @@ function AppProviderExample() {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx b/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
index e79fb8d425a..040927fa4d8 100644
--- a/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
+++ b/polaris.shopify.com/pages/examples/app-provider-with-i18n.tsx
@@ -49,7 +49,7 @@ function AppProviderI18NExample() {
             ]}
             renderItem={(item) => {
               const {id, url, name, location} = item;
-              const media = <Avatar customer size="medium" name={name} />;
+              const media = <Avatar size="md" name={name} />;
 
               return (
                 <ResourceList.Item id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/avatar-default.tsx b/polaris.shopify.com/pages/examples/avatar-default.tsx
index 97eff02e80a..2925ad5467d 100644
--- a/polaris.shopify.com/pages/examples/avatar-default.tsx
+++ b/polaris.shopify.com/pages/examples/avatar-default.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AvatarExample() {
-  return <Avatar customer name="Farrah" />;
+  return <Avatar name="Farrah" />;
 }
 
 export default withPolarisExample(AvatarExample);
diff --git a/polaris.shopify.com/pages/examples/avatar-extra-small.tsx b/polaris.shopify.com/pages/examples/avatar-extra-small.tsx
index 83a9faa5eb1..2e098a8533f 100644
--- a/polaris.shopify.com/pages/examples/avatar-extra-small.tsx
+++ b/polaris.shopify.com/pages/examples/avatar-extra-small.tsx
@@ -18,13 +18,11 @@ function ExtraSmallAvatarExample() {
           items={[
             {
               content: 'Chet Baker',
-              prefix: <Avatar customer size="extraSmall" name="Chet Baker" />,
+              prefix: <Avatar size="xs" name="Chet Baker" />,
             },
             {
               content: 'Farrah Fawcett',
-              prefix: (
-                <Avatar customer size="extraSmall" name="Farrah Fawcett" />
-              ),
+              prefix: <Avatar size="xs" name="Farrah Fawcett" />,
             },
           ]}
         />
diff --git a/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
index 50b7028e79c..fc92e8a2da2 100644
--- a/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  BlockStack,
-  Page,
-  InlineStack,
-  Text,
-  Divider,
-} from '@shopify/polaris';
+import {BlockStack, Page, InlineStack, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
diff --git a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx b/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
index bb410bf7c62..7da88ebc453 100644
--- a/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
+++ b/polaris.shopify.com/pages/examples/button-plain-monochrome.tsx
@@ -6,9 +6,7 @@ function ButtonExample() {
   return (
     <div>
       Could not retrieve data.{' '}
-      <Button variant="monochromePlain" >
-        Try again
-      </Button>
+      <Button variant="monochromePlain">Try again</Button>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/filters-disabled.tsx b/polaris.shopify.com/pages/examples/filters-disabled.tsx
index 4c24358ddc2..73cdc204fe6 100644
--- a/polaris.shopify.com/pages/examples/filters-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/filters-disabled.tsx
@@ -101,7 +101,7 @@ function FiltersDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
index 36fcf021de9..72563a288be 100644
--- a/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
+++ b/polaris.shopify.com/pages/examples/filters-with-a-resource-list.tsx
@@ -177,7 +177,7 @@ function FiltersWithAResourceListExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
index 576ebc1c193..57b56fdf988 100644
--- a/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
+++ b/polaris.shopify.com/pages/examples/filters-with-children-content.tsx
@@ -105,7 +105,7 @@ function FiltersWithChildrenContentExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
index 78b0e56b4d4..af12c59943e 100644
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/filters-with-query-field-disabled.tsx
@@ -178,7 +178,7 @@ function FiltersWithQueryFieldDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx b/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
index 902340956ef..3691db4df75 100644
--- a/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
+++ b/polaris.shopify.com/pages/examples/filters-with-query-field-hidden.tsx
@@ -187,7 +187,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx b/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx
index 1a064ccacf7..d7bcd773ffa 100644
--- a/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/filters-with-some-disabled.tsx
@@ -124,7 +124,7 @@ function FiltersWithSomeDisabledExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx b/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
index ec61ee30137..7c685953faa 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
@@ -46,14 +46,23 @@ function IndexTableWithDisabledRowsExample() {
     plural: 'orders',
   };
 
-  const selectableOrders = orders.filter((order) => !order.disabled)
+  const selectableOrders = orders.filter((order) => !order.disabled);
 
   const {selectedResources, allResourcesSelected, handleSelectionChange} =
     useIndexResourceState(selectableOrders);
 
   const rowMarkup = orders.map(
     (
-      {id, order, date, customer, total, paymentStatus, fulfillmentStatus, disabled},
+      {
+        id,
+        order,
+        date,
+        customer,
+        total,
+        paymentStatus,
+        fulfillmentStatus,
+        disabled,
+      },
       index,
     ) => (
       <IndexTable.Row
diff --git a/polaris.shopify.com/pages/examples/layout-annotated.tsx b/polaris.shopify.com/pages/examples/layout-annotated.tsx
index 25a6568cbe8..72525842fa8 100644
--- a/polaris.shopify.com/pages/examples/layout-annotated.tsx
+++ b/polaris.shopify.com/pages/examples/layout-annotated.tsx
@@ -1,4 +1,10 @@
-import {Page, Layout, LegacyCard, FormLayout, TextField} from '@shopify/polaris';
+import {
+  Page,
+  Layout,
+  LegacyCard,
+  FormLayout,
+  TextField,
+} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx
index 01581659488..8fbac11336f 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-disabled.tsx
@@ -98,7 +98,7 @@ function DisableAllFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx
index b96546c09cb..924839258cb 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-some-disabled.tsx
@@ -127,7 +127,7 @@ function DisableSomeFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx
index dfd876fa74c..3af96cadc07 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-with-a-resource-list.tsx
@@ -173,7 +173,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx
index 49f8d67f3bc..4ed90241221 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-with-children-content.tsx
@@ -101,7 +101,7 @@ function FiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx
index f939965eba0..6129212ca27 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-with-help-text.tsx
@@ -175,7 +175,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx
index bf0b38e55bb..354a9c0c92e 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-disabled.tsx
@@ -174,7 +174,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx
index 62db7af82d3..51a8919c8be 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-with-query-field-hidden.tsx
@@ -174,7 +174,7 @@ function ResourceListFiltersExample() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx b/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx
index dc950519392..597abc393b8 100644
--- a/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-filters-without-clear-button.tsx
@@ -106,7 +106,7 @@ function Playground() {
           ]}
           renderItem={(item) => {
             const {id, url, name, location} = item;
-            const media = <Avatar customer size="medium" name={name} />;
+            const media = <Avatar size="md" name={name} />;
 
             return (
               <ResourceList.Item
diff --git a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx b/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
index 67973fe13e8..4bf676cf0c1 100644
--- a/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
+++ b/polaris.shopify.com/pages/examples/popover-with-lazy-loaded-list.tsx
@@ -82,7 +82,7 @@ function PopoverLazyLoadExample() {
     return (
       <ResourceList.Item
         id={name}
-        media={<Avatar size="medium" name={name} initials={initials} />}
+        media={<Avatar size="md" name={name} initials={initials} />}
         onClick={handleResourceListItemClick}
       >
         {name}
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-media.tsx b/polaris.shopify.com/pages/examples/resource-item-with-media.tsx
index b20418811c1..2db82cc41b0 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-media.tsx
+++ b/polaris.shopify.com/pages/examples/resource-item-with-media.tsx
@@ -30,14 +30,7 @@ function ResourceItemExample() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
index 3076c675f3f..fa2edd6598b 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
+++ b/polaris.shopify.com/pages/examples/resource-item-with-shortcut-actions.tsx
@@ -34,14 +34,7 @@ function ResourceItemExample() {
             <ResourceItem
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               shortcutActions={shortcutActions}
               accessibilityLabel={`View details for ${name}`}
               name={name}
diff --git a/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx b/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
index ead0647f400..40b6fd360ca 100644
--- a/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
+++ b/polaris.shopify.com/pages/examples/resource-item-with-vertical-alignment.tsx
@@ -31,14 +31,7 @@ function ResourceItemExample() {
               verticalAlignment="center"
               id={id}
               url={url}
-              media={
-                <Avatar
-                  customer
-                  size="medium"
-                  name={name}
-                  source={avatarSource}
-                />
-              }
+              media={<Avatar size="md" name={name} source={avatarSource} />}
               accessibilityLabel={`View details for ${name}`}
               name={name}
             >
diff --git a/polaris.shopify.com/pages/examples/resource-list-default.tsx b/polaris.shopify.com/pages/examples/resource-list-default.tsx
index 3ec04488973..4784b634c04 100644
--- a/polaris.shopify.com/pages/examples/resource-list-default.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-default.tsx
@@ -29,7 +29,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
 
           return (
             <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx b/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
index 327f4daa13d..87580a858b4 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-a-custom-empty-search-result-state.tsx
@@ -104,7 +104,7 @@ function ResourceListWithFilteringExample() {
     location: string;
   }) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx b/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
index eae40ff42c7..ed12048c34a 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-all-of-its-elements.tsx
@@ -154,7 +154,7 @@ function ResourceListExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location, latestOrderUrl} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
     const shortcutActions = latestOrderUrl
       ? [{content: 'View latest order', url: latestOrderUrl}]
       : undefined;
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx b/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
index 01dbb04702a..a9f0d08fa5f 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-alternate-tool.tsx
@@ -43,7 +43,7 @@ function ResourceListWithAlternateToolExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
index a705446f74d..1e3527b9c83 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-bulk-actions.tsx
@@ -72,7 +72,7 @@ function ResourceListWithBulkActionsExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx b/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
index 4c2aa75e6e3..77628bd7928 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-filtering.tsx
@@ -108,7 +108,7 @@ function ResourceListWithFilteringExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem id={id} url={url} media={media}>
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
index 161c10e8770..9b5598cc249 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-item-shortcut-actions.tsx
@@ -31,7 +31,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx b/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
index 751017717da..d7da961a76a 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-loading-state.tsx
@@ -78,7 +78,7 @@ function ResourceListWithLoadingExample() {
     location: string;
   }) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx b/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
index 88d15ef663d..035cfc798b9 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-multiselect.tsx
@@ -97,7 +97,7 @@ function ResourceListExample() {
 
   function renderItem(item: typeof items[number], _: string, index: number) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
index 54d0ba9b123..1859827afd5 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-persistent-item-shortcut-actions.tsx
@@ -31,7 +31,7 @@ function ResourceListExample() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location, latestOrderUrl} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
           const shortcutActions = latestOrderUrl
             ? [
                 {
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx b/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
index f225efe3ec5..d7404789dc7 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-selection-and-no-bulk-actions.tsx
@@ -49,7 +49,7 @@ function ResourceListWithSelectionExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx b/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
index 237b2cce918..92072b34a0a 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-sorting.tsx
@@ -52,7 +52,7 @@ function ResourceListWithSortingExample() {
 
   function renderItem(item: typeof items[number]) {
     const {id, url, name, location} = item;
-    const media = <Avatar customer size="medium" name={name} />;
+    const media = <Avatar size="md" name={name} />;
 
     return (
       <ResourceItem
diff --git a/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx b/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
index 88dd1615335..844cf47525e 100644
--- a/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
+++ b/polaris.shopify.com/pages/examples/resource-list-with-total-count.tsx
@@ -29,7 +29,7 @@ function ResourceListWithTotalItemsCount() {
         ]}
         renderItem={(item) => {
           const {id, url, name, location} = item;
-          const media = <Avatar customer size="medium" name={name} />;
+          const media = <Avatar size="md" name={name} />;
 
           return (
             <ResourceItem
diff --git a/polaris.shopify.com/public/images/components/images-and-icons/avatar.png b/polaris.shopify.com/public/images/components/images-and-icons/avatar.png
index 56ad4ac68e3..f52dfe3e014 100644
Binary files a/polaris.shopify.com/public/images/components/images-and-icons/avatar.png and b/polaris.shopify.com/public/images/components/images-and-icons/avatar.png differ