diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -84,8 +84,14 @@
 span.authorName {
   color: #777777;
   font-size: 14px;
+}
+span.authorNamePositionAvatar {
   padding: 4px 56px;
 }
+span.authorNamePositionNoAvatar {
+  padding: 4px 24px;
+}
+
 div.darkTextMessage {
   color: white;
 }
@@ -122,8 +128,14 @@
   position: relative;
   display: flex;
   max-width: calc(min(68%, 1000px));
+}
+div.messageBoxContainerPositionAvatar {
   margin: 0 4px;
 }
+div.messageBoxContainerPositionNoAvatar {
+  margin: 0 4px 0 12px;
+}
+
 div.fixedWidthMessageBoxContainer {
   width: 68%;
 }
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
@@ -18,6 +18,7 @@
 import type { InputState } from '../input/input-state.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
@@ -85,6 +86,13 @@
     [dispatch, userInfoInputArray],
   );
 
+  const usernameStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   const userSearchResultList = React.useMemo(() => {
     if (
       !userListItemsWithENSNames.length ||
@@ -103,7 +111,9 @@
           >
             <div className={css.userContainer}>
               <UserAvatar size="small" userID={userSearchResult.id} />
-              <div className={css.userName}>{userSearchResult.username}</div>
+              <div className={css.userName} style={usernameStyle}>
+                {userSearchResult.username}
+              </div>
             </div>
             <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
           </Button>
@@ -117,6 +127,7 @@
     userInfoInputArray.length,
     userListItemsWithENSNames,
     usernameInputText,
+    usernameStyle,
   ]);
 
   const hideSearch = React.useCallback(
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
@@ -23,6 +23,7 @@
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/thread-selectors.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +item: ChatThreadItem,
@@ -83,6 +84,12 @@
     unreadDot = <div className={css.unreadDot} />;
   }
 
+  const { color } = item.threadInfo;
+  const colorSplotchStyle = React.useMemo(
+    () => ({ backgroundColor: `#${color}` }),
+    [color],
+  );
+
   const sidebars = item.sidebars.map((sidebarItem, index) => {
     if (sidebarItem.type === 'sidebar') {
       const { type, ...sidebarInfo } = sidebarItem;
@@ -124,13 +131,20 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return <div className={css.colorSplotch} style={colorSplotchStyle} />;
+    }
+    return <ThreadAvatar size="large" threadInfo={threadInfo} />;
+  }, [colorSplotchStyle, threadInfo]);
+
   return (
     <>
       <a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
         <div className={css.colorContainer}>
           <div className={css.colorSplotchContainer}>
             <div className={css.dotContainer}>{unreadDot}</div>
-            <ThreadAvatar size="large" threadInfo={threadInfo} />
+            {avatar}
           </div>
         </div>
         <div className={css.threadButton}>
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -89,7 +89,8 @@
   padding-top: 8px;
 }
 
-div.spacer {
+div.spacer,
+div.colorSplotch {
   width: 42px;
   border-radius: 1.68px;
 }
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
@@ -18,6 +18,7 @@
 import InlineEngagement from './inline-engagement.react.js';
 import UserAvatar from '../components/user-avatar.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils.js';
 
 const availableTooltipPositionsForViewerMessage = [
@@ -80,6 +81,8 @@
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
+      [css.messageBoxContainerPositionAvatar]: shouldRenderAvatars,
+      [css.messageBoxContainerPositionNoAvatar]: !shouldRenderAvatars,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
@@ -94,8 +97,13 @@
 
     let authorName = null;
     const { stringForUser } = this.props;
+    const authorNameClassName = classNames({
+      [css.authorName]: true,
+      [css.authorNamePositionAvatar]: shouldRenderAvatars,
+      [css.authorNamePositionNoAvatar]: !shouldRenderAvatars,
+    });
     if (stringForUser) {
-      authorName = <span className={css.authorName}>{stringForUser}</span>;
+      authorName = <span className={authorNameClassName}>{stringForUser}</span>;
     }
 
     let deliveryIcon = null;
@@ -143,13 +151,13 @@
     }
 
     let avatar;
-    if (!isViewer && item.endsCluster) {
+    if (!isViewer && item.endsCluster && shouldRenderAvatars) {
       avatar = (
         <div className={css.avatarContainer}>
           <UserAvatar size="small" userID={creator.id} />
         </div>
       );
-    } else if (!isViewer) {
+    } else if (!isViewer && shouldRenderAvatars) {
       avatar = <div className={css.avatarOffset} />;
     }
 
diff --git a/web/chat/inline-engagement.css b/web/chat/inline-engagement.css
--- a/web/chat/inline-engagement.css
+++ b/web/chat/inline-engagement.css
@@ -21,6 +21,11 @@
   margin-left: 31px;
 }
 
+div.leftContainerNoAvatar {
+  left: 12px;
+  margin-right: 12px;
+}
+
 a.threadsContainer,
 a.threadsSplitContainer,
 a.reactionsContainer,
diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js
--- a/web/chat/inline-engagement.react.js
+++ b/web/chat/inline-engagement.react.js
@@ -13,6 +13,7 @@
 import CommIcon from '../CommIcon.react.js';
 import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';
 import { useOnClickThread } from '../selectors/thread-selectors.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +threadInfo: ?ThreadInfo,
@@ -31,6 +32,8 @@
       [css.leftContainer]: positioning === 'left',
       [css.centerContainer]: positioning === 'center',
       [css.rightContainer]: positioning === 'right',
+      [css.leftContainerNoAvatar]:
+        positioning === 'left' && !shouldRenderAvatars,
     },
   ]);
 
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -16,6 +16,13 @@
   overflow: hidden;
 }
 
