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
@@ -11,6 +11,7 @@
 
 import css from './sidebars-modal.css';
 import Button from '../../../components/button.react.js';
+import ThreadAvatar from '../../../components/thread-avatar.react.js';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
 import { useOnClickThread } from '../../../selectors/thread-selectors.js';
 
@@ -41,6 +42,11 @@
     [css.unread]: unread,
   });
 
+  const previewTextClassName = classNames({
+    [css.longTextEllipsis]: true,
+    [css.avatarOffset]: true,
+  });
+
   const lastActivity = React.useMemo(
     () => shortAbsoluteDate(lastUpdatedTime),
     [lastUpdatedTime],
@@ -62,13 +68,14 @@
       : message.text;
     return (
       <>
-        <div className={css.longTextEllipsis}>{previewText}</div>
+        <div className={previewTextClassName}>{previewText}</div>
         <div className={css.lastActivity}>{lastActivity}</div>
       </>
     );
-  }, [lastActivity, messagePreviewResult]);
+  }, [lastActivity, messagePreviewResult, previewTextClassName]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+
   return (
     <Button className={css.sidebarContainer} onClick={onClickThread}>
       <img
@@ -81,7 +88,10 @@
         alt="sidebar arrow"
       />
       <div className={sidebarInfoClassName}>
-        <div className={css.longTextEllipsis}>{uiName}</div>
+        <div className={css.avatarContainer}>
+          <ThreadAvatar size="micro" threadInfo={threadInfo} />
+          <div className={css.longTextEllipsis}>{uiName}</div>
+        </div>
         <div className={css.lastMessage}>{lastMessage}</div>
       </div>
     </Button>
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
--- a/web/modals/threads/sidebars/sidebars-modal.css
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -41,6 +41,16 @@
   padding: 8px 0;
 }
 
+div.avatarContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+div.avatarOffset {
+  margin-left: 24px;
+}
+
 div.longTextEllipsis {
   text-overflow: ellipsis;
   overflow: hidden;
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';
@@ -12,6 +11,7 @@
 
 import css from './subchannels-modal.css';
 import Button from '../../../components/button.react.js';
+import ThreadAvatar from '../../../components/thread-avatar.react.js';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react.js';
 import { useOnClickThread } from '../../../selectors/thread-selectors.js';
 
@@ -74,9 +74,10 @@
   }, [lastActivity, messagePreviewResult]);
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
+
   return (
     <Button className={css.subchannelContainer} onClick={onClickThread}>
-      <SWMansionIcon icon="message-square" size={22} />
+      <ThreadAvatar size="small" threadInfo={threadInfo} />
       <div className={subchannelTitleClassName}>
         <div className={css.longTextEllipsis}>{uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>