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,13 +84,8 @@
 span.authorName {
   color: #777777;
   font-size: 14px;
-}
-span.authorNamePositionAvatar {
   padding: 4px 56px;
 }
-span.authorNamePositionNoAvatar {
-  padding: 4px 24px;
-}
 
 div.darkTextMessage {
   color: white;
@@ -128,13 +123,8 @@
   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,7 +18,6 @@
 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>,
@@ -86,13 +85,6 @@
     [dispatch, userInfoInputArray],
   );
 
-  const usernameStyle = React.useMemo(
-    () => ({
-      marginLeft: shouldRenderAvatars ? 8 : 0,
-    }),
-    [],
-  );
-
   const userSearchResultList = React.useMemo(() => {
     if (
       !userListItemsWithENSNames.length ||
@@ -111,9 +103,7 @@
           >
             <div className={css.userContainer}>
               <UserAvatar size="small" userID={userSearchResult.id} />
-              <div className={css.userName} style={usernameStyle}>
-                {userSearchResult.username}
-              </div>
+              <div className={css.userName}>{userSearchResult.username}</div>
             </div>
             <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
           </Button>
@@ -127,7 +117,6 @@
     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,7 +23,6 @@
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/thread-selectors.js';
-import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +item: ChatThreadItem,
@@ -84,12 +83,6 @@
     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;
@@ -131,20 +124,13 @@
 
   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.avatarContainer}>
             <div className={css.dotContainer}>{unreadDot}</div>
-            {avatar}
+            <ThreadAvatar size="large" threadInfo={threadInfo} />
           </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,12 +89,11 @@
   padding-top: 8px;
 }
 
-div.spacer,
-div.colorSplotch {
+div.spacer {
   width: 42px;
   border-radius: 1.68px;
 }
-div.colorSplotchContainer {
+div.avatarContainer {
   height: 42px;
   display: flex;
 }
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
@@ -20,7 +20,6 @@
 import CommIcon from '../CommIcon.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 { useMessageTooltip } from '../utils/tooltip-action-utils.js';
 import { tooltipPositions } from '../utils/tooltip-utils.js';
 
@@ -86,8 +85,6 @@
     const messageBoxContainerClassName = classNames({
       [css.messageBoxContainer]: true,
       [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth,
-      [css.messageBoxContainerPositionAvatar]: shouldRenderAvatars,
-      [css.messageBoxContainerPositionNoAvatar]: !shouldRenderAvatars,
     });
     const messageBoxClassName = classNames({
       [css.messageBox]: true,
@@ -102,13 +99,8 @@
 
     let authorName = null;
     const { stringForUser } = this.props;
-    const authorNameClassName = classNames({
-      [css.authorName]: true,
-      [css.authorNamePositionAvatar]: shouldRenderAvatars,
-      [css.authorNamePositionNoAvatar]: !shouldRenderAvatars,
-    });
     if (stringForUser) {
-      authorName = <span className={authorNameClassName}>{stringForUser}</span>;
+      authorName = <span className={css.authorName}>{stringForUser}</span>;
     }
 
     let deliveryIcon = null;
@@ -156,13 +148,13 @@
     }
 
     let avatar;
-    if (!isViewer && item.endsCluster && shouldRenderAvatars) {
+    if (!isViewer && item.endsCluster) {
       avatar = (
         <div className={css.avatarContainer}>
           <UserAvatar size="small" userID={creator.id} />
         </div>
       );
-    } else if (!isViewer && shouldRenderAvatars) {
+    } else if (!isViewer) {
       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,11 +21,6 @@
   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,7 +13,6 @@
 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,
@@ -32,8 +31,6 @@
       [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,13 +16,6 @@
   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
@@ -13,7 +13,6 @@
 import ThreadAvatar from '../components/thread-avatar.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import MessageResultsModal from '../modals/chat/message-results-modal.react.js';
-import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
@@ -21,12 +20,6 @@
 function ThreadTopBar(props: ThreadTopBarProps): React.Node {
   const { threadInfo } = props;
   const { pushModal } = useModalContext();
-  const threadBackgroundColorStyle = React.useMemo(
-    () => ({
-      background: `#${threadInfo.color}`,
-    }),
-    [threadInfo.color],
-  );
 
   let threadMenu = null;
   if (!threadIsPending(threadInfo.id)) {
@@ -72,23 +65,11 @@
 
   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}>
-          {avatar}
+          <ThreadAvatar size="small" threadInfo={threadInfo} />
           <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,7 +69,3 @@
 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,7 +6,6 @@
 import type { ResolvedClientAvatar } from 'lib/types/avatar-types';
 
 import css from './avatar.css';
-import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +avatarInfo: ResolvedClientAvatar,
@@ -64,7 +63,7 @@
     emojiSizeClassName,
   ]);
 
-  return shouldRenderAvatars ? avatar : null;
+  return avatar;
 }
 
 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,7 +7,6 @@
 
 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 = {
@@ -20,27 +19,18 @@
 
   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} style={usernameStyle}>
-              {messageReactionUser.username}
-            </div>
+            <div className={css.username}>{messageReactionUser.username}</div>
           </div>
           <div>{messageReactionUser.reaction}</div>
         </div>
       )),
-    [messageReactionsList, usernameStyle],
+    [messageReactionsList],
   );
 
   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,7 +7,6 @@
 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,
@@ -38,13 +37,6 @@
     }
   }, [canBeAdded, userAdded, userInfo.alertTitle]);
 