+div.threadColorSquare {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  flex: 0 0 auto;
+}
+
 .threadTitle {
   font-size: var(--m-font-16);
   font-weight: var(--bold);
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
@@ -9,12 +9,19 @@
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 import ThreadAvatar from '../components/thread-avatar.react.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
 };
 function ThreadTopBar(props: ThreadTopBarProps): React.Node {
   const { threadInfo } = props;
+  const threadBackgroundColorStyle = React.useMemo(
+    () => ({
+      background: `#${threadInfo.color}`,
+    }),
+    [threadInfo.color],
+  );
 
   let threadMenu = null;
   if (!threadIsPending(threadInfo.id)) {
@@ -23,10 +30,22 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return (
+        <div
+          className={css.threadColorSquare}
+          style={threadBackgroundColorStyle}
+        />
+      );
+    }
+    return <ThreadAvatar size="small" threadInfo={threadInfo} />;
+  }, [threadBackgroundColorStyle, threadInfo]);
+
   return (
     <div className={css.topBarContainer}>
       <div className={css.topBarThreadInfo}>
-        <ThreadAvatar size="small" threadInfo={threadInfo} />
+        {avatar}
         <div className={css.threadTitle}>{uiName}</div>
       </div>
       {threadMenu}
diff --git a/web/chat/typeahead-tooltip.css b/web/chat/typeahead-tooltip.css
--- a/web/chat/typeahead-tooltip.css
+++ b/web/chat/typeahead-tooltip.css
@@ -69,3 +69,7 @@
 span.username {
   margin-left: 8px;
 }
+
+span.usernameNoAvatar {
+  margin-left: 0;
+}
diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js
--- a/web/components/avatar.react.js
+++ b/web/components/avatar.react.js
@@ -6,6 +6,7 @@
 import type { ResolvedClientAvatar } from 'lib/types/avatar-types';
 
 import css from './avatar.css';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
@@ -61,7 +62,7 @@
     emojiSizeClassName,
   ]);
 
-  return avatar;
+  return shouldRenderAvatars ? avatar : null;
 }
 
 export default Avatar;
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
@@ -7,6 +7,7 @@
 
 import css from './message-reactions-modal.css';
 import UserAvatar from '../../components/user-avatar.react.js';
+import { shouldRenderAvatars } from '../../utils/avatar-utils.js';
 import Modal from '../modal.react.js';
 
 type Props = {
@@ -19,18 +20,27 @@
 
   const messageReactionsList = useMessageReactionsList(reactions);
 
+  const usernameStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   const reactionsList = React.useMemo(
     () =>
       messageReactionsList.map(messageReactionUser => (
         <div key={messageReactionUser.id} className={css.userRowContainer}>
           <div className={css.userInfoContainer}>
             <UserAvatar size="small" userID={messageReactionUser.id} />
-            <div className={css.username}>{messageReactionUser.username}</div>
+            <div className={css.username} style={usernameStyle}>
+              {messageReactionUser.username}
+            </div>
           </div>
           <div>{messageReactionUser.reaction}</div>
         </div>
       )),
-    [messageReactionsList],
+    [messageReactionsList, usernameStyle],
   );
 
   return (
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
@@ -7,6 +7,7 @@
 import css from './add-members.css';
 import Button from '../../components/button.react.js';
 import UserAvatar from '../../components/user-avatar.react.js';
+import { shouldRenderAvatars } from '../../utils/avatar-utils.js';
 
 type AddMembersItemProps = {
   +userInfo: UserListItem,
@@ -37,6 +38,13 @@
     }
   }, [canBeAdded, userAdded, userInfo.alertTitle]);
 
