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
@@ -6,6 +6,7 @@
 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 { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
 import {
   useResolvedThreadInfo,
@@ -17,6 +18,7 @@
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
 import css from './chat-thread-list.css';
 import MessagePreview from './message-preview.react.js';
+import Avatar from '../components/avatar.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import {
   useOnClickThread,
@@ -82,12 +84,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;
@@ -128,13 +124,15 @@
   });
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+  const avatarInfo = useGetAvatarForThread(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} />
+            <Avatar size="large" avatarInfo={avatarInfo} />
           </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,8 +89,7 @@
   padding-top: 8px;
 }
 
-div.spacer,
-div.colorSplotch {
+div.spacer {
   width: 42px;
   border-radius: 1.68px;
 }
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
@@ -2,24 +2,20 @@
 
 import * as React from 'react';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 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 Avatar from '../components/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)) {
@@ -27,13 +23,12 @@
   }
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+  const avatarInfo = useGetAvatarForThread(threadInfo);
+
   return (
     <div className={css.topBarContainer}>
       <div className={css.topBarThreadInfo}>
-        <div
-          className={css.threadColorSquare}
-          style={threadBackgroundColorStyle}
-        />
+        <Avatar size="small" avatarInfo={avatarInfo} />
         <div className={css.threadTitle}>{uiName}</div>
       </div>
       {threadMenu}
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,11 +7,7 @@
   overflow: hidden;
 }
 
-div.threadColorSquare {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  flex: 0 0 auto;
+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
@@ -3,10 +3,12 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 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 Avatar from '../components/avatar.react.js';
 
 type NavStateInfoBarProps = {
   +threadInfo: ThreadInfo,
@@ -14,19 +16,13 @@
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
 
-  const threadBackgroundColorStyle = React.useMemo(
-    () => ({
-      background: `#${threadInfo.color}`,
-    }),
-    [threadInfo.color],
-  );
+  const avatarInfo = useGetAvatarForThread(threadInfo);
 
   return (
     <>
-      <div
-        className={css.threadColorSquare}
-        style={threadBackgroundColorStyle}
-      />
+      <div className={css.avatarContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+      </div>
       <ThreadAncestors threadInfo={threadInfo} />
     </>
   );