diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -4,6 +4,7 @@
 import { Text, View } from 'react-native';
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import type { UserInfo } from 'lib/types/user-types.js';
 import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
@@ -13,12 +14,14 @@
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
 import MessagePreview from './message-preview.react.js';
 import SwipeableThread from './swipeable-thread.react.js';
+import Avatar from '../components/avatar.react.js';
 import Button from '../components/button.react.js';
 import ColorSplotch from '../components/color-splotch.react.js';
 import { SingleLine } from '../components/single-line.react.js';
 import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js';
 import UnreadDot from '../components/unread-dot.react.js';
 import { useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
   +data: ChatThreadItem,
@@ -116,6 +119,16 @@
   ]);
 
   const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo);
+  const avatarInfo = useGetAvatarForThread(data.threadInfo);
+  const shouldRenderAvatars = useShouldRenderAvatars();
+
+  const avatar = React.useMemo(() => {
+    if (!shouldRenderAvatars) {
+      return <ColorSplotch color={data.threadInfo.color} size="profile" />;
+    }
+
+    return <Avatar size="large" avatarInfo={avatarInfo} />;
+  }, [avatarInfo, data.threadInfo.color, shouldRenderAvatars]);
 
   return (
     <>
@@ -137,9 +150,7 @@
             <View style={styles.colorSplotch}>
               <UnreadDot unread={data.threadInfo.currentUser.unread} />
             </View>
-            <View style={styles.colorSplotch}>
-              <ColorSplotch color={data.threadInfo.color} size="profile" />
-            </View>
+            <View style={styles.colorSplotch}>{avatar}</View>
             <View style={styles.threadDetails}>
               <ThreadAncestorsLabel threadInfo={data.threadInfo} />
               <View style={styles.row}>
diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js
--- a/native/components/thread-list-thread.react.js
+++ b/native/components/thread-list-thread.react.js
@@ -2,14 +2,18 @@
 
 import * as React from 'react';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
+import type { ClientAvatar } from 'lib/types/avatar-types.js';
 import type { ThreadInfo, ResolvedThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
+import Avatar from './avatar.react.js';
 import Button from './button.react.js';
 import ColorSplotch from './color-splotch.react.js';
 import { SingleLine } from './single-line.react.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { ViewStyle, TextStyle } from '../types/styles.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type SharedProps = {
   +onSelect: (threadID: string) => void,
@@ -23,12 +27,22 @@
 type Props = {
   ...SharedProps,
   +threadInfo: ResolvedThreadInfo,
+  +avatarInfo: ClientAvatar,
+  +shouldRenderAvatars: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
 };
 class ThreadListThread extends React.PureComponent<Props> {
   render() {
     const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
+
+    let avatar;
+    if (this.props.shouldRenderAvatars) {
+      avatar = <Avatar size="small" avatarInfo={this.props.avatarInfo} />;
+    } else {
+      avatar = <ColorSplotch color={this.props.threadInfo.color} />;
+    }
+
     return (
       <Button
         onPress={this.onSelect}
@@ -37,7 +51,7 @@
         iosActiveOpacity={0.85}
         style={[this.props.styles.button, this.props.style]}
       >
-        <ColorSplotch color={this.props.threadInfo.color} />
+        {avatar}
         <SingleLine style={[this.props.styles.text, this.props.textStyle]}>
           {this.props.threadInfo.uiName}
         </SingleLine>
@@ -71,11 +85,15 @@
     const styles = useStyles(unboundStyles);
     const colors = useColors();
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
+    const avatarInfo = useGetAvatarForThread(threadInfo);
+    const shouldRenderAvatars = useShouldRenderAvatars();
 
     return (
       <ThreadListThread
         {...rest}
         threadInfo={resolvedThreadInfo}
+        avatarInfo={avatarInfo}
+        shouldRenderAvatars={shouldRenderAvatars}
         styles={styles}
         colors={colors}
       />