diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 02b4f8b17e36..f46b1569ed4c 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -4505,21 +4505,18 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
-        X_LARGE: 'xlarge',
-        LARGE: 'large',
-        MEDIUM: 'medium',
-        DEFAULT: 'default',
+        XXXX_SMALL: 'xxxx-small',
+        XXX_SMALL: 'xxx-small',
+        XX_SMALL: 'xx-small',
+        X_SMALL: 'x-small',
         SMALL: 'small',
-        SMALLER: 'smaller',
-        SUBSCRIPT: 'subscript',
-        SMALL_SUBSCRIPT: 'small-subscript',
-        MID_SUBSCRIPT: 'mid-subscript',
-        LARGE_BORDERED: 'large-bordered',
-        MEDIUM_LARGE: 'medium-large',
-        HEADER: 'header',
-        MENTION_ICON: 'mention-icon',
-        SMALL_NORMAL: 'small-normal',
-        LARGE_NORMAL: 'large-normal',
+        // The default avatar size, mapping to the medium avatar dimensions (variables.avatarSizeMedium)
+        DEFAULT: 'medium',
+        LARGE: 'large',
+        X_LARGE: 'x-large',
+        XX_LARGE: 'xx-large',
+        XXX_LARGE: 'xxx-large',
+        XXXX_LARGE: 'xxxx-large',
     },
 
     COMPANY_CARD: {
diff --git a/src/components/AccountManagerBookCallButton.tsx b/src/components/AccountManagerBookCallButton.tsx
index 65ae7018692e..871d8cb3e50d 100644
--- a/src/components/AccountManagerBookCallButton.tsx
+++ b/src/components/AccountManagerBookCallButton.tsx
@@ -74,7 +74,7 @@ function AccountManagerBookCallButton({calendarLink, accountManagerAccountID, is
                     avatarID={accountManagerAccountID}
                     name={accountManagerDetails?.displayName ?? accountManagerDetails?.login}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
                 <Text style={[styles.buttonText, styles.buttonMediumText]}>{label}</Text>
             </View>
diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
index ed8ce8aa5026..ac29c74dcc1f 100644
--- a/src/components/Attachments/AttachmentView/index.tsx
+++ b/src/components/Attachments/AttachmentView/index.tsx
@@ -220,7 +220,7 @@ function AttachmentView({
             return (
                 <MultiGestureIcon
                     src={source}
-                    contentSize={{width: variables.defaultAvatarPreviewSize, height: variables.defaultAvatarPreviewSize}}
+                    contentSize={{width: variables.avatarPreview, height: variables.avatarPreview}}
                     fill={iconFillColor}
                     additionalStyles={additionalStyles}
                 />
@@ -230,8 +230,8 @@ function AttachmentView({
         return (
             <Icon
                 src={source}
-                height={variables.defaultAvatarPreviewSize}
-                width={variables.defaultAvatarPreviewSize}
+                height={variables.avatarPreview}
+                width={variables.avatarPreview}
                 fill={iconFillColor}
                 additionalStyles={additionalStyles}
             />
diff --git a/src/components/AvatarButtonWithIcon.tsx b/src/components/AvatarButtonWithIcon.tsx
index aa9adb03056d..07139fa24792 100644
--- a/src/components/AvatarButtonWithIcon.tsx
+++ b/src/components/AvatarButtonWithIcon.tsx
@@ -28,7 +28,7 @@ type AvatarButtonWithIconProps = WithSentryLabel & {
     text: string;
 
     /** Style applied to the avatar */
-    avatarStyle: StyleProp<ViewStyle & ImageStyle>;
+    avatarStyle?: StyleProp<ViewStyle & ImageStyle>;
 
     /** Executed on click */
     onPress: () => void;
@@ -52,7 +52,7 @@ type AvatarButtonWithIconProps = WithSentryLabel & {
     DefaultAvatar?: () => React.ReactNode;
 
     /** Size of Indicator */
-    size?: typeof CONST.AVATAR_SIZE.X_LARGE | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+    size?: typeof CONST.AVATAR_SIZE.XXXX_LARGE | typeof CONST.AVATAR_SIZE.XXX_LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon?: AvatarSource;
diff --git a/src/components/AvatarSelector.tsx b/src/components/AvatarSelector.tsx
index 92717d65d5dc..4f950326aa55 100644
--- a/src/components/AvatarSelector.tsx
+++ b/src/components/AvatarSelector.tsx
@@ -36,7 +36,7 @@ const SPACER_SIZE = 10;
 /**
  * AvatarSelector — renders a grid of selectable avatars.
  */
-function AvatarSelector({selectedID, onSelect, label, size = CONST.AVATAR_SIZE.MEDIUM}: AvatarSelectorProps) {
+function AvatarSelector({selectedID, onSelect, label, size = CONST.AVATAR_SIZE.X_LARGE}: AvatarSelectorProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 36ee9567d2b0..ee5e7a94eb30 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -289,7 +289,7 @@ function HeaderWithBackButton({
                 )}
                 {!!policyAvatar && (
                     <Avatar
-                        containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
+                        containerStyles={styles.mr3}
                         source={policyAvatar?.source}
                         name={policyAvatar?.name}
                         avatarID={policyAvatar?.id}
diff --git a/src/components/ImportedFromAccountingSoftware.tsx b/src/components/ImportedFromAccountingSoftware.tsx
index 162bda8ccdc2..ffe0d9a96d2f 100644
--- a/src/components/ImportedFromAccountingSoftware.tsx
+++ b/src/components/ImportedFromAccountingSoftware.tsx
@@ -69,7 +69,7 @@ function ImportedFromAccountingSoftware({policyID, currentConnectionName, transl
                             src={icon}
                             height={variables.iconSizeMedium}
                             width={variables.iconSizeMedium}
-                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.SMALLER, ''), styles.appBG]}
+                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.X_SMALL, ''), styles.appBG]}
                         />
                     ) : undefined
                 }
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index c10bfda819f7..e75f14d53e2e 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -97,7 +97,7 @@ function MentionSuggestions({
                         <View style={styles.mentionSuggestionsAvatarContainer}>
                             <Avatar
                                 source={item.icons.at(0)?.source}
-                                size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
+                                size={isIcon ? CONST.AVATAR_SIZE.XXX_SMALL : CONST.AVATAR_SIZE.X_SMALL}
                                 name={item.icons.at(0)?.name}
                                 avatarID={item.icons.at(0)?.id}
                                 type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/OnboardingHelpDropdownButton.tsx b/src/components/OnboardingHelpDropdownButton.tsx
index 1162440120c1..62d8b486de1b 100644
--- a/src/components/OnboardingHelpDropdownButton.tsx
+++ b/src/components/OnboardingHelpDropdownButton.tsx
@@ -2,6 +2,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import {openExternalLink} from '@libs/actions/Link';
@@ -9,8 +10,6 @@ import {cancelBooking, clearBookingDraft, rescheduleBooking} from '@libs/actions
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 
-import variables from '@styles/variables';
-
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -45,7 +44,10 @@ const reportNameValuePartsSelector = (reportNameValuePairs?: ReportNameValuePair
 
 function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldShowRegisterForWebinar, shouldShowGuideBooking, hasActiveScheduledCall}: OnboardingHelpButtonProps) {
     const {translate} = useLocalize();
-    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: accountIDSelector});
+    const StyleUtils = useStyleUtils();
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {
+        selector: accountIDSelector,
+    });
 
     const [latestScheduledCall] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`, {
         selector: reportNameValuePartsSelector,
@@ -92,12 +94,12 @@ function OnboardingHelpDropdownButton({reportID, shouldUseNarrowLayout, shouldSh
             descriptionTextStyle: [styles.themeTextColor, styles.ml2],
             displayInDefaultIconColor: true,
             icon: illustrations.HeadSet,
-            iconWidth: variables.avatarSizeLargeNormal,
-            iconHeight: variables.avatarSizeLargeNormal,
+            iconWidth: StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE),
+            iconHeight: StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE),
             wrapperStyle: [styles.mb3, styles.pl4, styles.pr5, styles.pt3, styles.pb6, styles.borderBottom],
             interactive: false,
             titleStyle: styles.ml2,
-            avatarSize: CONST.AVATAR_SIZE.LARGE_NORMAL,
+            avatarSize: CONST.AVATAR_SIZE.LARGE,
         });
         options.push({
             text: translate('common.reschedule'),
diff --git a/src/components/ReceiptEmptyState.tsx b/src/components/ReceiptEmptyState.tsx
index d3f86af2c059..2fcdd3ba661e 100644
--- a/src/components/ReceiptEmptyState.tsx
+++ b/src/components/ReceiptEmptyState.tsx
@@ -1,6 +1,7 @@
 import useFilesValidation from '@hooks/useFilesValidation';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -85,6 +86,7 @@ function ReceiptEmptyState({
     setReceiptFile = () => {},
 }: ReceiptEmptyStateProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const theme = useTheme();
     const isLoadedRef = useRef(false);
@@ -164,11 +166,11 @@ function ReceiptEmptyState({
                                         height={variables.eReceiptEmptyIconWidth}
                                     />
                                     {!isThumbnail && (
-                                        <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, {width: variables.avatarSizeSmall, height: variables.avatarSizeSmall}]}>
+                                        <View style={[styles.moneyRequestAttachReceiptThumbnailIcon, StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.SMALL))]}>
                                             <ReceiptPlaceholderPlusIcon
                                                 circleFill={theme.success}
                                                 plusFill={theme.receiptPlaceholderPlus}
-                                                size={variables.avatarSizeSmall}
+                                                size={StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.SMALL)}
                                             />
                                         </View>
                                     )}
diff --git a/src/components/ReportActionAvatars/ReportActionAvatar.tsx b/src/components/ReportActionAvatars/ReportActionAvatar.tsx
index 214ed95d61a0..c86c1909b3e7 100644
--- a/src/components/ReportActionAvatars/ReportActionAvatar.tsx
+++ b/src/components/ReportActionAvatars/ReportActionAvatar.tsx
@@ -70,7 +70,7 @@ type AvatarStyles = {
     secondAvatarStyles: ViewStyle & ImageStyle;
 };
 
-type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_SIZE.LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
+type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_SIZE.XXX_LARGE | typeof CONST.AVATAR_SIZE.XXXX_LARGE | typeof CONST.AVATAR_SIZE.DEFAULT;
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
@@ -206,21 +206,17 @@ function ReportActionAvatarSubscript({
 
     const subscriptAvatarStyle = useMemo(() => {
         if (size === CONST.AVATAR_SIZE.SMALL) {
-            return styles.secondAvatarSubscriptCompact;
+            return styles.secondAvatarSubscriptSmall;
         }
 
-        if (size === CONST.AVATAR_SIZE.SMALL_NORMAL) {
-            return styles.secondAvatarSubscriptSmallNormal;
-        }
-
-        if (size === CONST.AVATAR_SIZE.X_LARGE) {
-            return styles.secondAvatarSubscriptXLarge;
+        if (size === CONST.AVATAR_SIZE.XXXX_LARGE) {
+            return styles.secondAvatarSubscriptXxxxLarge;
         }
 
         return styles.secondAvatarSubscript;
     }, [size, styles]);
 
-    const subscriptAvatarSize = size === CONST.AVATAR_SIZE.X_LARGE ? CONST.AVATAR_SIZE.HEADER : CONST.AVATAR_SIZE.SUBSCRIPT;
+    const subscriptAvatarSize = size === CONST.AVATAR_SIZE.XXXX_LARGE ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.XX_SMALL;
 
     return (
         <View
@@ -239,7 +235,6 @@ function ReportActionAvatarSubscript({
                 <View>
                     <ProfileAvatar
                         useProfileNavigationWrapper={useProfileNavigationWrapper}
-                        containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(size || CONST.AVATAR_SIZE.DEFAULT))}
                         source={primaryAvatar.source}
                         size={size}
                         name={primaryAvatar.name}
@@ -257,15 +252,18 @@ function ReportActionAvatarSubscript({
                     accountID={Number(secondaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
                     icon={secondaryAvatar}
                 >
-                    <View style={[size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.flex1 : {}, subscriptAvatarStyle]}>
+                    <View style={subscriptAvatarStyle}>
                         <ProfileAvatar
                             useProfileNavigationWrapper={useProfileNavigationWrapper}
                             iconAdditionalStyles={[
-                                StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : subscriptAvatarSize),
+                                // The medium subscript on a xxxx-large avatar keeps the small border width (as before the size migration) — the default border width for its size is 1px thicker and would shrink the visible avatar.
+                                size === CONST.AVATAR_SIZE.XXXX_LARGE
+                                    ? StyleUtils.getAvatarBorderWidth(CONST.AVATAR_SIZE.SMALL)
+                                    : StyleUtils.getAvatarBorderWidth(isSmall ? CONST.AVATAR_SIZE.XXXX_SMALL : subscriptAvatarSize),
                                 StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor ?? theme.componentBG),
                             ]}
                             source={secondaryAvatar.source}
-                            size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : subscriptAvatarSize}
+                            size={isSmall ? CONST.AVATAR_SIZE.XXXX_SMALL : subscriptAvatarSize}
                             fill={secondaryAvatar.fill}
                             name={secondaryAvatar.name}
                             avatarID={secondaryAvatar.id}
@@ -280,7 +278,6 @@ function ReportActionAvatarSubscript({
             {!!subscriptCardFeed && (
                 <View
                     style={[
-                        size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.flex1 : {},
                         // Nullish coalescing thinks that empty strings are truthy, thus I'm using OR operator
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                         StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor || theme.sidebar),
@@ -336,8 +333,7 @@ function ReportActionAvatarMultipleHorizontal({
 
     const oneAvatarSize = StyleUtils.getAvatarStyle(size);
     const overlapSize = oneAvatarSize.width / overlapDivider;
-    const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
-    const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth;
+    const height = StyleUtils.getAvatarSizeWithBorder(size);
     const avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height)]);
 
     const icons = useMemo(() => {
@@ -439,7 +435,7 @@ function ReportActionAvatarMultipleHorizontal({
 
                             // Set overlay background color with RGBA value so that the text will not inherit opacity
                             StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
-                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(size),
                             icons.at(3)?.type === CONST.ICON_TYPE_WORKSPACE && StyleUtils.getAvatarBorderRadius(size, icons.at(3)?.type),
                         ]}
                     >
@@ -488,26 +484,26 @@ function ReportActionAvatarMultipleDiagonal({
         () => (shouldShowTooltip ? icons.map((icon) => getUserDetailTooltipText(Number(icon.id), formatPhoneNumber, translate, icon.name)) : ['']),
         [shouldShowTooltip, icons, formatPhoneNumber, translate],
     );
-    const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.X_LARGE;
+    const removeRightMargin = icons.length === 2 && size === CONST.AVATAR_SIZE.XXXX_LARGE;
     const avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
 
     const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
         () => ({
             [CONST.AVATAR_SIZE.SMALL]: {
-                singleAvatarStyle: styles.singleAvatarSmall,
-                secondAvatarStyles: styles.secondAvatarSmall,
+                singleAvatarStyle: styles.singleAvatarXxxSmall,
+                secondAvatarStyles: styles.secondAvatarXxxSmall,
             },
-            [CONST.AVATAR_SIZE.LARGE]: {
-                singleAvatarStyle: styles.singleAvatarMedium,
-                secondAvatarStyles: styles.secondAvatarMedium,
+            [CONST.AVATAR_SIZE.XXX_LARGE]: {
+                singleAvatarStyle: styles.singleAvatarXLarge,
+                secondAvatarStyles: styles.secondAvatarXLarge,
             },
-            [CONST.AVATAR_SIZE.X_LARGE]: {
-                singleAvatarStyle: styles.singleAvatarMediumLarge,
-                secondAvatarStyles: styles.secondAvatarMediumLarge,
+            [CONST.AVATAR_SIZE.XXXX_LARGE]: {
+                singleAvatarStyle: styles.singleAvatarXxLarge,
+                secondAvatarStyles: styles.secondAvatarXxLarge,
             },
             [CONST.AVATAR_SIZE.DEFAULT]: {
-                singleAvatarStyle: styles.singleAvatar,
-                secondAvatarStyles: styles.secondAvatar,
+                singleAvatarStyle: styles.singleAvatarXSmall,
+                secondAvatarStyles: styles.secondAvatarXSmall,
             },
         }),
         [styles],
@@ -515,21 +511,24 @@ function ReportActionAvatarMultipleDiagonal({
 
     const avatarSize = useMemo(() => {
         if (useMidSubscriptSize) {
-            return CONST.AVATAR_SIZE.MID_SUBSCRIPT;
+            return CONST.AVATAR_SIZE.XXX_SMALL;
         }
 
-        if (size === CONST.AVATAR_SIZE.LARGE) {
-            return CONST.AVATAR_SIZE.MEDIUM;
+        if (size === CONST.AVATAR_SIZE.XXX_LARGE) {
+            return CONST.AVATAR_SIZE.X_LARGE;
         }
 
-        if (size === CONST.AVATAR_SIZE.X_LARGE) {
-            return CONST.AVATAR_SIZE.MEDIUM_LARGE;
+        if (size === CONST.AVATAR_SIZE.XXXX_LARGE) {
+            return CONST.AVATAR_SIZE.XX_LARGE;
         }
 
-        return CONST.AVATAR_SIZE.SMALLER;
+        return CONST.AVATAR_SIZE.X_SMALL;
     }, [useMidSubscriptSize, size]);
 
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(
+        () => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap[CONST.AVATAR_SIZE.DEFAULT],
+        [size, avatarSizeToStylesMap],
+    );
     const secondaryAvatarContainerStyles = secondaryAvatarContainerStyle ?? [StyleUtils.getBackgroundAndBorderStyle(isHovered ? theme.activeComponentBG : theme.componentBG)];
 
     return (
diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 3afaa2bac1c1..107284190694 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -276,7 +276,7 @@ function TaskView({report, parentReport, action}: TaskViewProps) {
                                     title={getDisplayNameForParticipant({accountID: report.managerID, formatPhoneNumber, translate})}
                                     iconAccountID={report.managerID}
                                     iconType={CONST.ICON_TYPE_AVATAR}
-                                    avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                                    avatarSize={CONST.AVATAR_SIZE.X_SMALL}
                                     titleStyle={styles.assigneeTextStyle}
                                     onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.TASK_ASSIGNEE.path))}
                                     shouldShowRightIcon={!isDisableInteractive}
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
index 2dd423b1c878..3de2fa4fdb28 100644
--- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -308,7 +308,7 @@ function TransactionPreviewContent({
                                         participantFromDisplayName={from.displayName ?? from.login ?? translate('common.hidden')}
                                         participantToDisplayName={to.displayName ?? to.login ?? translate('common.hidden')}
                                         participantTo={to}
-                                        avatarSize="mid-subscript"
+                                        avatarSize={CONST.AVATAR_SIZE.XXX_SMALL}
                                         infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
                                         infoCellsAvatarStyle={styles.pr1}
                                         style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}
@@ -325,7 +325,7 @@ function TransactionPreviewContent({
                                                         sort: CONST.REPORT_ACTION_AVATARS.SORT_BY.ID,
                                                         useCardBG: true,
                                                     }}
-                                                    size={CONST.AVATAR_SIZE.SUBSCRIPT}
+                                                    size={CONST.AVATAR_SIZE.XX_SMALL}
                                                 />
                                             </View>
                                         )}
diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx
index 9949350afec4..a1854b66487b 100644
--- a/src/components/RoomHeaderAvatars.tsx
+++ b/src/components/RoomHeaderAvatars.tsx
@@ -8,6 +8,8 @@ import Navigation from '@libs/Navigation/Navigation';
 import {isUserCreatedPolicyRoom} from '@libs/ReportUtils';
 import {isDefaultAvatar} from '@libs/UserAvatarUtils';
 
+import variables from '@styles/variables';
+
 import CONST from '@src/CONST';
 import ROUTES, {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type {Policy, Report} from '@src/types/onyx';
@@ -65,8 +67,8 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
                     source={icon.source || report.avatarUrl}
                     avatarID={icon.id}
                     isUsingDefaultAvatar={!report.avatarUrl || isDefaultAvatar(icon.source)}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
-                    avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                    avatarStyle={styles.alignSelfCenter}
                     onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))}
                     onImageRemoved={() => updatePolicyRoomAvatar(report.reportID, currentUserAccountID, report.avatarUrl)}
                     onImageSelected={(file) => updatePolicyRoomAvatar(report.reportID, currentUserAccountID, report.avatarUrl, file)}
@@ -94,8 +96,7 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
             >
                 <Avatar
                     source={icon.source}
-                    imageStyles={styles.avatarXLarge}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                     name={icon.name}
                     avatarID={icon.id}
                     type={icon.type}
@@ -107,12 +108,17 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
 
     const iconsToDisplay = icons.slice(0, CONST.REPORT.MAX_PREVIEW_AVATARS);
 
+    const roomHeaderAvatarFootprint = StyleUtils.getAvatarSizeWithBorder(CONST.AVATAR_SIZE.XXX_LARGE);
     const iconStyle = [
         styles.roomHeaderAvatar,
 
         // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars
-        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
+        StyleUtils.getWidthAndHeightStyle(roomHeaderAvatarFootprint),
     ];
+
+    // Bordered workspace avatars here are 88px (avatar + border), so they keep the larger rounded radius instead of the 16px radius mapped to a plain xxx-large avatar.
+    const getRoomHeaderAvatarBorderRadius = (type?: string) =>
+        type === CONST.ICON_TYPE_WORKSPACE ? {borderRadius: variables.componentBorderRadiusRounded} : StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.XXX_LARGE, type);
     return (
         <View style={styles.pointerEventsBoxNone}>
             <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
@@ -123,7 +129,7 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
                         style={[styles.justifyContentCenter, styles.alignItemsCenter]}
                     >
                         <PressableWithoutFocus
-                            style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
+                            style={[styles.mln4, getRoomHeaderAvatarBorderRadius(icon.type)]}
                             onPress={() => navigateToAvatarPage(icon)}
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={icon.name ?? ''}
@@ -131,8 +137,8 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
                         >
                             <Avatar
                                 source={icon.source}
-                                size={CONST.AVATAR_SIZE.LARGE}
-                                containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
+                                size={CONST.AVATAR_SIZE.XXX_LARGE}
+                                containerStyles={[...iconStyle, getRoomHeaderAvatarBorderRadius(icon.type)]}
                                 name={icon.name}
                                 avatarID={icon.id}
                                 type={icon.type}
@@ -147,7 +153,7 @@ function RoomHeaderAvatars({icons, report, policy, participants, currentUserAcco
                                         styles.roomHeaderAvatar,
                                         styles.mln4,
                                         ...iconStyle,
-                                        StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
+                                        getRoomHeaderAvatarBorderRadius(icon.type),
                                         styles.roomHeaderAvatarOverlay,
                                     ]}
                                 />
diff --git a/src/components/Search/SearchList/ListItem/AttendeesCell.tsx b/src/components/Search/SearchList/ListItem/AttendeesCell.tsx
index 92c160e1b2c6..a6d9de64a42b 100644
--- a/src/components/Search/SearchList/ListItem/AttendeesCell.tsx
+++ b/src/components/Search/SearchList/ListItem/AttendeesCell.tsx
@@ -50,12 +50,12 @@ function AttendeesCell({attendees, isHovered, isPressed}: AttendeesCellProps) {
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
-    const size = CONST.AVATAR_SIZE.SMALLER;
+    const size = CONST.AVATAR_SIZE.X_SMALL;
     const maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT;
     const oneAvatarSize = StyleUtils.getAvatarStyle(size);
     const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
     const overlapSize = oneAvatarSize.width / 3 + 2 * oneAvatarBorderWidth;
-    const height = oneAvatarSize.height;
+    const height = StyleUtils.getAvatarSizeWithBorder(size);
     const avatarContainerStyles = StyleUtils.combineStyles([styles.alignItemsCenter, styles.flexRow, StyleUtils.getHeight(height), styles.overflowHidden]);
 
     const icons = sortIconsByName(attendeeIcons, personalDetails, localeCompare);
@@ -123,7 +123,7 @@ function AttendeesCell({attendees, isHovered, isPressed}: AttendeesCellProps) {
                             }),
 
                             // Set overlay background color with RGBA value so that the text will not inherit opacity
-                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                            StyleUtils.getHorizontalStackedOverlayAvatarStyle(size),
                             icons.at(3)?.type === CONST.ICON_TYPE_WORKSPACE && StyleUtils.getAvatarBorderRadius(size, icons.at(3)?.type),
                             StyleUtils.getBackgroundColorWithOpacityStyle(colors.productDark400, variables.overlayOpacity),
                         ]}
diff --git a/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx b/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx
index b375702f3add..ad5ef421d9d3 100644
--- a/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx
+++ b/src/components/Search/SearchList/ListItem/AvatarWithTextCell.tsx
@@ -31,7 +31,7 @@ function AvatarWithTextCell({reportName, icon, isLargeScreenWidth}: AvatarWithTe
                     avatarID={icon.id}
                     type={icon.type}
                     fallbackIcon={icon.fallbackIcon}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                     containerStyles={[styles.pr2]}
                 />
             )}
diff --git a/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx b/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx
index af66fb0f15a8..e093b7d60149 100644
--- a/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx
+++ b/src/components/Search/SearchList/ListItem/ExportedIconCell.tsx
@@ -99,56 +99,56 @@ function ExportedIconCell({reportActions}: ExportedIconCellProps) {
                 <Avatar
                     source={icons.NetSuiteSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToXero && (
                 <Avatar
                     source={icons.XeroSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToIntacct && (
                 <Avatar
                     source={icons.IntacctSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {(isExportedToQuickbooksOnline || isExportedToQuickbooksDesktop) && (
                 <Avatar
                     source={icons.QBOSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToCertinia && (
                 <Avatar
                     source={icons.CertiniaSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToRillet && (
                 <Avatar
                     source={icons.RilletSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToBillCom && (
                 <Avatar
                     source={icons.BillComSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
             {isExportedToZenefits && (
                 <Avatar
                     source={icons.ZenefitsSquare}
                     type={CONST.ICON_TYPE_AVATAR}
-                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                 />
             )}
         </View>
diff --git a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
index ce9a8a428ab5..898edbba66bc 100644
--- a/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
+++ b/src/components/Search/SearchList/ListItem/TaskListItemRow.tsx
@@ -195,7 +195,7 @@ function TaskListItemRow({item, containerStyle, showTooltip}: TaskListItemRowPro
                         {!!item.assignee.accountID && (
                             <Avatar
                                 imageStyles={[styles.alignSelfCenter]}
-                                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                                size={CONST.AVATAR_SIZE.XXX_SMALL}
                                 source={item.assignee.avatar}
                                 name={item.formattedAssignee}
                                 type={CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx
index fe60e41ff841..d8f5f4402bae 100644
--- a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx
+++ b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx
@@ -53,7 +53,7 @@ function UserInfoAndActionButtonRow({
                     participantFromDisplayName={participantFromDisplayName}
                     participantToDisplayName=""
                     participantTo={item?.to}
-                    avatarSize={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                    avatarSize={CONST.AVATAR_SIZE.XXX_SMALL}
                     style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}
                     infoCellsTextStyle={styles.mutedNormalTextLabel}
                     infoCellsAvatarStyle={styles.pr1half}
diff --git a/src/components/Search/SearchList/ListItem/UserInfoCell.tsx b/src/components/Search/SearchList/ListItem/UserInfoCell.tsx
index 354dbfe43624..49fba2f37e23 100644
--- a/src/components/Search/SearchList/ListItem/UserInfoCell.tsx
+++ b/src/components/Search/SearchList/ListItem/UserInfoCell.tsx
@@ -37,7 +37,7 @@ function UserInfoCell({avatar, accountID, displayName, avatarSize, containerStyl
         <View style={[styles.flexRow, styles.alignItemsCenter, containerStyle]}>
             <Avatar
                 imageStyles={[styles.alignSelfCenter]}
-                size={avatarSize ?? CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                size={avatarSize ?? CONST.AVATAR_SIZE.XXX_SMALL}
                 source={avatar}
                 name={displayName}
                 type={CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/Search/SearchList/ListItem/WorkspaceCell.tsx b/src/components/Search/SearchList/ListItem/WorkspaceCell.tsx
index 1a100a323d01..a648cee8460e 100644
--- a/src/components/Search/SearchList/ListItem/WorkspaceCell.tsx
+++ b/src/components/Search/SearchList/ListItem/WorkspaceCell.tsx
@@ -35,7 +35,7 @@ function WorkspaceCell({policyID, report}: WorkspaceCellProps) {
         <View style={[styles.flexRow, styles.gap2, styles.flex1, styles.alignItemsCenter]}>
             <Avatar
                 imageStyles={[styles.alignSelfCenter]}
-                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                size={CONST.AVATAR_SIZE.XXX_SMALL}
                 source={icon.source}
                 avatarID={policyID}
                 name={name ?? ''}
diff --git a/src/components/Search/SearchStaticList.tsx b/src/components/Search/SearchStaticList.tsx
index 78e993db93e0..57d61476b638 100644
--- a/src/components/Search/SearchStaticList.tsx
+++ b/src/components/Search/SearchStaticList.tsx
@@ -215,7 +215,7 @@ function SearchStaticList({
                                     participantFromDisplayName={participantFromDisplayName}
                                     participantToDisplayName=""
                                     participantTo={item.to}
-                                    avatarSize={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                                    avatarSize={CONST.AVATAR_SIZE.XXX_SMALL}
                                     style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}
                                     infoCellsTextStyle={styles.mutedNormalTextLabel}
                                     infoCellsAvatarStyle={styles.pr1half}
diff --git a/src/components/SelectionList/ListItem/CardListItem.tsx b/src/components/SelectionList/ListItem/CardListItem.tsx
index e585b7536a2d..8701acb48794 100644
--- a/src/components/SelectionList/ListItem/CardListItem.tsx
+++ b/src/components/SelectionList/ListItem/CardListItem.tsx
@@ -106,7 +106,6 @@ function CardListItem<TItem extends ListItem>({
                                 >
                                     <View>
                                         <Avatar
-                                            containerStyles={StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT))}
                                             source={ownersAvatar.source}
                                             name={ownersAvatar.name}
                                             avatarID={ownersAvatar.id}
diff --git a/src/components/SelectionList/ListItem/MultiSelectListItem.tsx b/src/components/SelectionList/ListItem/MultiSelectListItem.tsx
index fb90bf42ae2e..c8ef2fbb5650 100644
--- a/src/components/SelectionList/ListItem/MultiSelectListItem.tsx
+++ b/src/components/SelectionList/ListItem/MultiSelectListItem.tsx
@@ -77,7 +77,7 @@ function AvatarLeftElement({icon}: {icon: Icon}) {
         <View style={[styles.mentionSuggestionsAvatarContainer, styles.mr3]}>
             <Avatar
                 source={icon.source}
-                size={CONST.AVATAR_SIZE.SMALLER}
+                size={CONST.AVATAR_SIZE.X_SMALL}
                 name={icon.name}
                 avatarID={icon.id}
                 type={icon.type ?? CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/SelectionList/ListItem/SingleSelectWithAvatarListItem.tsx b/src/components/SelectionList/ListItem/SingleSelectWithAvatarListItem.tsx
index 2b227fc2006b..d27a904cf47d 100644
--- a/src/components/SelectionList/ListItem/SingleSelectWithAvatarListItem.tsx
+++ b/src/components/SelectionList/ListItem/SingleSelectWithAvatarListItem.tsx
@@ -2,8 +2,6 @@ import Avatar from '@components/Avatar';
 
 import useThemeStyles from '@hooks/useThemeStyles';
 
-import variables from '@styles/variables';
-
 import CONST from '@src/CONST';
 
 import React from 'react';
@@ -40,7 +38,7 @@ function SingleSelectWithAvatarListItem<TItem extends ListItem>({item, wrapperSt
                 avatarID={icon.id}
                 type={icon.type ?? CONST.ICON_TYPE_AVATAR}
                 fallbackIcon={icon.fallbackIcon}
-                iconAdditionalStyles={[{width: variables.avatarSizeNormal, height: variables.avatarSizeNormal}, styles.mr3]}
+                iconAdditionalStyles={styles.mr3}
             />
         </View>
     );
diff --git a/src/components/SelectionList/ListItem/UserSelectionListItem.tsx b/src/components/SelectionList/ListItem/UserSelectionListItem.tsx
index faa1f6c5639a..61980e170908 100644
--- a/src/components/SelectionList/ListItem/UserSelectionListItem.tsx
+++ b/src/components/SelectionList/ListItem/UserSelectionListItem.tsx
@@ -88,7 +88,7 @@ function UserSelectionListItem<TItem extends ListItem>({
                     <View style={styles.mentionSuggestionsAvatarContainer}>
                         <Avatar
                             source={item.icons.at(0)?.source}
-                            size={CONST.AVATAR_SIZE.SMALLER}
+                            size={CONST.AVATAR_SIZE.X_SMALL}
                             name={item.icons.at(0)?.name}
                             avatarID={item.icons.at(0)?.id}
                             type={item.icons.at(0)?.type ?? CONST.ICON_TYPE_AVATAR}
diff --git a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx
index 6ceb68bfd200..d224a6fc523b 100644
--- a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx
+++ b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx
@@ -93,7 +93,7 @@ export default function WorkspaceCategoriesTableRow({rowIndex, shouldUseNarrowTa
                                         name={item.approverDisplayName}
                                         source={item.approverAvatar}
                                         type={CONST.ICON_TYPE_AVATAR}
-                                        size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                                        size={CONST.AVATAR_SIZE.XXX_SMALL}
                                     />
                                     <TextWithTooltip
                                         shouldShowTooltip
diff --git a/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx b/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx
index b297209a3a7d..1889f607f3ec 100644
--- a/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx
+++ b/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx
@@ -192,7 +192,7 @@ export default function WorkspaceRow({item, shouldUseNarrowTableLayout, rowIndex
                                     source={item.ownerAvatar}
                                     avatarID={item.ownerAccountID}
                                     type={CONST.ICON_TYPE_AVATAR}
-                                    size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                                 />
                                 <WorkspacesListRowDisplayName
                                     isDeleted={item.isDeleted}
diff --git a/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx b/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx
index 23a4a57562b5..9a43e5acc8fd 100644
--- a/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx
+++ b/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx
@@ -127,7 +127,7 @@ export default function WorkspaceTagsTableRow({
                                             name={item.approverDisplayName}
                                             source={item.approverAvatar}
                                             type={CONST.ICON_TYPE_AVATAR}
-                                            size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                                            size={CONST.AVATAR_SIZE.XXX_SMALL}
                                         />
                                     )}
                                     <TextWithTooltip
diff --git a/src/components/UserPill.tsx b/src/components/UserPill.tsx
index df3ef997c4ea..8c47597728ca 100644
--- a/src/components/UserPill.tsx
+++ b/src/components/UserPill.tsx
@@ -39,7 +39,7 @@ function UserPill({avatar, displayName, accountID, email, style}: UserPillProps)
             <View style={[styles.flexRow, styles.alignItemsCenter, styles.alignSelfStart, styles.userPill, shouldUseNarrowLayout && styles.mw100, style]}>
                 <Avatar
                     source={avatar}
-                    size={CONST.AVATAR_SIZE.MENTION_ICON}
+                    size={CONST.AVATAR_SIZE.XXX_SMALL}
                     type={CONST.ICON_TYPE_AVATAR}
                     avatarID={accountID}
                     name={displayName}
diff --git a/src/components/WorkspaceConfirmationForm.tsx b/src/components/WorkspaceConfirmationForm.tsx
index 77283250e4c1..0eb7ee85cfdf 100644
--- a/src/components/WorkspaceConfirmationForm.tsx
+++ b/src/components/WorkspaceConfirmationForm.tsx
@@ -200,8 +200,8 @@ function WorkspaceConfirmationForm({
                         setAvatarFile(undefined);
                         setWorkspaceAvatar({avatarUri: null, avatarFileName: null, avatarFileType: null});
                     }}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
-                    avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                    avatarStyle={styles.alignSelfCenter}
                     editIcon={icons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
                     type={CONST.ICON_TYPE_WORKSPACE}
diff --git a/src/hooks/useWorkspaceConfirmationAvatar.tsx b/src/hooks/useWorkspaceConfirmationAvatar.tsx
index 7b53c7adbca6..4277faf5af1d 100644
--- a/src/hooks/useWorkspaceConfirmationAvatar.tsx
+++ b/src/hooks/useWorkspaceConfirmationAvatar.tsx
@@ -16,17 +16,16 @@ function useWorkspaceConfirmationAvatar({policyID, source, name}: {policyID: str
     return useCallback(
         () => (
             <Avatar
-                containerStyles={styles.avatarXLarge}
-                imageStyles={[styles.avatarXLarge, styles.alignSelfCenter]}
+                imageStyles={styles.alignSelfCenter}
                 source={source}
                 fallbackIcon={icons.FallbackWorkspaceAvatar}
-                size={CONST.AVATAR_SIZE.X_LARGE}
+                size={CONST.AVATAR_SIZE.XXXX_LARGE}
                 name={name}
                 avatarID={policyID}
                 type={CONST.ICON_TYPE_WORKSPACE}
             />
         ),
-        [name, policyID, source, styles.alignSelfCenter, styles.avatarXLarge, icons.FallbackWorkspaceAvatar],
+        [name, policyID, source, styles.alignSelfCenter, icons.FallbackWorkspaceAvatar],
     );
 }
 
diff --git a/src/pages/DynamicReportDetailsPage.tsx b/src/pages/DynamicReportDetailsPage.tsx
index afe176c49ade..2bb450172516 100644
--- a/src/pages/DynamicReportDetailsPage.tsx
+++ b/src/pages/DynamicReportDetailsPage.tsx
@@ -828,7 +828,7 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report
                 <View style={styles.mb3}>
                     <ReportActionAvatars
                         noRightMarginOnSubscriptContainer
-                        size={CONST.AVATAR_SIZE.X_LARGE}
+                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                         useProfileNavigationWrapper
                         singleAvatarContainerStyle={[]}
                         reportID={report?.reportID ?? moneyRequestReport?.reportID}
@@ -842,8 +842,7 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report
                 source={icons.at(0)?.source}
                 avatarID={icons.at(0)?.id}
                 isUsingDefaultAvatar={!report.avatarUrl}
-                size={CONST.AVATAR_SIZE.X_LARGE}
-                avatarStyle={styles.avatarXLarge}
+                size={CONST.AVATAR_SIZE.XXXX_LARGE}
                 onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID))}
                 onImageRemoved={() => {
                     // Calling this without a file will remove the avatar
@@ -865,7 +864,6 @@ function DynamicReportDetailsPage({policy, report, route, reportMetadata, report
         isGroupChat,
         icons,
         report,
-        styles.avatarXLarge,
         styles.smallEditIconAccount,
         styles.mt6,
         styles.w100,
diff --git a/src/pages/DynamicReportParticipantDetailsPage.tsx b/src/pages/DynamicReportParticipantDetailsPage.tsx
index 820cd9a84a6c..af5d3e9b8684 100644
--- a/src/pages/DynamicReportParticipantDetailsPage.tsx
+++ b/src/pages/DynamicReportParticipantDetailsPage.tsx
@@ -90,12 +90,11 @@ function DynamicReportParticipantDetails({report, route}: DynamicReportParticipa
             <ScrollView contentContainerStyle={[!isInLandscapeMode && [styles.containerWithSpaceBetween, styles.justifyContentStart], styles.pointerEventsBoxNone]}>
                 <View style={[styles.avatarSectionWrapper, styles.pb0]}>
                     <Avatar
-                        containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
-                        imageStyles={[styles.avatarXLarge]}
+                        containerStyles={[styles.mv5, styles.noOutline]}
                         source={details.avatar}
                         avatarID={accountID}
                         type={CONST.ICON_TYPE_AVATAR}
-                        size={CONST.AVATAR_SIZE.X_LARGE}
+                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                         fallbackIcon={fallbackIcon}
                     />
                     {!!(displayName ?? '') && (
diff --git a/src/pages/DynamicRoomMemberDetailsPage.tsx b/src/pages/DynamicRoomMemberDetailsPage.tsx
index 9b3f2bfc98f9..26d8597667c1 100644
--- a/src/pages/DynamicRoomMemberDetailsPage.tsx
+++ b/src/pages/DynamicRoomMemberDetailsPage.tsx
@@ -84,12 +84,11 @@ function DynamicRoomMemberDetailsPage({report, route}: DynamicRoomMemberDetailsP
             <View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone, styles.justifyContentStart]}>
                 <View style={[styles.avatarSectionWrapper, styles.pb0]}>
                     <Avatar
-                        containerStyles={[styles.avatarXLarge, styles.mv5, styles.noOutline]}
-                        imageStyles={[styles.avatarXLarge]}
+                        containerStyles={[styles.mv5, styles.noOutline]}
                         source={details.avatar}
                         avatarID={accountID}
                         type={CONST.ICON_TYPE_AVATAR}
-                        size={CONST.AVATAR_SIZE.X_LARGE}
+                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                         fallbackIcon={fallbackIcon}
                     />
                     {!!(details.displayName ?? '') && (
diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
index 81ded6615015..70e11fc1f188 100644
--- a/src/pages/NewChatConfirmPage.tsx
+++ b/src/pages/NewChatConfirmPage.tsx
@@ -96,8 +96,7 @@ function AvatarAndGroupNameSection({setAvatarFile, optimisticReportID}: AvatarAn
                         setAvatarFile(undefined);
                         setGroupDraft({avatarUri: null, avatarFileName: null, avatarFileType: null});
                     }}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
-                    avatarStyle={styles.avatarXLarge}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                     editIcon={icons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
                     style={styles.w100}
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 87d1a235cd6a..191e9494422d 100755
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -227,12 +227,10 @@ function ProfilePage({route}: ProfilePageProps) {
                             >
                                 <OfflineWithFeedback pendingAction={details?.pendingFields?.avatar}>
                                     <Avatar
-                                        containerStyles={[styles.avatarXLarge]}
-                                        imageStyles={[styles.avatarXLarge]}
                                         source={details?.avatar}
                                         avatarID={accountID}
                                         type={CONST.ICON_TYPE_AVATAR}
-                                        size={CONST.AVATAR_SIZE.X_LARGE}
+                                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                                         fallbackIcon={fallbackIcon}
                                     />
                                 </OfflineWithFeedback>
diff --git a/src/pages/domain/BaseDomainMemberDetailsComponent.tsx b/src/pages/domain/BaseDomainMemberDetailsComponent.tsx
index e8e109b41347..ada8946997a3 100644
--- a/src/pages/domain/BaseDomainMemberDetailsComponent.tsx
+++ b/src/pages/domain/BaseDomainMemberDetailsComponent.tsx
@@ -73,12 +73,11 @@ function BaseDomainMemberDetailsComponent({domainAccountID, accountID, children,
                         <View style={[styles.avatarSectionWrapper, styles.pb0]}>
                             <OfflineWithFeedback pendingAction={personalDetails?.pendingFields?.avatar}>
                                 <Avatar
-                                    containerStyles={[styles.avatarXLarge, styles.mb4, styles.noOutline]}
-                                    imageStyles={[styles.avatarXLarge]}
+                                    containerStyles={[styles.mb4, styles.noOutline]}
                                     source={personalDetails?.avatar}
                                     avatarID={accountID}
                                     type={CONST.ICON_TYPE_AVATAR}
-                                    size={CONST.AVATAR_SIZE.X_LARGE}
+                                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                                     fallbackIcon={personalDetails?.fallbackIcon}
                                 />
                             </OfflineWithFeedback>
diff --git a/src/pages/inbox/HeaderView.tsx b/src/pages/inbox/HeaderView.tsx
index ad58b5f4cc2b..5fc1fed04aed 100644
--- a/src/pages/inbox/HeaderView.tsx
+++ b/src/pages/inbox/HeaderView.tsx
@@ -61,7 +61,6 @@ import {
     isConciergeChatReport,
     isCurrentUserSubmitter,
     isDeprecatedGroupDM,
-    isExpenseRequest,
     isGroupChat as isGroupChatReportUtils,
     isInvoiceReport,
     isInvoiceRoom,
@@ -275,7 +274,6 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps)
     );
 
     const shouldShowSubscript = shouldReportShowSubscript(report, isReportArchived);
-    const defaultSubscriptSize = isExpenseRequest(report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
     const brickRoadIndicator = hasReportNameError(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
     const shouldDisableDetailPage = shouldDisableDetailPageReportUtils(report, isParticipantOptimistic);
     const shouldUseGroupTitle = isGroupChat && (!!report?.reportName || !isMultipleParticipant);
@@ -316,7 +314,6 @@ function HeaderView({onNavigationMenuButtonClicked, reportID}: HeaderViewProps)
     const multipleAvatars = (
         <ReportActionAvatars
             reportID={report?.reportID}
-            size={shouldShowSubscript ? defaultSubscriptSize : undefined}
             singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
         />
     );
diff --git a/src/pages/inbox/report/ReportActionItemCreated.tsx b/src/pages/inbox/report/ReportActionItemCreated.tsx
index 2084a0f98740..e575187bdf93 100644
--- a/src/pages/inbox/report/ReportActionItemCreated.tsx
+++ b/src/pages/inbox/report/ReportActionItemCreated.tsx
@@ -102,7 +102,7 @@ function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedPr
                         >
                             <ReportActionAvatars
                                 reportID={reportID}
-                                size={CONST.AVATAR_SIZE.X_LARGE}
+                                size={CONST.AVATAR_SIZE.XXXX_LARGE}
                                 horizontalStacking={{
                                     displayInRows: shouldUseNarrowLayout,
                                     maxAvatarsInRow: shouldUseNarrowLayout ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN,
diff --git a/src/pages/inbox/sidebar/AvatarWithDelegateAvatar.tsx b/src/pages/inbox/sidebar/AvatarWithDelegateAvatar.tsx
index 379151cfabde..fcb93d4da63c 100644
--- a/src/pages/inbox/sidebar/AvatarWithDelegateAvatar.tsx
+++ b/src/pages/inbox/sidebar/AvatarWithDelegateAvatar.tsx
@@ -48,7 +48,7 @@ function AvatarWithDelegateAvatar({delegateEmail, isHovered = false, isSelected
             <View style={[styles.sidebarStatusAvatar, isHovered && styles.sidebarStatusAvatarHovered]}>
                 <View style={styles.emojiStatusLHN}>
                     <Avatar
-                        size={isSmallScreenWidth ? CONST.AVATAR_SIZE.MID_SUBSCRIPT : CONST.AVATAR_SIZE.SMALL}
+                        size={isSmallScreenWidth ? CONST.AVATAR_SIZE.XXX_SMALL : CONST.AVATAR_SIZE.SMALL}
                         source={getSmallSizeAvatar({avatarSource: delegatePersonalDetail?.avatar, accountID: delegatePersonalDetail?.accountID, defaultAvatars})}
                         fallbackIcon={delegatePersonalDetail?.fallbackIcon}
                         type={CONST.ICON_TYPE_AVATAR}
diff --git a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
index 077b55ec4335..1a0ef65ca70d 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
+++ b/src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx
@@ -140,14 +140,14 @@ function ReceiptPreviews({submit, isMultiScanEnabled, isCapturingPhoto = false,
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={false}
                     contentContainerStyle={
-                        isInLandscapeMode ? [{paddingBottom: styles.singleAvatarMedium.height}, styles.ph4] : [{paddingRight: styles.singleAvatarMedium.width}, styles.pl4]
+                        isInLandscapeMode ? [{paddingBottom: styles.singleAvatarXLarge.height}, styles.ph4] : [{paddingRight: styles.singleAvatarXLarge.width}, styles.pl4]
                     }
                 />
                 <SubmitButtonShadow isInLandscapeMode={isInLandscapeMode}>
                     <Button
                         large
                         isDisabled={!optimisticTransactionsReceipts.length || isCapturingPhoto}
-                        innerStyles={[styles.singleAvatarMedium, styles.bgGreenSuccess]}
+                        innerStyles={[styles.singleAvatarXLarge, styles.bgGreenSuccess]}
                         icon={icons.ArrowRight}
                         iconFill={theme.white}
                         onPress={submit}
diff --git a/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts b/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts
index 9bfaf0ae2d99..2ffdc4f03ccd 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts
+++ b/src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts
@@ -10,7 +10,7 @@ function useReceiptPreviewsSizes(isInLandscapeMode: boolean) {
     if (isInLandscapeMode) {
         const previewItemSize = styles.receiptPlaceholderLandscape.height + styles.receiptPlaceholderLandscape.marginBottom;
 
-        const submitButtonHeight = styles.singleAvatarMedium.height;
+        const submitButtonHeight = styles.singleAvatarXLarge.height;
         const tabSelectorButtonHeight = variables.tabSelectorButtonHeight + styles.pb4.paddingBottom;
         const contentHeaderHeight = variables.contentHeaderHeight;
         const initialReceiptsAmount = (windowHeight - submitButtonHeight - tabSelectorButtonHeight - contentHeaderHeight) / previewItemSize;
@@ -23,7 +23,7 @@ function useReceiptPreviewsSizes(isInLandscapeMode: boolean) {
     }
 
     const previewItemSize = styles.receiptPlaceholder.width + styles.receiptPlaceholder.marginRight;
-    const initialReceiptsAmount = (windowWidth - styles.ph4.paddingHorizontal * 2 - styles.singleAvatarMedium.width) / previewItemSize;
+    const initialReceiptsAmount = (windowWidth - styles.ph4.paddingHorizontal * 2 - styles.singleAvatarXLarge.width) / previewItemSize;
 
     return {
         previewsSize: styles.receiptPlaceholder.height + styles.pv2.paddingVertical * 2,
diff --git a/src/pages/settings/Agents/AddAgentPage.tsx b/src/pages/settings/Agents/AddAgentPage.tsx
index 313e99060e60..3778cb178aa5 100644
--- a/src/pages/settings/Agents/AddAgentPage.tsx
+++ b/src/pages/settings/Agents/AddAgentPage.tsx
@@ -59,7 +59,6 @@ function AddAgentPageContent({route, template}: AddAgentPageContentProps) {
     const defaultAgentName = template?.name ?? (displayName ? translate('addAgentPage.defaultAgentName', displayName) : undefined);
     const defaultPrompt = template?.prompt ?? translate('addAgentPage.defaultPrompt');
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Pencil']);
-    const avatarStyle = [styles.avatarXLarge, styles.alignSelfCenter];
     const [avatarDraft, avatarDraftMetadata] = useOnyx(ONYXKEYS.AGENT_NEW_AVATAR_DRAFT);
     const isDraftLoading = isLoadingOnyxValue(avatarDraftMetadata);
     const hasSubmittedRef = useRef(false);
@@ -155,8 +154,8 @@ function AddAgentPageContent({route, template}: AddAgentPageContentProps) {
                             text={translate('addAgentPage.editAvatar')}
                             source={avatarSource}
                             onPress={() => Navigation.navigate(ROUTES.SETTINGS_AGENTS_ADD_AVATAR)}
-                            size={CONST.AVATAR_SIZE.X_LARGE}
-                            avatarStyle={avatarStyle}
+                            size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                            avatarStyle={styles.alignSelfCenter}
                             editIcon={expensifyIcons.Pencil}
                             editIconStyle={styles.smallEditIconAccount}
                             sentryLabel={CONST.SENTRY_LABEL.ADD_AGENT_PAGE.AVATAR}
diff --git a/src/pages/settings/Agents/EditAgentPage.tsx b/src/pages/settings/Agents/EditAgentPage.tsx
index ccd903a97ec4..680094cd326b 100644
--- a/src/pages/settings/Agents/EditAgentPage.tsx
+++ b/src/pages/settings/Agents/EditAgentPage.tsx
@@ -109,8 +109,8 @@ function EditAgentPage({route}: EditAgentPageProps) {
                             source={personalDetails?.avatar ?? ''}
                             avatarID={accountID}
                             onPress={handleEditAvatarPress}
-                            size={CONST.AVATAR_SIZE.X_LARGE}
-                            avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]}
+                            size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                            avatarStyle={styles.alignSelfCenter}
                             pendingAction={personalDetails?.pendingFields?.avatar}
                             sentryLabel={CONST.SENTRY_LABEL.EDIT_AGENT_PAGE.AVATAR}
                             editIconStyle={styles.smallEditIconAccount}
diff --git a/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx b/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
index 4b79273fdfff..9166a7b33053 100644
--- a/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
+++ b/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx
@@ -159,11 +159,11 @@ function EditAgentAvatarContent({accountID, fallbackRoute, onSave, initialPreset
             >
                 <View style={[styles.flexColumn, styles.gap5, styles.alignItemsCenter, styles.pb10]}>
                     <Avatar
-                        containerStyles={[styles.avatarXLarge, styles.alignSelfCenter]}
-                        imageStyles={[styles.avatarXLarge, styles.alignSelfCenter]}
+                        containerStyles={styles.alignSelfCenter}
+                        imageStyles={styles.alignSelfCenter}
                         source={previewSource}
                         avatarID={accountID}
-                        size={CONST.AVATAR_SIZE.X_LARGE}
+                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                         type={CONST.ICON_TYPE_AVATAR}
                     />
                     <AttachmentPicker
@@ -205,7 +205,7 @@ function EditAgentAvatarContent({accountID, fallbackRoute, onSave, initialPreset
                                     <Avatar
                                         type={CONST.ICON_TYPE_AVATAR}
                                         source={local}
-                                        size={CONST.AVATAR_SIZE.MEDIUM}
+                                        size={CONST.AVATAR_SIZE.X_LARGE}
                                         containerStyles={styles.avatarSelectorContainer}
                                     />
                                 </PressableWithFeedback>
diff --git a/src/pages/settings/Profile/Avatar/AvatarPreview.tsx b/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
index 731dbf0f409d..440defd8b5a7 100644
--- a/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
+++ b/src/pages/settings/Profile/Avatar/AvatarPreview.tsx
@@ -54,7 +54,7 @@ function AvatarPreview({selected, isRemoved, onImageRemoved, imageData, setError
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
 
-    const avatarStyle = [styles.avatarXLarge, styles.alignSelfStart, styles.alignSelfCenter];
+    const avatarStyle = [styles.alignSelfStart, styles.alignSelfCenter];
 
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {initials} = useLetterAvatars();
@@ -126,7 +126,7 @@ function AvatarPreview({selected, isRemoved, onImageRemoved, imageData, setError
                     <UserInitialsAvatar
                         text={initials}
                         colors={selectedLetterScheme}
-                        size={StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.X_LARGE)}
+                        size={StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.XXXX_LARGE)}
                     />
                 </View>
             ) : (
@@ -136,7 +136,7 @@ function AvatarPreview({selected, isRemoved, onImageRemoved, imageData, setError
                     source={avatarURL}
                     avatarID={accountID}
                     fallbackIcon={currentUserPersonalDetails?.fallbackIcon}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                     type={CONST.ICON_TYPE_AVATAR}
                 />
             )}
diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx
index ac4b0cface1f..78c761d0502b 100755
--- a/src/pages/settings/Profile/ProfilePage.tsx
+++ b/src/pages/settings/Profile/ProfilePage.tsx
@@ -81,7 +81,6 @@ function ProfilePage() {
     const accountID = currentUserPersonalDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID;
     const isAgentAccount = useIsAgentAccount();
     const [agentPrompt] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`);
-    const avatarStyle = [styles.avatarXLarge, styles.alignSelfStart];
     const {asset: Profile} = useMemoizedLazyAsset(() => loadIllustration('Profile' as IllustrationName));
     const icons = useMemoizedLazyExpensifyIcons(['QrCode']);
 
@@ -233,7 +232,7 @@ function ProfilePage() {
                             <View style={[styles.pt3, styles.pb6, styles.alignSelfStart, styles.w100]}>
                                 {isEmptyObject(currentUserPersonalDetails) || accountID === -1 || !avatarURL ? (
                                     <AvatarSkeleton
-                                        size={CONST.AVATAR_SIZE.X_LARGE}
+                                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                                         reasonAttributes={{
                                             context: 'ProfilePage',
                                             isPersonalDetailsEmpty: isEmptyObject(currentUserPersonalDetails),
@@ -253,8 +252,8 @@ function ProfilePage() {
                                                 source={avatarURL}
                                                 avatarID={accountID}
                                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_AVATAR)}
-                                                size={CONST.AVATAR_SIZE.X_LARGE}
-                                                avatarStyle={avatarStyle}
+                                                size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                                                avatarStyle={styles.alignSelfStart}
                                                 pendingAction={currentUserPersonalDetails?.pendingFields?.avatar ?? undefined}
                                                 fallbackIcon={currentUserPersonalDetails?.fallbackIcon}
                                                 editIconStyle={styles.profilePageAvatar}
diff --git a/src/pages/workspace/WorkspaceOverviewPage.tsx b/src/pages/workspace/WorkspaceOverviewPage.tsx
index 0c01d5893b6b..5c6fef31f9a5 100644
--- a/src/pages/workspace/WorkspaceOverviewPage.tsx
+++ b/src/pages/workspace/WorkspaceOverviewPage.tsx
@@ -262,18 +262,17 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
     const DefaultAvatar = useCallback(
         () => (
             <Avatar
-                containerStyles={styles.avatarXLarge}
-                imageStyles={[styles.avatarXLarge, styles.alignSelfCenter]}
+                imageStyles={styles.alignSelfCenter}
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing cannot be used if left side can be empty string
                 source={policy?.avatarURL || getDefaultWorkspaceAvatar(policyName)}
                 fallbackIcon={expensifyIcons.FallbackWorkspaceAvatar}
-                size={CONST.AVATAR_SIZE.X_LARGE}
+                size={CONST.AVATAR_SIZE.XXXX_LARGE}
                 name={policyName}
                 avatarID={policyID}
                 type={CONST.ICON_TYPE_WORKSPACE}
             />
         ),
-        [expensifyIcons.FallbackWorkspaceAvatar, policy?.avatarURL, policyID, policyName, styles.alignSelfCenter, styles.avatarXLarge],
+        [expensifyIcons.FallbackWorkspaceAvatar, policy?.avatarURL, policyID, policyName, styles.alignSelfCenter],
     );
 
     const dropdownMenuRef = useRef<{setIsMenuVisible: (visible: boolean) => void} | null>(null);
@@ -525,9 +524,8 @@ function WorkspaceOverviewPage({policyDraft, policy: policyProp, route}: Workspa
                         }}
                         source={policy?.avatarURL ?? ''}
                         avatarID={policyID}
-                        size={CONST.AVATAR_SIZE.X_LARGE}
+                        size={CONST.AVATAR_SIZE.XXXX_LARGE}
                         name={policyName}
-                        avatarStyle={styles.avatarXLarge}
                         enablePreview
                         DefaultAvatar={DefaultAvatar}
                         type={CONST.ICON_TYPE_WORKSPACE}
diff --git a/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
index 3d1a51264419..6e9b20717e8e 100644
--- a/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
+++ b/src/pages/workspace/companyCards/DynamicWorkspaceCompanyCardDetailsPage.tsx
@@ -325,7 +325,7 @@ function DynamicWorkspaceCompanyCardDetailsPage({route}: DynamicWorkspaceCompany
                                     numberOfLinesTitle={2}
                                     icon={exportMenuItem.shouldShowMenuItemIcon ? getIntegrationIcon(connectedIntegration, expensifyIcons) : undefined}
                                     iconType={CONST.ICON_TYPE_AVATAR}
-                                    avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                                    avatarSize={CONST.AVATAR_SIZE.X_SMALL}
                                     shouldShowRightIcon={canWriteCompanyCards}
                                     onPress={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_COMPANY_CARD_EXPORT.getRoute(feedName, cardID)))}
                                     interactive={canWriteCompanyCards}
diff --git a/src/pages/workspace/duplicate/WorkspaceDuplicateForm.tsx b/src/pages/workspace/duplicate/WorkspaceDuplicateForm.tsx
index 3dcb0b4432ad..c23c7131bbf1 100644
--- a/src/pages/workspace/duplicate/WorkspaceDuplicateForm.tsx
+++ b/src/pages/workspace/duplicate/WorkspaceDuplicateForm.tsx
@@ -114,8 +114,8 @@ function WorkspaceDuplicateForm({policyID}: WorkspaceDuplicateFormProps) {
                         setAvatarFile(undefined);
                         setWorkspaceAvatar({avatarUri: null, avatarFileName: null, avatarFileType: null});
                     }}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
-                    avatarStyle={[styles.avatarXLarge, styles.alignSelfCenter]}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
+                    avatarStyle={styles.alignSelfCenter}
                     editIcon={expensifyIcons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
                     type={CONST.ICON_TYPE_WORKSPACE}
diff --git a/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
index 3375b061d3ac..15daf81cfd70 100644
--- a/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
+++ b/src/pages/workspace/expensifyCard/DynamicWorkspaceExpensifyCardDetailsPage.tsx
@@ -476,7 +476,7 @@ function DynamicWorkspaceExpensifyCardDetailsPage({route}: DynamicWorkspaceExpen
                                     numberOfLinesTitle={2}
                                     icon={exportMenuItem.shouldShowMenuItemIcon ? getIntegrationIcon(connectedIntegration, expensifyIcons) : undefined}
                                     iconType={CONST.ICON_TYPE_AVATAR}
-                                    avatarSize={CONST.AVATAR_SIZE.SMALLER}
+                                    avatarSize={CONST.AVATAR_SIZE.X_SMALL}
                                     shouldShowRightIcon={canWriteExpensifyCard}
                                     onPress={() =>
                                         Navigation.navigate(
diff --git a/src/pages/workspace/members/ImportedMembersConfirmationPage.tsx b/src/pages/workspace/members/ImportedMembersConfirmationPage.tsx
index 32a517c8ebae..47e988bebbaf 100644
--- a/src/pages/workspace/members/ImportedMembersConfirmationPage.tsx
+++ b/src/pages/workspace/members/ImportedMembersConfirmationPage.tsx
@@ -141,7 +141,7 @@ function ImportedMembersConfirmationPage({route}: ImportedMembersConfirmationPag
             <View style={styles.ph5}>
                 <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                     <ReportActionAvatars
-                        size={CONST.AVATAR_SIZE.LARGE}
+                        size={CONST.AVATAR_SIZE.XXX_LARGE}
                         accountIDs={Object.values(invitedEmailsToAccountIDsDraft ?? {})}
                         horizontalStacking={{
                             displayInRows: true,
diff --git a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx
index 3eb623b1667f..d8d48e32ff26 100644
--- a/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx
+++ b/src/pages/workspace/members/WorkspaceInviteMessageComponent.tsx
@@ -292,7 +292,7 @@ function WorkspaceInviteMessageComponent({
                     )}
                     <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                         <ReportActionAvatars
-                            size={CONST.AVATAR_SIZE.LARGE}
+                            size={CONST.AVATAR_SIZE.XXX_LARGE}
                             accountIDs={Object.values(invitedEmailsToAccountIDsDraft ?? {})}
                             horizontalStacking={{
                                 displayInRows: true,
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index a4e8cc3de73d..73328a15b54a 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -339,12 +339,11 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                         <View style={[styles.avatarSectionWrapper, styles.pb0]}>
                             <OfflineWithFeedback pendingAction={details.pendingFields?.avatar}>
                                 <Avatar
-                                    containerStyles={[styles.avatarXLarge, styles.mb4, styles.noOutline]}
-                                    imageStyles={[styles.avatarXLarge]}
+                                    containerStyles={[styles.mb4, styles.noOutline]}
                                     source={details.avatar}
                                     avatarID={accountID}
                                     type={CONST.ICON_TYPE_AVATAR}
-                                    size={CONST.AVATAR_SIZE.X_LARGE}
+                                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                                     fallbackIcon={fallbackIcon}
                                 />
                             </OfflineWithFeedback>
diff --git a/src/stories/Avatar.stories.tsx b/src/stories/Avatar.stories.tsx
index 1b51ab4c5b29..7b8003acaf1d 100644
--- a/src/stories/Avatar.stories.tsx
+++ b/src/stories/Avatar.stories.tsx
@@ -41,7 +41,7 @@ WorkspaceAvatar.args = {
     type: CONST.ICON_TYPE_WORKSPACE,
     name: 'Cathy’s Croissants',
     avatarID: 'policy_123',
-    size: CONST.AVATAR_SIZE.LARGE,
+    size: CONST.AVATAR_SIZE.XXX_LARGE,
 };
 
 const FallbackAvatar: AvatarStory = Template.bind({});
diff --git a/src/stories/AvatarSelector.stories.tsx b/src/stories/AvatarSelector.stories.tsx
index 669ac8ecab72..19f329eed277 100644
--- a/src/stories/AvatarSelector.stories.tsx
+++ b/src/stories/AvatarSelector.stories.tsx
@@ -53,7 +53,7 @@ WithPreselectedLetterAvatar.args = {
 const LargeAvatars: AvatarSelectorStory = Template.bind({});
 LargeAvatars.args = {
     selectedID: 'helmet-blue400',
-    size: CONST.AVATAR_SIZE.LARGE,
+    size: CONST.AVATAR_SIZE.XXX_LARGE,
     label: 'Large avatars',
 };
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 945a958ae5ca..aa34b96aa848 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1830,17 +1830,17 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         sidebarAvatar: {
-            borderRadius: variables.sidebarAvatarSize,
-            height: variables.sidebarAvatarSize,
-            width: variables.sidebarAvatarSize,
+            borderRadius: variables.avatarSizeSmall,
+            height: variables.avatarSizeSmall,
+            width: variables.avatarSizeSmall,
         },
 
         selectedAvatarBorder: {
             padding: 1,
             borderWidth: 2,
             borderRadius: 20,
-            height: variables.sidebarAvatarSize + 6,
-            width: variables.sidebarAvatarSize + 6,
+            height: variables.avatarSizeSmall + 6,
+            width: variables.avatarSizeSmall + 6,
             borderColor: theme.success,
             right: -3,
             top: -3,
@@ -2494,67 +2494,67 @@ const staticStyles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusNormal,
         },
 
-        singleAvatar: {
-            height: 24,
-            width: 24,
+        singleAvatarXSmall: {
+            height: variables.avatarSizeXSmall,
+            width: variables.avatarSizeXSmall,
             backgroundColor: theme.icon,
-            borderRadius: 12,
+            borderRadius: variables.avatarSizeXSmall / 2,
         },
 
-        singleAvatarSmall: {
-            height: 16,
-            width: 16,
+        singleAvatarXxxSmall: {
+            height: variables.avatarSizeXxxSmall,
+            width: variables.avatarSizeXxxSmall,
             backgroundColor: theme.icon,
-            borderRadius: 8,
+            borderRadius: variables.avatarSizeXxxSmall / 2,
         },
 
-        singleAvatarMedium: {
-            height: 52,
-            width: 52,
+        singleAvatarXLarge: {
+            height: variables.avatarSizeXLarge,
+            width: variables.avatarSizeXLarge,
             backgroundColor: theme.icon,
-            borderRadius: 52,
+            borderRadius: variables.avatarSizeXLarge,
         },
 
-        singleAvatarMediumLarge: {
-            height: 60,
-            width: 60,
+        singleAvatarXxLarge: {
+            height: variables.avatarSizeXxLarge,
+            width: variables.avatarSizeXxLarge,
             backgroundColor: theme.icon,
-            borderRadius: 80,
+            borderRadius: variables.avatarSizeXxLarge,
         },
 
-        secondAvatar: {
+        secondAvatarXSmall: {
             position: 'absolute',
             right: -18,
             bottom: -18,
-            borderWidth: 2,
-            borderRadius: 14,
+            borderWidth: variables.avatarBorderWidthSmall,
+            borderRadius: (variables.avatarSizeXSmall + 2 * variables.avatarBorderWidthSmall) / 2,
             borderColor: 'transparent',
         },
 
-        secondAvatarSmall: {
+        secondAvatarXxxSmall: {
             position: 'absolute',
             right: -14,
             bottom: -14,
-            borderWidth: 2,
-            borderRadius: 10,
+            borderWidth: variables.avatarBorderWidthSmall,
+            borderRadius: (variables.avatarSizeXxxSmall + 2 * variables.avatarBorderWidthSmall) / 2,
             borderColor: 'transparent',
         },
 
-        secondAvatarMedium: {
+        secondAvatarXLarge: {
             position: 'absolute',
             right: -36,
             bottom: -36,
-            borderWidth: 3,
-            borderRadius: 52,
+            borderWidth: variables.avatarBorderWidthDefault,
+            borderRadius: variables.avatarSizeXLarge,
             borderColor: 'transparent',
         },
 
-        secondAvatarMediumLarge: {
+        secondAvatarXxLarge: {
             position: 'absolute',
             right: -42,
             bottom: -42,
-            borderWidth: 3,
-            borderRadius: 80,
+            borderWidth: variables.avatarBorderWidthDefault,
+            borderRadius: variables.avatarSizeXxLarge,
             borderColor: 'transparent',
         },
 
@@ -2564,24 +2564,18 @@ const staticStyles = (theme: ThemeColors) =>
             bottom: -6,
         },
 
-        secondAvatarSubscriptXLarge: {
+        secondAvatarSubscriptXxxxLarge: {
             position: 'absolute',
             right: -10,
             bottom: -10,
         },
 
-        secondAvatarSubscriptCompact: {
+        secondAvatarSubscriptSmall: {
             position: 'absolute',
             bottom: -4,
             right: -4,
         },
 
-        secondAvatarSubscriptSmallNormal: {
-            position: 'absolute',
-            bottom: 0,
-            right: 0,
-        },
-
         secondAvatarInline: {
             bottom: -3,
             right: -25,
@@ -2591,11 +2585,6 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
-        avatarXLarge: {
-            width: variables.avatarSizeXLarge,
-            height: variables.avatarSizeXLarge,
-        },
-
         avatarInnerText: {
             color: theme.text,
             fontSize: variables.fontSizeSmall,
@@ -2614,8 +2603,8 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         emptyAvatar: {
-            height: variables.avatarSizeNormal,
-            width: variables.avatarSizeNormal,
+            height: variables.avatarSizeMedium,
+            width: variables.avatarSizeMedium,
         },
 
         emptyAvatarSmall: {
@@ -2623,24 +2612,24 @@ const staticStyles = (theme: ThemeColors) =>
             width: variables.avatarSizeSmall,
         },
 
-        emptyAvatarSmaller: {
-            height: variables.avatarSizeSmaller,
-            width: variables.avatarSizeSmaller,
+        emptyAvatarXSmall: {
+            height: variables.avatarSizeXSmall,
+            width: variables.avatarSizeXSmall,
         },
 
-        emptyAvatarMedium: {
-            height: variables.avatarSizeMedium,
-            width: variables.avatarSizeMedium,
+        emptyAvatarXLarge: {
+            height: variables.avatarSizeXLarge,
+            width: variables.avatarSizeXLarge,
         },
 
-        emptyAvatarLarge: {
-            height: variables.avatarSizeLarge,
-            width: variables.avatarSizeLarge,
+        emptyAvatarXxxLarge: {
+            height: variables.avatarSizeXxxLarge,
+            width: variables.avatarSizeXxxLarge,
         },
 
-        emptyAvatarXLarge: {
-            height: variables.avatarSizeXLarge,
-            width: variables.avatarSizeXLarge,
+        emptyAvatarXxxxLarge: {
+            height: variables.avatarSizeXxxxLarge,
+            width: variables.avatarSizeXxxxLarge,
         },
 
         emptyAvatarMargin: {
@@ -2655,7 +2644,7 @@ const staticStyles = (theme: ThemeColors) =>
             marginRight: variables.avatarChatSpacing - 4,
         },
 
-        emptyAvatarMarginSmaller: {
+        emptyAvatarMarginXSmall: {
             marginRight: variables.avatarChatSpacing - 4,
         },
 
@@ -2958,9 +2947,9 @@ const staticStyles = (theme: ThemeColors) =>
 
         roomHeaderAvatar: {
             backgroundColor: theme.appBG,
-            borderRadius: 100,
+            borderRadius: variables.avatarSizeXxxLarge + 2 * variables.avatarBorderWidthLarge,
             borderColor: theme.componentBG,
-            borderWidth: 4,
+            borderWidth: variables.avatarBorderWidthLarge,
         },
 
         roomHeaderAvatarOverlay: {
@@ -2971,7 +2960,7 @@ const staticStyles = (theme: ThemeColors) =>
             left: 0,
             backgroundColor: theme.overlay,
             opacity: variables.overlayOpacity,
-            borderRadius: 88,
+            borderRadius: variables.avatarSizeXxxLarge + 2 * variables.avatarBorderWidthLarge,
         },
 
         avatarInnerTextChat: {
@@ -2980,7 +2969,7 @@ const staticStyles = (theme: ThemeColors) =>
             ...FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
             textAlign: 'center',
             position: 'absolute',
-            width: 88,
+            width: variables.avatarSizeXxxLarge + 2 * variables.avatarBorderWidthLarge,
             left: -16,
         },
 
@@ -3011,8 +3000,8 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         conciergeAnimatedAvatar: {
-            width: variables.avatarSizeNormal,
-            height: variables.avatarSizeNormal,
+            width: variables.avatarSizeMedium,
+            height: variables.avatarSizeMedium,
         },
 
         accountSettingsSectionContainer: {
@@ -3336,7 +3325,9 @@ const staticStyles = (theme: ThemeColors) =>
             paddingVertical: 12,
         },
 
-        moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)},
+        moneyRequestAmountContainer: {
+            minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8),
+        },
 
         requestPreviewBox: {
             marginTop: 12,
@@ -4515,7 +4506,7 @@ const staticStyles = (theme: ThemeColors) =>
 
         assigneeTextStyle: {
             ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            minHeight: variables.avatarSizeSubscript,
+            minHeight: variables.avatarSizeXxSmall,
         },
 
         taskRightIconContainer: {
@@ -4884,17 +4875,17 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         sidebarStatusAvatarContainer: {
-            height: 40,
-            width: 40,
+            height: variables.avatarSizeMedium,
+            width: variables.avatarSizeMedium,
             backgroundColor: theme.componentBG,
             alignItems: 'center',
             justifyContent: 'center',
-            borderRadius: 20,
+            borderRadius: variables.avatarSizeMedium / 2,
         },
 
         sidebarStatusAvatarWithEmojiContainer: {
-            height: 28,
-            width: 28,
+            height: variables.avatarSizeSmall,
+            width: variables.avatarSizeSmall,
             top: -2,
         },
 
@@ -4902,14 +4893,14 @@ const staticStyles = (theme: ThemeColors) =>
             alignItems: 'center',
             justifyContent: 'center',
             backgroundColor: theme.border,
-            height: 20,
-            width: 20,
-            borderRadius: 10,
+            height: variables.avatarSizeXxSmall,
+            width: variables.avatarSizeXxSmall,
+            borderRadius: variables.avatarSizeXxSmall / 2,
             position: 'absolute',
             right: -6,
             bottom: -6,
             borderColor: theme.appBG,
-            borderWidth: 2,
+            borderWidth: variables.avatarBorderWidthSmall,
             overflow: 'hidden',
         },
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 1ede36768c3f..b62a7e633c85 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -25,9 +25,7 @@ import {PixelRatio, Dimensions as RNDimensions, StyleSheet} from 'react-native';
 import type {ThemeStyles} from '..';
 import type {
     AllStyles,
-    AvatarSize,
     AvatarSizeName,
-    AvatarSizeValue,
     AvatarStyle,
     ButtonSizeValue,
     ButtonStateName,
@@ -72,17 +70,47 @@ type GetReportTableColumnStylesParams = {
     isActionColumnWide?: boolean;
 };
 
-const workspaceColorOptions: SVGAvatarColorStyle[] = LETTER_AVATAR_COLOR_OPTIONS.map(({backgroundColor, fillColor}) => ({backgroundColor, fill: fillColor}));
+const workspaceColorOptions: SVGAvatarColorStyle[] = LETTER_AVATAR_COLOR_OPTIONS.map(({backgroundColor, fillColor}) => ({
+    backgroundColor,
+    fill: fillColor,
+}));
 
-const DEFAULT_WORKSPACE_COLOR = {backgroundColor: colors.blue400, fill: colors.blue700};
+const DEFAULT_WORKSPACE_COLOR = {
+    backgroundColor: colors.blue400,
+    fill: colors.blue700,
+};
 
 const eReceiptColorStyles: Partial<Record<EReceiptColorName, EreceiptColorStyle>> = {
-    [CONST.ERECEIPT_COLORS.YELLOW]: {backgroundColor: colors.yellow800, color: colors.yellow400, titleColor: colors.yellow500},
-    [CONST.ERECEIPT_COLORS.ICE]: {backgroundColor: colors.ice800, color: colors.ice400, titleColor: colors.ice500},
-    [CONST.ERECEIPT_COLORS.BLUE]: {backgroundColor: colors.blue800, color: colors.blue400, titleColor: colors.blue500},
-    [CONST.ERECEIPT_COLORS.GREEN]: {backgroundColor: colors.green800, color: colors.green400, titleColor: colors.green500},
-    [CONST.ERECEIPT_COLORS.TANGERINE]: {backgroundColor: colors.tangerine800, color: colors.tangerine400, titleColor: colors.tangerine500},
-    [CONST.ERECEIPT_COLORS.PINK]: {backgroundColor: colors.pink800, color: colors.pink400, titleColor: colors.pink500},
+    [CONST.ERECEIPT_COLORS.YELLOW]: {
+        backgroundColor: colors.yellow800,
+        color: colors.yellow400,
+        titleColor: colors.yellow500,
+    },
+    [CONST.ERECEIPT_COLORS.ICE]: {
+        backgroundColor: colors.ice800,
+        color: colors.ice400,
+        titleColor: colors.ice500,
+    },
+    [CONST.ERECEIPT_COLORS.BLUE]: {
+        backgroundColor: colors.blue800,
+        color: colors.blue400,
+        titleColor: colors.blue500,
+    },
+    [CONST.ERECEIPT_COLORS.GREEN]: {
+        backgroundColor: colors.green800,
+        color: colors.green400,
+        titleColor: colors.green500,
+    },
+    [CONST.ERECEIPT_COLORS.TANGERINE]: {
+        backgroundColor: colors.tangerine800,
+        color: colors.tangerine400,
+        titleColor: colors.tangerine500,
+    },
+    [CONST.ERECEIPT_COLORS.PINK]: {
+        backgroundColor: colors.pink800,
+        color: colors.pink400,
+        titleColor: colors.pink500,
+    },
 };
 
 const eReceiptColors: EReceiptColorName[] = [
@@ -94,67 +122,63 @@ const eReceiptColors: EReceiptColorName[] = [
     CONST.ERECEIPT_COLORS.PINK,
 ];
 
-const avatarBorderSizes: Partial<Record<AvatarSizeName, number>> = {
-    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.componentBorderRadiusSmall,
-    [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: variables.componentBorderRadiusSmall,
-    [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.componentBorderRadiusMedium,
-    [CONST.AVATAR_SIZE.SMALLER]: variables.componentBorderRadiusMedium,
+const avatarBorderSizes = {
+    [CONST.AVATAR_SIZE.XXXX_SMALL]: variables.componentBorderRadiusSmall,
+    [CONST.AVATAR_SIZE.XXX_SMALL]: variables.componentBorderRadiusSmall,
+    [CONST.AVATAR_SIZE.XX_SMALL]: variables.componentBorderRadiusMedium,
+    [CONST.AVATAR_SIZE.X_SMALL]: variables.componentBorderRadiusMedium,
     [CONST.AVATAR_SIZE.SMALL]: variables.componentBorderRadiusMedium,
-    [CONST.AVATAR_SIZE.HEADER]: variables.componentBorderRadiusNormal,
     [CONST.AVATAR_SIZE.DEFAULT]: variables.componentBorderRadiusNormal,
-    [CONST.AVATAR_SIZE.MEDIUM]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.LARGE]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.X_LARGE]: variables.componentBorderRadiusLarge,
-    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.componentBorderRadiusLarge,
-    [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.componentBorderRadiusRounded,
-    [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.componentBorderRadiusMedium,
-};
-
-const avatarSizes: Record<AvatarSizeName, AvatarSizeValue> = {
-    [CONST.AVATAR_SIZE.DEFAULT]: variables.avatarSizeNormal,
-    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.avatarSizeSmallSubscript,
-    [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: variables.avatarSizeMidSubscript,
-    [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.avatarSizeSubscript,
+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.componentBorderRadiusLarge,
+} as const satisfies Record<AvatarSizeName, number>;
+
+const avatarSizes = {
+    [CONST.AVATAR_SIZE.XXXX_SMALL]: variables.avatarSizeXxxxSmall,
+    [CONST.AVATAR_SIZE.XXX_SMALL]: variables.avatarSizeXxxSmall,
+    [CONST.AVATAR_SIZE.XX_SMALL]: variables.avatarSizeXxSmall,
+    [CONST.AVATAR_SIZE.X_SMALL]: variables.avatarSizeXSmall,
     [CONST.AVATAR_SIZE.SMALL]: variables.avatarSizeSmall,
-    [CONST.AVATAR_SIZE.SMALLER]: variables.avatarSizeSmaller,
+    [CONST.AVATAR_SIZE.DEFAULT]: variables.avatarSizeMedium,
     [CONST.AVATAR_SIZE.LARGE]: variables.avatarSizeLarge,
     [CONST.AVATAR_SIZE.X_LARGE]: variables.avatarSizeXLarge,
-    [CONST.AVATAR_SIZE.MEDIUM]: variables.avatarSizeMedium,
-    [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered,
-    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.avatarSizeMediumLarge,
-    [CONST.AVATAR_SIZE.HEADER]: variables.avatarSizeHeader,
-    [CONST.AVATAR_SIZE.MENTION_ICON]: variables.avatarSizeMentionIcon,
-    [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal,
-    [CONST.AVATAR_SIZE.LARGE_NORMAL]: variables.avatarSizeLargeNormal,
-};
-
-const avatarFontSizes: Partial<Record<AvatarSizeName, number>> = {
-    [CONST.AVATAR_SIZE.DEFAULT]: variables.fontSizeNormal,
-    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.fontSizeExtraSmall,
-    [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: variables.fontSizeExtraSmall,
-    [CONST.AVATAR_SIZE.SUBSCRIPT]: variables.fontSizeExtraSmall,
+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.avatarSizeXxLarge,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.avatarSizeXxxLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.avatarSizeXxxxLarge,
+} as const satisfies Record<AvatarSizeName, number>;
+
+type AvatarSizeValue = ValueOf<typeof avatarSizes>;
+
+const avatarFontSizes = {
+    [CONST.AVATAR_SIZE.XXXX_SMALL]: variables.fontSizeExtraSmall,
+    [CONST.AVATAR_SIZE.XXX_SMALL]: variables.fontSizeExtraSmall,
+    [CONST.AVATAR_SIZE.XX_SMALL]: variables.fontSizeExtraSmall,
+    [CONST.AVATAR_SIZE.X_SMALL]: variables.fontSizeExtraSmall,
     [CONST.AVATAR_SIZE.SMALL]: variables.fontSizeSmall,
-    [CONST.AVATAR_SIZE.SMALLER]: variables.fontSizeExtraSmall,
-    [CONST.AVATAR_SIZE.LARGE]: variables.fontSizeXLarge,
-    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: variables.fontSizeXLarge,
-    [CONST.AVATAR_SIZE.MEDIUM]: variables.fontSizeMedium,
-    [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.fontSizeXLarge,
-};
-
-const avatarBorderWidths: Partial<Record<AvatarSizeName, number>> = {
-    [CONST.AVATAR_SIZE.DEFAULT]: 3,
-    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 2,
-    [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: 2,
-    [CONST.AVATAR_SIZE.SUBSCRIPT]: 2,
-    [CONST.AVATAR_SIZE.SMALL]: 2,
-    [CONST.AVATAR_SIZE.SMALLER]: 2,
-    [CONST.AVATAR_SIZE.HEADER]: 2,
-    [CONST.AVATAR_SIZE.LARGE]: 4,
-    [CONST.AVATAR_SIZE.MEDIUM_LARGE]: 3,
-    [CONST.AVATAR_SIZE.X_LARGE]: 4,
-    [CONST.AVATAR_SIZE.MEDIUM]: 3,
-    [CONST.AVATAR_SIZE.LARGE_BORDERED]: 4,
-};
+    [CONST.AVATAR_SIZE.DEFAULT]: variables.fontSizeNormal,
+    [CONST.AVATAR_SIZE.LARGE]: variables.fontSizeMedium,
+    [CONST.AVATAR_SIZE.X_LARGE]: variables.fontSizeMedium,
+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.fontSizeXLarge,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.fontSizeXLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.fontSizeXLarge,
+} satisfies Record<AvatarSizeName, number>;
+
+const avatarBorderWidths = {
+    [CONST.AVATAR_SIZE.XXXX_SMALL]: variables.avatarBorderWidthSmall,
+    [CONST.AVATAR_SIZE.XXX_SMALL]: variables.avatarBorderWidthSmall,
+    [CONST.AVATAR_SIZE.XX_SMALL]: variables.avatarBorderWidthSmall,
+    [CONST.AVATAR_SIZE.X_SMALL]: variables.avatarBorderWidthSmall,
+    [CONST.AVATAR_SIZE.SMALL]: variables.avatarBorderWidthSmall,
+    [CONST.AVATAR_SIZE.DEFAULT]: variables.avatarBorderWidthDefault,
+    [CONST.AVATAR_SIZE.LARGE]: variables.avatarBorderWidthDefault,
+    [CONST.AVATAR_SIZE.X_LARGE]: variables.avatarBorderWidthDefault,
+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.avatarBorderWidthDefault,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.avatarBorderWidthLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.avatarBorderWidthLarge,
+} satisfies Record<AvatarSizeName, number>;
 
 /**
  * Converts a color in hexadecimal notation into RGB notation.
@@ -233,10 +257,19 @@ function extractValuesFromRGB(color: string): number[] | null {
 /**
  * Return the style size from an avatar size constant
  */
-function getAvatarSize(size: AvatarSizeName): number {
+function getAvatarSize(size: AvatarSizeName): AvatarSizeValue {
     return avatarSizes[size];
 }
 
+/**
+ * Return the avatar footprint including border width on both sides
+ */
+function getAvatarSizeWithBorder(size: AvatarSizeName): number {
+    const avatarSize = getAvatarSize(size);
+    const borderWidth = avatarBorderWidths[size];
+    return avatarSize + 2 * borderWidth;
+}
+
 /**
  * Return the width style from an avatar size constant
  */
@@ -291,7 +324,7 @@ function getAvatarBorderStyle(size: AvatarSizeName, type: string): ViewStyle {
  * Returns the avatar subscript icon container styles
  */
 function getAvatarSubscriptIconContainerStyle(iconWidth = 16, iconHeight = 16): ViewStyle {
-    const borderWidth = 2;
+    const borderWidth = variables.avatarBorderWidthSmall;
 
     // The width of the container is the width of the icon + 2x border width (left and right)
     const containerWidth = iconWidth + 2 * borderWidth;
@@ -400,7 +433,9 @@ function getPlatformSafeAreaPadding(insets?: EdgeInsets, insetsPercentageProp?:
  * Takes safe area insets and returns margin to use for a View
  */
 function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle {
-    return {marginBottom: (insets?.bottom ?? 0) * variables.iosSafeAreaInsetsPercentage};
+    return {
+        marginBottom: (insets?.bottom ?? 0) * variables.iosSafeAreaInsetsPercentage,
+    };
 }
 
 type GetZoomSizingStyleParams = {
@@ -718,7 +753,9 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle {
 
 function getPaymentMethodMenuWidth(isSmallScreenWidth: boolean): ViewStyle {
     const margin = 20;
-    return {width: !isSmallScreenWidth ? variables.sideBarWidth - margin * 2 : undefined};
+    return {
+        width: !isSmallScreenWidth ? variables.sideBarWidth - margin * 2 : undefined,
+    };
 }
 
 /**
@@ -911,11 +948,14 @@ function getHorizontalStackedAvatarStyle(index: number, overlapSize: number, fir
 /**
  * Get computed avatar styles of '+1' overlay based on size
  */
-function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAvatarBorderWidth: number): ViewStyle {
+function getHorizontalStackedOverlayAvatarStyle(size: AvatarSizeName): ViewStyle {
+    const avatarSize = getAvatarSize(size);
+    const borderWidth = avatarBorderWidths[size];
+
     return {
-        borderWidth: oneAvatarBorderWidth,
-        borderRadius: oneAvatarSize.width,
-        marginLeft: -(oneAvatarSize.width + oneAvatarBorderWidth * 2),
+        borderWidth,
+        borderRadius: avatarSize,
+        marginLeft: -getAvatarSizeWithBorder(size),
         zIndex: 6,
         borderStyle: 'solid',
     };
@@ -1369,6 +1409,7 @@ const staticStyleUtils = {
     getAvatarBorderWidth,
     getAvatarExtraFontSizeStyle,
     getAvatarSize,
+    getAvatarSizeWithBorder,
     getAvatarWidthStyle,
     getAvatarSubscriptIconContainerStyle,
     getBackgroundAndBorderStyle,
@@ -1523,7 +1564,11 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getMarkdownMaxHeight: (maxAutoGrowHeight: number | undefined): TextStyle => {
         // maxHeight is not of the input only but the of the whole input container
         // which also includes the top padding and bottom border
-        return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {};
+        return maxAutoGrowHeight
+            ? {
+                  maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2,
+              }
+            : {};
     },
 
     /**
@@ -1548,7 +1593,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         return {
             height: avatarSize,
             width: avatarSize,
-            borderRadius: avatarSize,
+            borderRadius: variables.componentBorderRadiusCircle,
             backgroundColor: theme.border,
         };
     },
@@ -1638,7 +1683,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     /**
      * Select the correct color for text.
      */
-    getColoredBackgroundStyle: (isColored: boolean): StyleProp<TextStyle> => ({backgroundColor: isColored ? theme.mentionBG : undefined}),
+    getColoredBackgroundStyle: (isColored: boolean): StyleProp<TextStyle> => ({
+        backgroundColor: isColored ? theme.mentionBG : undefined,
+    }),
 
     /**
      * Returns link styles based on whether the link is disabled or not
@@ -1856,8 +1903,12 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         borderBottomWidth: isLastItem ? 0 : 1,
         borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
         ...(isLastItem ? styles.tableBottomRadius : {}),
-        ...(padding?.vertical !== undefined && {paddingVertical: padding.vertical}),
-        ...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}),
+        ...(padding?.vertical !== undefined && {
+            paddingVertical: padding.vertical,
+        }),
+        ...(padding?.horizontal !== undefined && {
+            paddingHorizontal: padding.horizontal,
+        }),
     }),
 
     getSelectedBorderBottomStyle: (isSelected?: boolean): ViewStyle => ({
@@ -1884,22 +1935,37 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         let columnWidth;
         switch (columnName) {
             case CONST.SEARCH.TABLE_COLUMNS.COMMENTS:
-                columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w36),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.RECEIPT:
-                columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w28),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.AVATAR:
-                columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w28),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.STATUS:
-                columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w80),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.PAID_STATUS:
                 columnWidth = {...getWidthStyle(variables.w130)};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_STATUS:
-                columnWidth = {...getWidthStyle(variables.w130), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w130),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.SUBMITTED:
                 columnWidth = {...getWidthStyle(isSubmittedColumnWide ? variables.w102 : variables.w62)};
@@ -1918,11 +1984,15 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 columnWidth = {...getWidthStyle(isExportedColumnWide ? variables.w102 : variables.w62)};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.DATE:
-                columnWidth = {...getWidthStyle(isDateColumnWide ? variables.w102 : variables.w62)};
+                columnWidth = {
+                    ...getWidthStyle(isDateColumnWide ? variables.w102 : variables.w62),
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.WITHDRAWN:
             case CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWN:
-                columnWidth = {...getWidthStyle(isWithdrawnColumnWide ? variables.w92 : variables.w72)};
+                columnWidth = {
+                    ...getWidthStyle(isWithdrawnColumnWide ? variables.w92 : variables.w72),
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.CATEGORY:
             case CONST.SEARCH.TABLE_COLUMNS.GROUP_CATEGORY:
@@ -1935,7 +2005,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 columnWidth = {...getWidthStyle(variables.w36), ...styles.flex1};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT:
-                columnWidth = {...getWidthStyle(isTaxAmountColumnWide ? variables.w130 : variables.w96), ...styles.alignItemsEnd};
+                columnWidth = {
+                    ...getWidthStyle(isTaxAmountColumnWide ? variables.w130 : variables.w96),
+                    ...styles.alignItemsEnd,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.EXPENSES:
             case CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES:
@@ -1948,10 +2021,17 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL:
             case CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE:
             case CONST.SEARCH.TABLE_COLUMNS.TOTAL:
-                columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1), ...styles.alignItemsEnd};
+                columnWidth = {
+                    ...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96),
+                    ...(!shouldRemoveTotalColumnFlex && styles.flex1),
+                    ...styles.alignItemsEnd,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.TYPE:
-                columnWidth = {...getWidthStyle(variables.w16), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w16),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
             case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
@@ -1969,10 +2049,16 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
                 columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.ACTION:
-                columnWidth = {...getWidthStyle(isActionColumnWide ? variables.w80 : variables.w68), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(isActionColumnWide ? variables.w80 : variables.w68),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO:
-                columnWidth = {...getWidthStyle(variables.w72), ...styles.alignItemsCenter};
+                columnWidth = {
+                    ...getWidthStyle(variables.w72),
+                    ...styles.alignItemsCenter,
+                };
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.ATTENDEES:
                 columnWidth = {...getWidthStyle(variables.w72)};
@@ -2022,17 +2108,17 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             case CONST.AVATAR_SIZE.SMALL:
                 containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMargin];
                 break;
-            case CONST.AVATAR_SIZE.SMALLER:
-                containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];
+            case CONST.AVATAR_SIZE.X_SMALL:
+                containerStyles = [styles.emptyAvatarXSmall, styles.emptyAvatarMarginXSmall];
                 break;
-            case CONST.AVATAR_SIZE.MEDIUM:
-                containerStyles = [styles.emptyAvatarMedium, styles.emptyAvatarMargin];
+            case CONST.AVATAR_SIZE.X_LARGE:
+                containerStyles = [styles.emptyAvatarXLarge, styles.emptyAvatarMargin];
                 break;
-            case CONST.AVATAR_SIZE.LARGE:
-                containerStyles = [styles.emptyAvatarLarge, styles.mb2, styles.mr2];
+            case CONST.AVATAR_SIZE.XXX_LARGE:
+                containerStyles = [styles.emptyAvatarXxxLarge, styles.mb2, styles.mr2];
                 break;
-            case CONST.AVATAR_SIZE.X_LARGE:
-                containerStyles = [styles.emptyAvatarXLarge, styles.mb3, styles.mr3];
+            case CONST.AVATAR_SIZE.XXXX_LARGE:
+                containerStyles = [styles.emptyAvatarXxxxLarge, styles.mb3, styles.mr3];
                 break;
             default:
                 containerStyles = [styles.emptyAvatar, isInReportAction ? styles.emptyAvatarMarginChat : styles.emptyAvatarMargin];
@@ -2099,9 +2185,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     }),
 
     getTripReservationIconContainer: (isSmallIcon: boolean): StyleProp<ViewStyle> => ({
-        width: isSmallIcon ? variables.avatarSizeSmallNormal : variables.avatarSizeNormal,
-        height: isSmallIcon ? variables.avatarSizeSmallNormal : variables.avatarSizeNormal,
-        borderRadius: isSmallIcon ? variables.avatarSizeSmallNormal : variables.componentBorderRadiusXLarge,
+        width: getAvatarSize(isSmallIcon ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT),
+        height: getAvatarSize(isSmallIcon ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT),
+        borderRadius: isSmallIcon ? getAvatarSize(CONST.AVATAR_SIZE.SMALL) : variables.componentBorderRadiusXLarge,
         backgroundColor: theme.border,
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts
index 3cc690228251..1095c6dc59a4 100644
--- a/src/styles/utils/types.ts
+++ b/src/styles/utils/types.ts
@@ -1,5 +1,4 @@
 import type colors from '@styles/theme/colors';
-import type variables from '@styles/variables';
 
 import type CONST from '@src/CONST';
 import type {Dimensions} from '@src/types/utils/Layout';
@@ -13,26 +12,6 @@ type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType)
 type ColorValue = ValueOf<typeof colors>;
 type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
 type EReceiptColorName = ValueOf<typeof CONST.ERECEIPT_COLORS>;
-type AvatarSizeValue = ValueOf<
-    Pick<
-        typeof variables,
-        | 'avatarSizeNormal'
-        | 'avatarSizeSmallSubscript'
-        | 'avatarSizeMidSubscript'
-        | 'avatarSizeSubscript'
-        | 'avatarSizeSmall'
-        | 'avatarSizeSmaller'
-        | 'avatarSizeXLarge'
-        | 'avatarSizeLarge'
-        | 'avatarSizeMedium'
-        | 'avatarSizeMediumLarge'
-        | 'avatarSizeLargeBordered'
-        | 'avatarSizeHeader'
-        | 'avatarSizeMentionIcon'
-        | 'avatarSizeSmallNormal'
-        | 'avatarSizeLargeNormal'
-    >
->;
 
 type AvatarStyle = Dimensions & {
     borderRadius: number;
@@ -46,10 +25,13 @@ type ButtonVariantStyles = {
     normal: Record<ButtonVariant, StyleProp<ViewStyle>>;
     disabled: Record<ButtonVariant, StyleProp<ViewStyle>>;
 };
-type AvatarSize = {width: number};
 
 type SVGAvatarColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
-type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue; titleColor: ColorValue};
+type EreceiptColorStyle = {
+    backgroundColor: ColorValue;
+    color: ColorValue;
+    titleColor: ColorValue;
+};
 type TextColorStyle = {color: string};
 
 export type {
@@ -58,13 +40,11 @@ export type {
     ColorValue,
     AvatarSizeName,
     EReceiptColorName,
-    AvatarSizeValue,
     AvatarStyle,
     ButtonSizeValue,
     ButtonStateName,
     ButtonVariant,
     ButtonVariantStyles,
-    AvatarSize,
     SVGAvatarColorStyle,
     EreceiptColorStyle,
     TextColorStyle,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 7b99d5d56264..6f671d2dc6c5 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -11,6 +11,23 @@ function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number
     return PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.getFontScale();
 }
 
+const avatarSizes = {
+    avatarSizeXxxxSmall: 12,
+    avatarSizeXxxSmall: 16,
+    avatarSizeXxSmall: 20,
+    avatarSizeXSmall: 24,
+    avatarSizeSmall: 28,
+    avatarSizeMedium: 40,
+    avatarSizeLarge: 48,
+    avatarSizeXLarge: 52,
+    avatarSizeXxLarge: 60,
+    avatarSizeXxxLarge: 80,
+    avatarSizeXxxxLarge: 100,
+    avatarBorderWidthSmall: 2,
+    avatarBorderWidthDefault: 3,
+    avatarBorderWidthLarge: 4,
+} as const;
+
 export default {
     bottomTabHeight: 72,
     contentHeaderHeight: getValueUsingPixelRatio(72, 100),
@@ -36,23 +53,9 @@ export default {
     componentBorderWidth: 8,
     appModalAppIconSize: 48,
     buttonBorderRadius: 100,
-    avatarSizeLargeBordered: 88,
-    avatarSizeXXLarge: 720,
-    avatarSizeXLarge: 100,
-    avatarSizeLarge: 80,
-    avatarSizeMediumLarge: 60,
-    avatarSizeMedium: 52,
-    avatarSizeHeader: 40,
-    avatarSizeNormal: 40,
-    avatarSizeSmallNormal: 32,
-    avatarSizeLargeNormal: 48,
-    avatarSizeSmall: 28,
-    avatarSizeSmaller: 24,
-    avatarSizeSubscript: 20,
-    avatarSizeMidSubscript: 16,
-    avatarSizeMentionIcon: 16,
-    avatarSizeSmallSubscript: 12,
-    defaultAvatarPreviewSize: 360,
+    ...avatarSizes,
+    avatarPreview: 360,
+    avatarPreviewLarge: 720,
     fabBottom: 25,
     breadcrumbsFontSize: getValueUsingPixelRatio(19, 32),
     fontSizeXXSmall: 7,
@@ -94,7 +97,6 @@ export default {
     iconSizeMegaLarge: 105,
     iconSizeMenuItem: 32,
     iconBottomBar: 24,
-    sidebarAvatarSize: 28,
     iconHeader: 48,
     iconSection: 68,
     iouAmountTextSize: 40,
diff --git a/tests/unit/AvatarButtonWithIconTest.tsx b/tests/unit/AvatarButtonWithIconTest.tsx
index 4a69ef6454be..017086af2672 100644
--- a/tests/unit/AvatarButtonWithIconTest.tsx
+++ b/tests/unit/AvatarButtonWithIconTest.tsx
@@ -104,7 +104,7 @@ describe('AvatarButtonWithIcon', () => {
             expect(screen.getByTestId(MOCK_TEST_ID, {includeHiddenElements: true})).toBeTruthy();
         });
 
-        it.each([CONST.AVATAR_SIZE.DEFAULT, CONST.AVATAR_SIZE.LARGE, CONST.AVATAR_SIZE.X_LARGE])('should render with size: %s', (size) => {
+        it.each([CONST.AVATAR_SIZE.DEFAULT, CONST.AVATAR_SIZE.XXX_LARGE, CONST.AVATAR_SIZE.XXXX_LARGE])('should render with size: %s', (size) => {
             renderWithProvider(
                 <AvatarButtonWithIcon
                     {...defaultProps}
@@ -149,7 +149,7 @@ describe('AvatarButtonWithIcon', () => {
                     disabledStyle={{opacity: 0.3}}
                     editIconStyle={{backgroundColor: 'blue'}}
                     DefaultAvatar={DefaultAvatar}
-                    size={CONST.AVATAR_SIZE.X_LARGE}
+                    size={CONST.AVATAR_SIZE.XXXX_LARGE}
                     fallbackIcon={icons.current.Building}
                     type={CONST.ICON_TYPE_WORKSPACE}
                     pendingAction="update"
diff --git a/tests/unit/hooks/useReceiptPreviewsSizes.test.ts b/tests/unit/hooks/useReceiptPreviewsSizes.test.ts
index 589e4d443dbd..453db01d8e20 100644
--- a/tests/unit/hooks/useReceiptPreviewsSizes.test.ts
+++ b/tests/unit/hooks/useReceiptPreviewsSizes.test.ts
@@ -5,7 +5,7 @@ import useReceiptPreviewsSizes from '@pages/iou/request/step/IOURequestStepScan/
 const MOCK_STYLES = {
     receiptPlaceholder: {width: 44, marginRight: 8, height: 52},
     receiptPlaceholderLandscape: {height: 52, marginBottom: 8, width: 44},
-    singleAvatarMedium: {height: 52, width: 52},
+    singleAvatarXLarge: {height: 52, width: 52},
     ph4: {paddingHorizontal: 16},
     ph6: {paddingHorizontal: 24},
     pv2: {paddingVertical: 8},
@@ -47,7 +47,7 @@ describe('useReceiptPreviewsSizes', () => {
         it('returns the correct initialReceiptsAmount', () => {
             const {result} = renderHook(() => useReceiptPreviewsSizes(false));
 
-            // initialReceiptsAmount = (windowWidth - ph4.paddingHorizontal * 2 - singleAvatarMedium.width) / previewItemSize
+            // initialReceiptsAmount = (windowWidth - ph4.paddingHorizontal * 2 - singleAvatarXLarge.width) / previewItemSize
             // = (400 - 16 * 2 - 52) / 52 = 316 / 52
             expect(result.current.initialReceiptsAmount).toBe(316 / 52);
         });
@@ -90,7 +90,7 @@ describe('useReceiptPreviewsSizes', () => {
             const {result} = renderHook(() => useReceiptPreviewsSizes(true));
 
             // initialReceiptsAmount = (windowHeight - submitButtonHeight - tabSelectorButtonHeight - contentHeaderHeight) / previewItemSize
-            // submitButtonHeight = singleAvatarMedium.height = 52
+            // submitButtonHeight = singleAvatarXLarge.height = 52
             // tabSelectorButtonHeight = tabSelectorButtonHeight (40) + pb4.paddingBottom (16) = 56
             // contentHeaderHeight = 100 (variables.contentHeaderHeight capped at maxValue in test environment)
             // = (800 - 52 - 56 - 100) / 60 = 592 / 60