+  const usernameStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   return (
     <Button
       className={css.addMemberItem}
@@ -45,7 +53,9 @@
     >
       <div className={css.userInfoContainer}>
         <UserAvatar size="small" userID={userInfo.id} />
-        <div className={css.username}>{userInfo.username}</div>
+        <div className={css.username} style={usernameStyle}>
+          {userInfo.username}
+        </div>
       </div>
       <div className={css.label}>{action}</div>
     </Button>
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
@@ -14,6 +14,7 @@
 import ThreadAvatar from '../../../components/thread-avatar.react.js';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
 import { useOnClickThread } from '../../../selectors/thread-selectors.js';
+import { shouldRenderAvatars } from '../../../utils/avatar-utils.js';
 
 type Props = {
   +sidebar: ChatThreadItem,
@@ -44,7 +45,7 @@
 
   const previewTextClassName = classNames({
     [css.longTextEllipsis]: true,
-    [css.avatarOffset]: true,
+    [css.avatarOffset]: shouldRenderAvatars,
   });
 
   const lastActivity = React.useMemo(
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
@@ -4,6 +4,7 @@
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { type ChatThreadItem } from 'lib/selectors/chat-selectors.js';
 import { useMessagePreview } from 'lib/shared/message-utils.js';
 import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
@@ -14,6 +15,7 @@
 import ThreadAvatar from '../../../components/thread-avatar.react.js';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
 import { useOnClickThread } from '../../../selectors/thread-selectors.js';
+import { shouldRenderAvatars } from '../../../utils/avatar-utils.js';
 
 type Props = {
   +chatThreadItem: ChatThreadItem,
@@ -75,9 +77,16 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return <SWMansionIcon icon="message-square" size={22} />;
+    }
+    return <ThreadAvatar size="small" threadInfo={threadInfo} />;
+  }, [threadInfo]);
+
   return (
     <Button className={css.subchannelContainer} onClick={onClickThread}>
-      <ThreadAvatar size="small" threadInfo={threadInfo} />
+      {avatar}
       <div className={subchannelTitleClassName}>
         <div className={css.longTextEllipsis}>{uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>
diff --git a/web/modals/threads/thread-picker-modal.css b/web/modals/threads/thread-picker-modal.css
--- a/web/modals/threads/thread-picker-modal.css
+++ b/web/modals/threads/thread-picker-modal.css
@@ -26,6 +26,12 @@
   border-radius: 8px;
 }
 
+div.threadSplotch {
+  min-width: 40px;
+  height: 40px;
+  border-radius: 10px;
+}
+
 div.threadNameText {
   color: var(--shades-white-100);
   margin-left: 16px;
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
@@ -14,6 +14,7 @@
 import Search from '../../components/search.react.js';
 import ThreadAvatar from '../../components/thread-avatar.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
+import { shouldRenderAvatars } from '../../utils/avatar-utils.js';
 import Modal, { type ModalOverridableProps } from '../modal.react.js';
 
 type OptionProps = {
@@ -30,15 +31,29 @@
     onCloseModal();
   }, [threadInfo.id, createNewEntry, onCloseModal]);
 
+  const splotchColorStyle = React.useMemo(
+    () => ({
+      backgroundColor: `#${threadInfo.color}`,
+    }),
+    [threadInfo.color],
+  );
+
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return <div style={splotchColorStyle} className={css.threadSplotch} />;
+    }
+    return <ThreadAvatar size="large" threadInfo={threadInfo} />;
+  }, [splotchColorStyle, threadInfo]);
+
   return (
     <div key={threadInfo.id} className={css.threadPickerOptionContainer}>
       <Button
         className={css.threadPickerOptionButton}
         onClick={onClickThreadOption}
       >
-        <ThreadAvatar size="large" threadInfo={threadInfo} />
+        {avatar}
         <div className={css.threadNameText}>{uiName}</div>
       </Button>
     </div>
diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -7,6 +7,14 @@
   overflow: hidden;
 }
 
+div.threadColorSquare {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  flex: 0 0 auto;
+  margin: 0 12px 0 16px;
+}
+
 div.avatarContainer {
   margin: 0 12px 0 16px;
 }
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
@@ -8,6 +8,7 @@
 import ThreadAncestors from './chat-thread-ancestors.react.js';
 import css from './nav-state-info-bar.css';
 import ThreadAvatar from '../components/thread-avatar.react.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type NavStateInfoBarProps = {
   +threadInfo: ThreadInfo,
@@ -15,11 +16,32 @@
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
 
-  return (
-    <>
+  const threadBackgroundColorStyle = React.useMemo(
+    () => ({
+      background: `#${threadInfo.color}`,
+    }),
+    [threadInfo.color],
+  );
+
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return (
+        <div
+          className={css.threadColorSquare}
+          style={threadBackgroundColorStyle}
+        />
+      );
+    }
+    return (
       <div className={css.avatarContainer}>
         <ThreadAvatar size="small" threadInfo={threadInfo} />
       </div>
+    );
+  }, [threadBackgroundColorStyle, threadInfo]);
+
+  return (
+    <>
+      {avatar}
       <ThreadAncestors threadInfo={threadInfo} />
     </>
   );
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -20,6 +20,7 @@
 import Button from '../components/button.react.js';
 import UserAvatar from '../components/user-avatar.react.js';
 import { useSelector } from '../redux/redux-utils.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useServerCall(logOut);
