diff --git a/web/avatars/avatar.css b/web/avatars/avatar.css
--- a/web/avatars/avatar.css
+++ b/web/avatars/avatar.css
@@ -15,7 +15,7 @@
   justify-content: center;
 }
 
-.emojiMicro {
+.emojiXSmall {
   font-size: 9px;
   height: 16px;
   line-height: 16px;
@@ -27,19 +27,19 @@
   line-height: 24px;
 }
 
-.emojiLarge {
+.emojiMedium {
   font-size: 28px;
   height: 42px;
   line-height: 42px;
 }
 
-.emojiProfile {
+.emojiLarge {
   font-size: 80px;
   height: 112px;
   line-height: 112px;
 }
 
-.micro {
+.xSmall {
   border-radius: 8px;
   height: 16px;
   width: 16px;
@@ -53,14 +53,14 @@
   min-width: 24px;
 }
 
-.large {
+.medium {
   border-radius: 21px;
   height: 42px;
   width: 42px;
   min-width: 42px;
 }
 
-.profile {
+.large {
   border-radius: 56px;
   height: 112px;
   width: 112px;
diff --git a/web/avatars/avatar.react.js b/web/avatars/avatar.react.js
--- a/web/avatars/avatar.react.js
+++ b/web/avatars/avatar.react.js
@@ -3,14 +3,17 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
-import type { ResolvedClientAvatar } from 'lib/types/avatar-types.js';
+import type {
+  ResolvedClientAvatar,
+  AvatarSize,
+} from 'lib/types/avatar-types.js';
 
 import css from './avatar.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
-  +size: 'micro' | 'small' | 'large' | 'profile',
+  +size: AvatarSize,
   +showSpinner?: boolean,
 };
 
@@ -19,18 +22,18 @@
 
   const containerSizeClassName = classnames({
     [css.imgContainer]: avatarInfo.type === 'image',
-    [css.micro]: size === 'micro',
-    [css.small]: size === 'small',
-    [css.large]: size === 'large',
-    [css.profile]: size === 'profile',
+    [css.xSmall]: size === 'XS',
+    [css.small]: size === 'S',
+    [css.medium]: size === 'M',
+    [css.large]: size === 'L',
   });
 
   const emojiSizeClassName = classnames({
     [css.emojiContainer]: true,
-    [css.emojiMicro]: size === 'micro',
-    [css.emojiSmall]: size === 'small',
-    [css.emojiLarge]: size === 'large',
-    [css.emojiProfile]: size === 'profile',
+    [css.emojiXSmall]: size === 'XS',
+    [css.emojiSmall]: size === 'S',
+    [css.emojiMedium]: size === 'M',
+    [css.emojiLarge]: size === 'L',
   });
 
   const emojiContainerColorStyle = React.useMemo(() => {
@@ -66,11 +69,11 @@
   ]);
 
   let loadingIndicatorSize;
-  if (size === 'micro') {
+  if (size === 'XS') {
     loadingIndicatorSize = 'small';
-  } else if (size === 'small') {
+  } else if (size === 'S') {
     loadingIndicatorSize = 'small';
-  } else if (size === 'large') {
+  } else if (size === 'M') {
     loadingIndicatorSize = 'medium';
   } else {
     loadingIndicatorSize = 'large';
diff --git a/web/avatars/edit-thread-avatar.react.js b/web/avatars/edit-thread-avatar.react.js
--- a/web/avatars/edit-thread-avatar.react.js
+++ b/web/avatars/edit-thread-avatar.react.js
@@ -37,7 +37,7 @@
     <div className={css.editThreadAvatarContainer}>
       <ThreadAvatar
         threadInfo={threadInfo}
-        size="profile"
+        size="L"
         showSpinner={threadAvatarSaveInProgress}
       />
       {editThreadAvatarMenu}
diff --git a/web/avatars/edit-user-avatar.react.js b/web/avatars/edit-user-avatar.react.js
--- a/web/avatars/edit-user-avatar.react.js
+++ b/web/avatars/edit-user-avatar.react.js
@@ -25,7 +25,7 @@
     <div className={css.editUserAvatarContainer}>
       <UserAvatar
         userID={userID}
-        size="profile"
+        size="L"
         showSpinner={userAvatarSaveInProgress}
       />
       {!userAvatarSaveInProgress ? <EditUserAvatarMenu /> : null}
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -106,7 +106,7 @@
         <div className={css.avatarContainer}>
           <Avatar
             avatarInfo={pendingEmojiAvatar}
-            size="profile"
+            size="L"
             showSpinner={avatarSaveInProgress}
           />
         </div>
diff --git a/web/avatars/thread-avatar.react.js b/web/avatars/thread-avatar.react.js
--- a/web/avatars/thread-avatar.react.js
+++ b/web/avatars/thread-avatar.react.js
@@ -7,6 +7,7 @@
   useENSResolvedAvatar,
 } from 'lib/shared/avatar-utils.js';
 import { getSingleOtherUser } from 'lib/shared/thread-utils.js';
+import type { AvatarSize } from 'lib/types/avatar-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type RawThreadInfo, type ThreadInfo } from 'lib/types/thread-types.js';
 
@@ -15,7 +16,7 @@
 
 type Props = {
   +threadInfo: RawThreadInfo | ThreadInfo,
-  +size: 'micro' | 'small' | 'large' | 'profile',
+  +size: AvatarSize,
   +showSpinner?: boolean,
 };
 
diff --git a/web/avatars/user-avatar.react.js b/web/avatars/user-avatar.react.js
--- a/web/avatars/user-avatar.react.js
+++ b/web/avatars/user-avatar.react.js
@@ -6,13 +6,14 @@
   getAvatarForUser,
   useENSResolvedAvatar,
 } from 'lib/shared/avatar-utils.js';
+import type { AvatarSize } from 'lib/types/avatar-types.js';
 
 import Avatar from './avatar.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type Props = {
   +userID: ?string,
-  +size: 'micro' | 'small' | 'large' | 'profile',
+  +size: AvatarSize,
   +showSpinner?: boolean,
 };
 
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -173,7 +173,7 @@
               className={css.searchResultsButton}
             >
               <div className={css.userContainer}>
-                <UserAvatar size="small" userID={userSearchResult.id} />
+                <UserAvatar size="S" userID={userSearchResult.id} />
                 <div className={css.userName}>{userSearchResult.username}</div>
               </div>
               <div className={css.userInfo}>{userSearchResult.notice}</div>
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -130,7 +130,7 @@
         <div className={css.colorContainer}>
           <div className={css.avatarContainer}>
             <div className={css.dotContainer}>{unreadDot}</div>
-            <ThreadAvatar size="large" threadInfo={threadInfo} />
+            <ThreadAvatar size="M" threadInfo={threadInfo} />
           </div>
         </div>
         <div className={css.threadButton}>
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -156,7 +156,7 @@
     if (!isViewer && item.endsCluster) {
       avatar = (
         <div className={css.avatarContainer}>
-          <UserAvatar size="small" userID={creator.id} />
+          <UserAvatar size="S" userID={creator.id} />
         </div>
       );
     } else if (!isViewer) {
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -82,7 +82,7 @@
     <>
       <div className={css.topBarContainer}>
         <div className={css.topBarThreadInfo}>
-          <ThreadAvatar size="small" threadInfo={threadInfo} />
+          <ThreadAvatar size="S" threadInfo={threadInfo} />
           <div className={css.threadTitle}>{uiName}</div>
         </div>
         <div className={css.buttons}>
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -24,7 +24,7 @@
       messageReactionsList.map(messageReactionUser => (
         <div key={messageReactionUser.id} className={css.userRowContainer}>
           <div className={css.userInfoContainer}>
-            <UserAvatar size="small" userID={messageReactionUser.id} />
+            <UserAvatar size="S" userID={messageReactionUser.id} />
             <div className={css.username}>{messageReactionUser.username}</div>
           </div>
           <div>{messageReactionUser.reaction}</div>
diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -44,7 +44,7 @@
       disabled={!canBeAdded}
     >
       <div className={css.userInfoContainer}>
-        <UserAvatar size="small" userID={userInfo.id} />
+        <UserAvatar size="S" userID={userInfo.id} />
         <div className={css.username}>{userInfo.username}</div>
       </div>
       <div className={css.label}>{action}</div>
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -114,7 +114,7 @@
       </div>
       <div className={css.roleModalMember}>
         <div className={css.roleModalMemberAvatar}>
-          <UserAvatar userID={memberInfo.id} size="large" />
+          <UserAvatar userID={memberInfo.id} size="M" />
         </div>
         <div className={css.roleModalMemberName}>{memberInfo.username}</div>
       </div>
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -124,7 +124,7 @@
   return (
     <div className={memberContainerClasses}>
       <div className={css.memberInfo}>
-        <UserAvatar size="small" userID={memberInfo.id} />
+        <UserAvatar size="S" userID={memberInfo.id} />
         {userName}
         {label}
       </div>
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -91,7 +91,7 @@
       />
       <div className={sidebarInfoClassName}>
         <div className={css.avatarContainer}>
-          <ThreadAvatar size="micro" threadInfo={threadInfo} />
+          <ThreadAvatar size="XS" threadInfo={threadInfo} />
           <div className={css.longTextEllipsis}>{uiName}</div>
         </div>
         <div className={css.lastMessage}>{lastMessage}</div>
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -78,7 +78,7 @@
 
   return (
     <Button className={css.subchannelContainer} onClick={onClickThread}>
-      <ThreadAvatar size="small" threadInfo={threadInfo} />
+      <ThreadAvatar size="S" threadInfo={threadInfo} />
       <div className={subchannelTitleClassName}>
         <div className={css.longTextEllipsis}>{uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -38,7 +38,7 @@
         className={css.threadPickerOptionButton}
         onClick={onClickThreadOption}
       >
-        <ThreadAvatar size="large" threadInfo={threadInfo} />
+        <ThreadAvatar size="M" threadInfo={threadInfo} />
         <div className={css.threadNameText}>{uiName}</div>
       </Button>
     </div>
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -18,7 +18,7 @@
   return (
     <>
       <div className={css.avatarContainer}>
-        <ThreadAvatar size="small" threadInfo={threadInfo} />
+        <ThreadAvatar size="S" threadInfo={threadInfo} />
       </div>
       <ThreadAncestors threadInfo={threadInfo} />
     </>
diff --git a/web/settings/relationship/block-list-row.react.js b/web/settings/relationship/block-list-row.react.js
--- a/web/settings/relationship/block-list-row.react.js
+++ b/web/settings/relationship/block-list-row.react.js
@@ -19,7 +19,7 @@
   return (
     <div className={css.container}>
       <div className={css.userInfoContainer}>
-        <UserAvatar size="small" userID={userInfo.id} />
+        <UserAvatar size="S" userID={userInfo.id} />
         <div className={css.usernameContainer}>{userInfo.username}</div>
       </div>
       <div className={css.buttons}>
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -82,7 +82,7 @@
   return (
     <div className={css.container}>
       <div className={css.userInfoContainer}>
-        <UserAvatar size="small" userID={userInfo.id} />
+        <UserAvatar size="S" userID={userInfo.id} />
         <div className={css.usernameContainer}>{userInfo.username}</div>
       </div>
       <div className={css.buttons}>{buttons}</div>
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -127,7 +127,7 @@
   if (avatarNodeEnabled) {
     avatarNode = (
       <div className={css.avatarContainer}>
-        <UserAvatar userID="256" size="profile" />
+        <UserAvatar userID="256" size="L" />
       </div>
     );
   }
diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -85,7 +85,7 @@
       <a onClick={handler.onClick} className={css.threadEntry} style={style}>
         {itemExpandButton}
         <div className={css.titleWrapper}>
-          <ThreadAvatar size="micro" threadInfo={threadInfo} />
+          <ThreadAvatar size="XS" threadInfo={threadInfo} />
           <div className={titleLabel}>{uiName}</div>
         </div>
         <CommunityActionsMenu communityID={threadInfo.id} />
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -94,7 +94,7 @@
       <div className={css.threadEntry} style={style}>
         {itemExpandButton}
         <a onClick={handler.onClick} className={css.titleWrapper}>
-          <ThreadAvatar size="micro" threadInfo={threadInfo} />
+          <ThreadAvatar size="XS" threadInfo={threadInfo} />
           <div className={titleLabel}>{uiName}</div>
         </a>
       </div>
diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js
--- a/web/utils/typeahead-utils.js
+++ b/web/utils/typeahead-utils.js
@@ -186,16 +186,13 @@
     if (actionButtonContent.type === 'user') {
       const suggestedUser = actionButtonContent.userInfo;
       avatarComponent = (
-        <UserAvatar size="small" userID={actionButtonContent.userInfo.id} />
+        <UserAvatar size="S" userID={actionButtonContent.userInfo.id} />
       );
       typeaheadButtonText = `@${stringForUserExplicit(suggestedUser)}`;
     } else if (actionButtonContent.type === 'chat') {
       const suggestedChat = actionButtonContent.threadInfo;
       avatarComponent = (
-        <ThreadAvatar
-          size="small"
-          threadInfo={actionButtonContent.threadInfo}
-        />
+        <ThreadAvatar size="S" threadInfo={actionButtonContent.threadInfo} />
       );
       typeaheadButtonText = `@${suggestedChat.uiName}`;
     }