diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js
--- a/native/chat/message-reactions-modal.react.js
+++ b/native/chat/message-reactions-modal.react.js
@@ -7,8 +7,10 @@
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
 
+import Avatar from '../components/avatar.react.js';
 import Modal from '../components/modal.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
@@ -38,9 +40,16 @@
 
   const renderItem = React.useCallback(
     ({ item }) => {
+      const avatarInfo = getAvatarForUser(item);
+
       return (
         <View key={item.id} style={styles.reactionsListRowContainer}>
-          <Text style={styles.reactionsListUsernameText}>{item.username}</Text>
+          <View style={styles.reactionsListUserInfoContainer}>
+            <Avatar size="small" avatarInfo={avatarInfo} />
+            <Text style={styles.reactionsListUsernameText}>
+              {item.username}
+            </Text>
+          </View>
           <Text style={styles.reactionsListReactionText}>{item.reaction}</Text>
         </View>
       );
@@ -48,6 +57,7 @@
     [
       styles.reactionsListReactionText,
       styles.reactionsListRowContainer,
+      styles.reactionsListUserInfoContainer,
       styles.reactionsListUsernameText,
     ],
   );
@@ -118,9 +128,15 @@
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  reactionsListUserInfoContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   reactionsListUsernameText: {
     color: 'modalForegroundLabel',
     fontSize: 18,
+    marginLeft: 8,
   },
   reactionsListReactionText: {
     fontSize: 18,
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -16,6 +16,7 @@
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import {
   memberIsAdmin,
   memberHasAdminPowers,
@@ -29,6 +30,7 @@
 } from 'lib/types/thread-types.js';
 
 import type { ThreadSettingsNavigate } from './thread-settings.react.js';
+import Avatar from '../../components/avatar.react.js';
 import PencilIcon from '../../components/pencil-icon.react.js';
 import { SingleLine } from '../../components/single-line.react.js';
 import {
@@ -71,13 +73,14 @@
 
   render() {
     const userText = stringForUser(this.props.memberInfo);
-    let userInfo = null;
+    const avatarInfo = getAvatarForUser(this.props.memberInfo);
+    let usernameInfo = null;
     if (this.props.memberInfo.username) {
-      userInfo = (
+      usernameInfo = (
         <SingleLine style={this.props.styles.username}>{userText}</SingleLine>
       );
     } else {
-      userInfo = (
+      usernameInfo = (
         <SingleLine
           style={[this.props.styles.username, this.props.styles.anonymous]}
         >
@@ -145,7 +148,10 @@
       <View style={this.props.styles.container}>
         <View style={[this.props.styles.innerContainer, firstItem, lastItem]}>
           <View style={this.props.styles.row}>
-            {userInfo}
+            <View style={this.props.styles.userInfoContainer}>
+              <Avatar size="small" avatarInfo={avatarInfo} />
+              {usernameInfo}
+            </View>
             {editButton}
           </View>
           {roleInfo}
@@ -241,11 +247,17 @@
     flex: 1,
     flexDirection: 'row',
   },
+  userInfoContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   username: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
+    marginLeft: 8,
   },
 };
 
diff --git a/native/chat/typeahead-tooltip.react.js b/native/chat/typeahead-tooltip.react.js
--- a/native/chat/typeahead-tooltip.react.js
+++ b/native/chat/typeahead-tooltip.react.js
@@ -4,6 +4,7 @@
 import { Platform, Text } from 'react-native';
 import { PanGestureHandler, FlatList } from 'react-native-gesture-handler';
 
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import {
   type TypeaheadMatchedStrings,
   type Selection,
@@ -11,6 +12,7 @@
 } from 'lib/shared/mention-utils.js';
 import type { RelativeMemberInfo } from 'lib/types/thread-types.js';
 
+import Avatar from '../components/avatar.react.js';
 import Button from '../components/button.react.js';
 import { useStyles } from '../themes/colors.js';
 
@@ -49,8 +51,11 @@
         });
       };
 
+      const avatarInfo = getAvatarForUser(item);
+
       return (
         <Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
+          <Avatar size="small" avatarInfo={avatarInfo} />
           <Text style={styles.buttonLabel} numberOfLines={1}>
             @{item.username}
           </Text>
@@ -133,6 +138,7 @@
     padding: 8,
   },
   button: {
+    alignItems: 'center',
     flexDirection: 'row',
     innerHeight: 24,
     padding: 8,
@@ -142,6 +148,7 @@
     color: 'white',
     fontSize: 16,
     fontWeight: '400',
+    marginLeft: 8,
   },
 };
 
diff --git a/native/components/user-list-user.react.js b/native/components/user-list-user.react.js
--- a/native/components/user-list-user.react.js
+++ b/native/components/user-list-user.react.js
@@ -3,8 +3,10 @@
 import * as React from 'react';
 import { Text, Platform, Alert } from 'react-native';
 
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import type { UserListItem } from 'lib/types/user-types.js';
 
+import Avatar from './avatar.react.js';
 import Button from './button.react.js';
 import { SingleLine } from './single-line.react.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
@@ -35,6 +37,9 @@
       notice = <Text style={this.props.styles.notice}>{userInfo.notice}</Text>;
     }
     const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
+
+    const avatarInfo = getAvatarForUser(this.props.userInfo);
+
     return (
       <Button
         onPress={this.onSelect}
@@ -44,6 +49,7 @@
         iosActiveOpacity={0.85}
         style={this.props.styles.button}
       >
+        <Avatar size="small" avatarInfo={avatarInfo} />
         <SingleLine style={[this.props.styles.text, this.props.textStyle]}>
           {this.props.userInfo.username}
         </SingleLine>
diff --git a/native/profile/relationship-list-item.react.js b/native/profile/relationship-list-item.react.js
--- a/native/profile/relationship-list-item.react.js
+++ b/native/profile/relationship-list-item.react.js
@@ -15,6 +15,7 @@
   updateRelationships,
 } from 'lib/actions/relationship-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import {
   type RelationshipRequest,
@@ -34,6 +35,7 @@
 } from 'lib/utils/action-utils.js';
 
 import type { RelationshipListNavigate } from './relationship-list.react.js';
+import Avatar from '../components/avatar.react.js';
 import PencilIcon from '../components/pencil-icon.react.js';
 import { SingleLine } from '../components/single-line.react.js';
 import {
@@ -169,9 +171,12 @@
       );
     }
 
+    const avatarInfo = getAvatarForUser(this.props.userInfo);
+
     return (
       <View style={this.props.styles.container}>
         <View style={[this.props.styles.innerContainer, borderBottom]}>
+          <Avatar size="small" avatarInfo={avatarInfo} />
           <SingleLine style={this.props.styles.username}>
             {this.props.userInfo.username}
           </SingleLine>
@@ -299,6 +304,7 @@
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
+    marginLeft: 8,
   },
   blueAction: {
     color: 'link',