diff --git a/web/avatars/avatar.css b/web/avatars/avatar.css
--- a/web/avatars/avatar.css
+++ b/web/avatars/avatar.css
@@ -34,11 +34,23 @@
 }
 
 .emojiLarge {
+  font-size: 70px;
+  height: 100px;
+  line-height: 100px;
+}
+
+.emojiXLarge {
   font-size: 80px;
   height: 112px;
   line-height: 112px;
 }
 
+.emojiXXLarge {
+  font-size: 336px;
+  height: 480px;
+  line-height: 480px;
+}
+
 .xSmall {
   border-radius: 8px;
   height: 16px;
@@ -61,12 +73,26 @@
 }
 
 .large {
+  border-radius: 50px;
+  height: 100px;
+  width: 100px;
+  min-width: 100px;
+}
+
+.xLarge {
   border-radius: 56px;
   height: 112px;
   width: 112px;
   min-width: 112px;
 }
 
+.xxLarge {
+  border-radius: 240px;
+  height: 480px;
+  width: 480px;
+  min-width: 224px;
+}
+
 .imgContainer {
   object-fit: cover;
 }
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
@@ -26,6 +26,8 @@
     [css.small]: size === 'S',
     [css.medium]: size === 'M',
     [css.large]: size === 'L',
+    [css.xLarge]: size === 'XL',
+    [css.xxLarge]: size === 'XXL',
   });
 
   const emojiSizeClassName = classnames({
@@ -34,6 +36,8 @@
     [css.emojiSmall]: size === 'S',
     [css.emojiMedium]: size === 'M',
     [css.emojiLarge]: size === 'L',
+    [css.emojiXLarge]: size === 'XL',
+    [css.emojiXXLarge]: size === 'XXL',
   });
 
   const emojiContainerColorStyle = React.useMemo(() => {
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="L"
+        size="XL"
         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="L"
+        size="XL"
         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="L"
+            size="XL"
             showSpinner={avatarSaveInProgress}
           />
         </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="L" />
+        <UserAvatar userID="256" size="XL" />
       </div>
     );
   }