-  const usernameStyle = React.useMemo(
-    () => ({
-      marginLeft: shouldRenderAvatars ? 8 : 0,
-    }),
-    [],
-  );
-
   return (
     <Button
       className={css.addMemberItem}
@@ -53,9 +45,7 @@
     >
       <div className={css.userInfoContainer}>
         <UserAvatar size="small" userID={userInfo.id} />
-        <div className={css.username} style={usernameStyle}>
-          {userInfo.username}
-        </div>
+        <div className={css.username}>{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,7 +14,6 @@
 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,
@@ -43,10 +42,10 @@
     [css.unread]: unread,
   });
 
-  const previewTextClassName = classNames({
-    [css.longTextEllipsis]: true,
-    [css.avatarOffset]: shouldRenderAvatars,
-  });
+  const previewTextClassName = classNames([
+    css.longTextEllipsis,
+    css.avatarOffset,
+  ]);
 
   const lastActivity = React.useMemo(
     () => shortAbsoluteDate(lastUpdatedTime),
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,7 +4,6 @@
 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';
@@ -15,7 +14,6 @@
 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,
@@ -77,16 +75,9 @@
 
   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}>
-      {avatar}
+      <ThreadAvatar size="small" 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.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,12 +26,6 @@
   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,7 +14,6 @@
 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 = {
@@ -31,29 +30,15 @@
     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}
       >
-        {avatar}
+        <ThreadAvatar size="large" threadInfo={threadInfo} />
         <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,14 +7,6 @@
   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,7 +8,6 @@
 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,
@@ -16,32 +15,11 @@
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
 
-  const threadBackgroundColorStyle = React.useMemo(
-    () => ({
-      background: `#${threadInfo.color}`,
-    }),
-    [threadInfo.color],
-  );
-
-  const avatar = React.useMemo(() => {
-    if (!shouldRenderAvatars) {
-      return (
-        <div
-          className={css.threadColorSquare}
-          style={threadBackgroundColorStyle}
-        />
-      );
-    }
-    return (
+  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,7 +20,6 @@
 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);
@@ -58,13 +57,6 @@
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
-  const contentStyle = React.useMemo(
-    () => ({
-      marginTop: shouldRenderAvatars ? 32 : 0,
-    }),
-    [],
-  );
-
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
@@ -88,7 +80,7 @@
     <div className={css.container}>
       <h4 className={css.header}>My Account</h4>
       <UserAvatar size="profile" userID={currentUserInfo.id} />
-      <div className={css.content} style={contentStyle}>
+      <div className={css.content}>
         <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,27 +10,17 @@
 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} style={usernameContainerStyle}>
-          {userInfo.username}
-        </div>
+        <div className={css.usernameContainer}>{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,7 +12,6 @@
 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)',
@@ -80,20 +79,11 @@
     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} style={usernameContainerStyle}>
-          {userInfo.username}
-        </div>
+        <div className={css.usernameContainer}>{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
@@ -15,7 +15,6 @@
 } from './community-drawer-utils.react.js';
 import ThreadAvatar from '../components/thread-avatar.react.js';
 import type { NavigationTab } from '../types/nav-types.js';
-import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
 export type DrawerItemProps = {
   +itemData: CommunityDrawerItemData<string>,
@@ -89,13 +88,6 @@
 
   const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
 
-  const titleStyle = React.useMemo(
-    () => ({
-      marginLeft: shouldRenderAvatars ? 8 : 0,
-    }),
-    [],
-  );
-
   return (
     <>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
@@ -103,9 +95,7 @@
         {itemExpandButton}
         <a onClick={handler.onClick} className={css.titleWrapper}>
           <ThreadAvatar size="micro" threadInfo={threadInfo} />
-          <div className={titleLabel} style={titleStyle}>
-            {uiName}
-          </div>
+          <div className={titleLabel}>{uiName}</div>
         </a>
       </div>
       <div className={css.threadListContainer}>{children}</div>
diff --git a/web/utils/avatar-utils.js b/web/utils/avatar-utils.js
deleted file mode 100644
--- a/web/utils/avatar-utils.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// @flow
-
-const shouldRenderAvatars: boolean = true;
-
-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,7 +9,6 @@
 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';
@@ -138,11 +137,6 @@
       setChosenPositionInOverlay(idx);
     };
 
-    const usernameClassName = classNames({
-      [css.username]: shouldRenderAvatars,
-      [css.usernameNoAvatar]: !shouldRenderAvatars,
-    });
-
     return (
       <Button
         key={key}
@@ -151,9 +145,7 @@
         className={buttonClasses}
       >
         <UserAvatar size="small" userID={actionButtonContent.userID} />
-        <span className={usernameClassName}>
-          @{actionButtonContent.username}
-        </span>
+        <span className={css.username}>@{actionButtonContent.username}</span>
       </Button>
     );
   });