diff --git a/native/chat/message-list-header-title.react.js b/native/chat/message-list-header-title.react.js
--- a/native/chat/message-list-header-title.react.js
+++ b/native/chat/message-list-header-title.react.js
@@ -8,14 +8,18 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
+import type { ClientAvatar } from 'lib/types/avatar-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { firstLine } from 'lib/utils/string-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
+import Avatar from '../components/avatar.react.js';
 import Button from '../components/button.react.js';
 import { ThreadSettingsRouteName } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
@@ -28,6 +32,8 @@
   ...BaseProps,
   +styles: typeof unboundStyles,
   +title: string,
+  +avatarInfo: ClientAvatar,
+  +shouldRenderAvatars: boolean,
 };
 class MessageListHeaderTitle extends React.PureComponent<Props> {
   render() {
@@ -38,19 +44,34 @@
       areSettingsEnabled,
       styles,
       title,
+      avatarInfo,
+      shouldRenderAvatars,
       ...rest
     } = this.props;
 
-    let icon, fakeIcon;
+    let icon;
     if (Platform.OS === 'ios' && areSettingsEnabled) {
       icon = (
         <Icon name="chevron-forward" size={20} style={styles.forwardIcon} />
       );
+    }
+
+    let fakeIcon;
+    if (Platform.OS === 'ios' && areSettingsEnabled && !shouldRenderAvatars) {
       fakeIcon = (
         <Icon name="chevron-forward" size={20} style={styles.fakeIcon} />
       );
     }
 
+    let avatar;
+    if (!isSearchEmpty && shouldRenderAvatars) {
+      avatar = (
+        <View style={styles.avatarContainer}>
+          <Avatar avatarInfo={avatarInfo} size="small" />
+        </View>
+      );
+    }
+
     return (
       <Button
         onPress={this.onPress}
@@ -60,6 +81,7 @@
       >
         <View style={styles.container}>
           {fakeIcon}
+          {avatar}
           <HeaderTitle {...rest}>{firstLine(title)}</HeaderTitle>
           {icon}
         </View>
@@ -78,6 +100,9 @@
 }
 
 const unboundStyles = {
+  avatarContainer: {
+    marginRight: 8,
+  },
   button: {
     flex: 1,
   },
@@ -109,11 +134,24 @@
   ) {
     const styles = useStyles(unboundStyles);
 
-    const { uiName } = useResolvedThreadInfo(props.threadInfo);
+    const shouldRenderAvatars = useShouldRenderAvatars();
+
+    const resolvedThreadInfo = useResolvedThreadInfo(props.threadInfo);
+    const avatarInfo = useGetAvatarForThread(resolvedThreadInfo);
+
     const { isSearchEmpty } = props;
-    const title = isSearchEmpty ? 'New Message' : uiName;
 
-    return <MessageListHeaderTitle {...props} styles={styles} title={title} />;
+    const title = isSearchEmpty ? 'New Message' : resolvedThreadInfo.uiName;
+
+    return (
+      <MessageListHeaderTitle
+        {...props}
+        styles={styles}
+        title={title}
+        avatarInfo={avatarInfo}
+        shouldRenderAvatars={shouldRenderAvatars}
+      />
+    );
   });
 
 export default ConnectedMessageListHeaderTitle;