@@ -57,6 +58,13 @@
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
+  const contentStyle = React.useMemo(
+    () => ({
+      marginTop: shouldRenderAvatars ? 32 : 0,
+    }),
+    [],
+  );
+
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
@@ -80,7 +88,7 @@
     <div className={css.container}>
       <h4 className={css.header}>My Account</h4>
       <UserAvatar size="profile" userID={currentUserInfo.id} />
-      <div className={css.content}>
+      <div className={css.content} style={contentStyle}>
         <ul>
           <li>
             <p className={css.logoutContainer}>
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
@@ -10,17 +10,27 @@
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
 import UserAvatar from '../../components/user-avatar.react.js';
+import { shouldRenderAvatars } from '../../utils/avatar-utils.js';
 
 function BlockListRow(props: UserRowProps): React.Node {
   const { userInfo, onMenuVisibilityChange } = props;
   const { unblockUser } = useRelationshipCallbacks(userInfo.id);
   const editIcon = <SWMansionIcon icon="edit-1" size={22} />;
 
+  const usernameContainerStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   return (
     <div className={css.container}>
       <div className={css.userInfoContainer}>
         <UserAvatar size="small" userID={userInfo.id} />
-        <div className={css.usernameContainer}>{userInfo.username}</div>
+        <div className={css.usernameContainer} style={usernameContainerStyle}>
+          {userInfo.username}
+        </div>
       </div>
       <div className={css.buttons}>
         <div className={css.edit_menu}>
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
@@ -12,6 +12,7 @@
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
 import UserAvatar from '../../components/user-avatar.react.js';
+import { shouldRenderAvatars } from '../../utils/avatar-utils.js';
 
 const dangerButtonColor = {
   color: 'var(--btn-bg-danger)',
@@ -79,11 +80,20 @@
     onMenuVisibilityChange,
   ]);
 
+  const usernameContainerStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   return (
     <div className={css.container}>
       <div className={css.userInfoContainer}>
         <UserAvatar size="small" userID={userInfo.id} />
-        <div className={css.usernameContainer}>{userInfo.username}</div>
+        <div className={css.usernameContainer} style={usernameContainerStyle}>
+          {userInfo.username}
+        </div>
       </div>
       <div className={css.buttons}>{buttons}</div>
     </div>
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
@@ -11,6 +11,7 @@
 import { ExpandButton } from './expand-buttons.react.js';
 import SubchannelsButton from './subchannels-button.react.js';
 import ThreadAvatar from '../components/thread-avatar.react.js';
+import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 export type DrawerItemProps = {
   +itemData: CommunityDrawerItemData<string>,
@@ -118,6 +119,13 @@
     [css.active]: handler.isActive,
   });
 
+  const titleStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [],
+  );
+
   return (
     <>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
@@ -125,7 +133,9 @@
         {itemExpandButton}
         <a onClick={handler.onClick} className={css.titleWrapper}>
           <ThreadAvatar size="micro" threadInfo={threadInfo} />
-          <div className={titleLabel}>{uiName}</div>
+          <div className={titleLabel} style={titleStyle}>
+            {uiName}
+          </div>
         </a>
       </div>
       <div className={css.threadListContainer}>{children}</div>
diff --git a/web/utils/avatar-utils.js b/web/utils/avatar-utils.js
new file mode 100644
--- /dev/null
+++ b/web/utils/avatar-utils.js
@@ -0,0 +1,5 @@
+// @flow
+
+const shouldRenderAvatars: boolean = false;
+
+export { shouldRenderAvatars };
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
@@ -9,6 +9,7 @@
 import type { SetState } from 'lib/types/hook-types.js';
 import type { RelativeMemberInfo } from 'lib/types/thread-types.js';
 
+import { shouldRenderAvatars } from './avatar-utils.js';
 import { typeaheadStyle } from '../chat/chat-constants.js';
 import css from '../chat/typeahead-tooltip.css';
 import Button from '../components/button.react.js';
@@ -137,6 +138,11 @@
       setChosenPositionInOverlay(idx);
     };
 
+    const usernameClassName = classNames({
+      [css.username]: shouldRenderAvatars,
+      [css.usernameNoAvatar]: !shouldRenderAvatars,
+    });
+
     return (
       <Button
         key={key}
@@ -145,7 +151,9 @@
         className={buttonClasses}
       >
         <UserAvatar size="small" userID={actionButtonContent.userID} />
-        <span className={css.username}>@{actionButtonContent.username}</span>
+        <span className={usernameClassName}>
+          @{actionButtonContent.username}
+        </span>
       </Button>
     );
   });