diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
index c15f980a6..30f23ee34 100644
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -1,165 +1,161 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
 import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
 import {
   useResolvedThreadInfo,
   useResolvedThreadInfos,
 } from 'lib/utils/entity-helpers.js';
 
 import ChatThreadListItemMenu from './chat-thread-list-item-menu.react.js';
 import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js';
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
 import css from './chat-thread-list.css';
 import MessagePreview from './message-preview.react.js';
+import ThreadAvatar from '../components/thread-avatar.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/thread-selectors.js';
 
 type Props = {
   +item: ChatThreadItem,
 };
 function ChatThreadListItem(props: Props): React.Node {
   const { item } = props;
   const {
     threadInfo,
     lastUpdatedTimeIncludingSidebars,
     mostRecentNonLocalMessage,
     mostRecentMessageInfo,
   } = item;
   const { id: threadID, currentUser } = threadInfo;
 
   const unresolvedAncestorThreads = useAncestorThreads(threadInfo);
   const ancestorThreads = useResolvedThreadInfos(unresolvedAncestorThreads);
 
   const lastActivity = shortAbsoluteDate(lastUpdatedTimeIncludingSidebars);
 
   const active = useThreadIsActive(threadID);
   const isCreateMode = useSelector(
     state => state.navInfo.chatMode === 'create',
   );
 
   const onClick = useOnClickThread(item.threadInfo);
 
   const selectItemIfNotActiveCreation = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       if (!isCreateMode || !active) {
         onClick(event);
       }
     },
     [isCreateMode, active, onClick],
   );
 
   const containerClassName = classNames({
     [css.thread]: true,
     [css.activeThread]: active,
   });
 
   const { unread } = currentUser;
   const titleClassName = classNames({
     [css.title]: true,
     [css.unread]: unread,
   });
   const lastActivityClassName = classNames({
     [css.lastActivity]: true,
     [css.unread]: unread,
     [css.dark]: !unread,
   });
 
   const breadCrumbsClassName = classNames(css.breadCrumbs, {
     [css.unread]: unread,
   });
 
   let unreadDot;
   if (unread) {
     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;
       return (
         <ChatThreadListSidebar
           sidebarInfo={sidebarInfo}
           isSubsequentItem={index > 0}
           key={sidebarInfo.threadInfo.id}
         />
       );
     } else if (sidebarItem.type === 'seeMore') {
       return (
         <ChatThreadListSeeMoreSidebars
           threadInfo={item.threadInfo}
           unread={sidebarItem.unread}
           key="seeMore"
         />
       );
     } else {
       return <div className={css.spacer} key="spacer" />;
     }
   });
 
   const ancestorPath = ancestorThreads.map((thread, idx) => {
     const isNotLast = idx !== ancestorThreads.length - 1;
     const chevron = isNotLast && (
       <span className={css.breadCrumb}>
         <SWMansionIcon icon="chevron-right" size={10} />
       </span>
     );
 
     return (
       <React.Fragment key={thread.id}>
         <span className={css.breadCrumb}>{thread.uiName}</span>
         {chevron}
       </React.Fragment>
     );
   });
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+
   return (
     <>
       <a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
         <div className={css.colorContainer}>
           <div className={css.colorSplotchContainer}>
             <div className={css.dotContainer}>{unreadDot}</div>
-            <div className={css.colorSplotch} style={colorSplotchStyle} />
+            <ThreadAvatar size="large" threadInfo={threadInfo} />
           </div>
         </div>
         <div className={css.threadButton}>
           <p className={breadCrumbsClassName}>{ancestorPath}</p>
           <div className={css.threadRow}>
             <div className={titleClassName}>{uiName}</div>
           </div>
           <div className={css.threadRow}>
             <MessagePreview
               messageInfo={mostRecentMessageInfo}
               threadInfo={threadInfo}
             />
           </div>
         </div>
         <div>
           <ChatThreadListItemMenu
             threadInfo={threadInfo}
             mostRecentNonLocalMessage={mostRecentNonLocalMessage}
           />
           <div className={lastActivityClassName}>{lastActivity}</div>
         </div>
       </a>
       {sidebars}
     </>
   );
 }
 
 export default ChatThreadListItem;
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index 5e64a447e..1a2dfe8c2 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,289 +1,288 @@
 .thread {
   display: flex;
   flex-direction: row;
 }
 .threadListSidebar {
   display: flex;
   flex-direction: row;
   height: 32px;
   padding-right: 8px;
   position: relative;
   cursor: pointer;
 }
 .threadListSidebar > svg {
   position: absolute;
   top: -7px;
   left: 30px;
 }
 .thread:first-child {
   padding-top: 6px;
 }
 
 .activeThread,
 .threadListSidebar:hover {
   background: var(--thread-active-bg);
 }
 
 .activeThread :is(.title, .lastMessage, .lastMessage *) {
   color: var(--chat-thread-list-color-active);
 }
 
 .activeThread.thread:hover {
   background: var(--thread-active-bg);
 }
 
 .thread:hover {
   background: var(--thread-hover-bg);
 }
 
 div.title {
   flex: 1;
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   line-height: var(--line-height-text);
 }
 .threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
   padding-left: 12px;
 }
 .threadButton + div {
   display: flex;
   flex-direction: column;
 }
 .threadButtonSidebar {
   cursor: pointer;
   overflow: hidden;
   display: flex;
   align-items: center;
   padding-left: 12px;
 }
 p.breadCrumbs {
   display: flex;
   padding: 8px 0 2px 0;
   font-size: var(--xs-font-12);
   font-weight: var(--normal);
   color: var(--breadcrumb-color);
 }
 p.breadCrumbs.unread {
   color: var(--breadcrumb-color-unread);
 }
 span.breadCrumb {
   display: flex;
   align-items: center;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 span.breadCrumb svg {
   margin-left: 4px;
   margin-right: 4px;
 }
 
 div.colorContainer {
   display: flex;
   padding-top: 8px;
 }
 
-div.spacer,
-div.colorSplotch {
+div.spacer {
   width: 42px;
   border-radius: 1.68px;
 }
 div.colorSplotchContainer {
   height: 42px;
   display: flex;
 }
 div.lastActivity {
   font-size: var(--xxs-font-10);
   color: var(--fg);
   line-height: 1.5;
   padding-right: 16px;
   font-weight: var(--semi-bold);
   white-space: nowrap;
   flex-grow: 1;
   padding-bottom: 12px;
   align-items: flex-end;
   display: flex;
 }
 
 div.lastMessage {
   font-size: var(--s-font-14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--line-height-text);
   padding-bottom: 8px;
 }
 div.unread {
   color: var(--fg);
   font-weight: var(--semi-bold);
 }
 div.dark {
   color: var(--thread-color-read);
   padding-right: 16px;
 }
 .messagePreviewPrimary {
   color: var(--thread-color-read);
 }
 .messagePreviewSecondary {
   color: var(--thread-preview-secondary);
 }
 div.dotContainer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
 }
 div.unreadDot {
   height: 4px;
   width: 4px;
   background: var(--fg);
   border-radius: 15px;
   align-self: center;
 }
 div.italic {
   font-style: italic;
 }
 div.sidebarTitle {
   flex: 1;
   font-size: var(--s-font-14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   align-self: flex-start;
 }
 .threadListSidebar > div.dotContainer {
   width: 16px;
 }
 div.sidebarTitle.unread {
   color: var(--fg);
 }
 div.seeMoreButton {
   display: flex;
   align-items: center;
   padding-left: 22px;
 }
 div.seeMoreText {
   padding-left: 14px;
 }
 div.sidebarLastActivity {
   white-space: nowrap;
   font-size: var(--xxs-font-10);
   line-height: var(--line-height-text);
   font-weight: var(--semi-bold);
 }
 svg.sidebarIcon {
   color: var(--thread-color-read);
   padding: 0 6px;
   font-size: 20px;
 }
 div.sidebar .menu > button svg {
   font-size: 16px;
   color: var(--thread-color-read);
 }
 div.sidebar .menu {
   opacity: 0;
 }
 div.sidebar:hover .menu {
   display: flex;
   align-self: flex-end;
   opacity: 1;
 }
 .menu {
   position: relative;
   display: flex;
   justify-content: flex-end;
 }
 .menu > button {
   background-color: transparent;
   color: var(--thread-color-read);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
 .menu > button:focus {
   outline: none;
 }
 
 .menuContent {
   display: none;
   position: absolute;
   top: calc(100% + 1px);
   right: 0;
   z-index: 1;
   width: max-content;
   overflow: hidden;
   background-color: #eeeeee;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
 .menuContentVisible {
   display: block;
 }
 
 button.menuContent {
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 16px;
 }
 button.menuContent:hover {
   background-color: #dddddd;
 }
 
 ul.list {
   margin: 5px 3px 10px 0;
   overflow: auto;
 }
 
 div.spacer {
   height: 6px;
 }
 
 div.emptyItemContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 div.emptyItemText {
   padding: 16px;
   font-size: 16px;
   text-align: center;
   white-space: pre-wrap;
   color: var(--fg);
 }
 
 div.threadListContainer {
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
 
 div.createNewThread {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   padding: 8px;
 }
 img.longArrow {
   height: 40px;
   width: 25px;
   position: absolute;
   left: 28.5px;
   top: -18px;
 }
 
 img.arrow {
   position: absolute;
   left: 28px;
   top: -10px;
 }
diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
index faaafca44..475796b5c 100644
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -1,39 +1,32 @@
 div.topBarContainer {
   display: flex;
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   color: var(--thread-top-bar-color);
   border-bottom: 1px solid var(--border);
 }
 
 div.topBarThreadInfo {
   height: 24px;
   display: flex;
   align-items: center;
   column-gap: 8px;
   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);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 button.topBarMenu {
   background-color: transparent;
   border: none;
   cursor: pointer;
   color: var(--thread-top-bar-menu-color);
 }
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
index 326afa82b..5811a5ce1 100644
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -1,44 +1,37 @@
 // @flow
 
 import * as React from 'react';
 
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
+import ThreadAvatar from '../components/thread-avatar.react.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)) {
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+
   return (
     <div className={css.topBarContainer}>
       <div className={css.topBarThreadInfo}>
-        <div
-          className={css.threadColorSquare}
-          style={threadBackgroundColorStyle}
-        />
+        <ThreadAvatar size="small" threadInfo={threadInfo} />
         <div className={css.threadTitle}>{uiName}</div>
       </div>
       {threadMenu}
     </div>
   );
 }
 
 export default ThreadTopBar;
diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
index 8c7dec42a..04bbbc207 100644
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -1,28 +1,24 @@
 div.topBarContainer {
   display: flex;
   background-color: var(--bg);
   align-items: center;
   color: var(--thread-top-bar-color);
   height: 56px;
   overflow: hidden;
 }
 
-div.threadColorSquare {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  flex: 0 0 auto;
+div.avatarContainer {
   margin: 0 12px 0 16px;
 }
 
 div.hide {
   height: 0px;
   opacity: 0;
   transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
 }
 
 div.show {
   height: 56px;
   opacity: 1;
   transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
 }
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
index 7589c3ec1..62f636984 100644
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -1,73 +1,66 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import ThreadAncestors from './chat-thread-ancestors.react.js';
 import css from './nav-state-info-bar.css';
+import ThreadAvatar from '../components/thread-avatar.react.js';
 
 type NavStateInfoBarProps = {
   +threadInfo: ThreadInfo,
 };
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
 
-  const threadBackgroundColorStyle = React.useMemo(
-    () => ({
-      background: `#${threadInfo.color}`,
-    }),
-    [threadInfo.color],
-  );
-
   return (
     <>
-      <div
-        className={css.threadColorSquare}
-        style={threadBackgroundColorStyle}
-      />
+      <div className={css.avatarContainer}>
+        <ThreadAvatar size="small" threadInfo={threadInfo} />
+      </div>
       <ThreadAncestors threadInfo={threadInfo} />
     </>
   );
 }
 
 type PossiblyEmptyNavStateInfoBarProps = {
   +threadInfoInput: ?ThreadInfo,
 };
 function PossiblyEmptyNavStateInfoBar(
   props: PossiblyEmptyNavStateInfoBarProps,
 ): React.Node {
   const { threadInfoInput } = props;
 
   const [threadInfo, setThreadInfo] = React.useState(threadInfoInput);
 
   React.useEffect(() => {
     if (threadInfoInput !== threadInfo) {
       if (threadInfoInput) {
         setThreadInfo(threadInfoInput);
       } else {
         const timeout = setTimeout(() => {
           setThreadInfo(null);
         }, 200);
         return () => clearTimeout(timeout);
       }
     }
   }, [threadInfoInput, threadInfo]);
 
   const content = React.useMemo(() => {
     if (threadInfo) {
       return <NavStateInfoBar threadInfo={threadInfo} />;
     } else {
       return null;
     }
   }, [threadInfo]);
 
   const classes = classnames(css.topBarContainer, {
     [css.hide]: !threadInfoInput,
     [css.show]: threadInfoInput,
   });
   return <div className={classes}>{content}</div>;
 }
 
 export default PossiblyEmptyNavStateInfoBar;