diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -6,7 +6,6 @@
 import { StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
-import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import { createMessageReply } from 'lib/shared/message-utils.js';
 import { assertComposableMessageType } from 'lib/types/message-types.js';
 
@@ -22,7 +21,7 @@
 import { useNavigateToSidebar } from './sidebar-navigation.js';
 import SwipeableMessage from './swipeable-message.react.js';
 import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js';
-import Avatar from '../components/avatar.react.js';
+import UserAvatar from '../components/user-avatar.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 import { type Colors, useColors } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
@@ -137,10 +136,9 @@
 
     let avatar;
     if (!isViewer && item.endsCluster && shouldRenderAvatars) {
-      const avatarInfo = getAvatarForUser(item.messageInfo.creator);
       avatar = (
         <View style={styles.avatarContainer}>
-          <Avatar size="small" avatarInfo={avatarInfo} />
+          <UserAvatar size="small" userID={item.messageInfo.creator.id} />
         </View>
       );
     } else if (!isViewer && shouldRenderAvatars) {
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,11 +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 UserAvatar from '../components/user-avatar.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useColors, useStyles } from '../themes/colors.js';
@@ -48,21 +47,17 @@
   );
 
   const renderItem = React.useCallback(
-    ({ item }) => {
-      const avatarInfo = getAvatarForUser(item);
-
-      return (
-        <View key={item.id} style={styles.reactionsListRowContainer}>
-          <View style={styles.reactionsListUserInfoContainer}>
-            <Avatar size="small" avatarInfo={avatarInfo} />
-            <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}>
-              {item.username}
-            </Text>
-          </View>
-          <Text style={styles.reactionsListReactionText}>{item.reaction}</Text>
+    ({ item }) => (
+      <View key={item.id} style={styles.reactionsListRowContainer}>
+        <View style={styles.reactionsListUserInfoContainer}>
+          <UserAvatar size="small" userID={item.id} />
+          <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}>
+            {item.username}
+          </Text>
         </View>
-      );
-    },
+        <Text style={styles.reactionsListReactionText}>{item.reaction}</Text>
+      </View>
+    ),
     [
       marginLeftStyle,
       styles.reactionsListReactionText,
diff --git a/native/chat/message-tooltip-button-avatar.react.js b/native/chat/message-tooltip-button-avatar.react.js
--- a/native/chat/message-tooltip-button-avatar.react.js
+++ b/native/chat/message-tooltip-button-avatar.react.js
@@ -3,10 +3,8 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
-
 import { avatarOffset } from './chat-constants.js';
-import Avatar from '../components/avatar.react.js';
+import UserAvatar from '../components/user-avatar.react.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
@@ -17,11 +15,6 @@
 function MessageTooltipButtonAvatar(props: Props): React.Node {
   const { item } = props;
 
-  const avatarInfo = React.useMemo(
-    () => getAvatarForUser(item.messageInfo.creator),
-    [item.messageInfo.creator],
-  );
-
   const shouldRenderAvatars = useShouldRenderAvatars();
 
   if (item.messageInfo.creator.isViewer || !shouldRenderAvatars) {
@@ -29,7 +22,7 @@
   }
   return (
     <View style={styles.avatarContainer}>
-      <Avatar size="small" avatarInfo={avatarInfo} />
+      <UserAvatar size="small" userID={item.messageInfo.creator.id} />
     </View>
   );
 }
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,7 +16,6 @@
 } 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,
@@ -30,9 +29,9 @@
 } 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 UserAvatar from '../../components/user-avatar.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
@@ -75,7 +74,6 @@
 
   render() {
     const userText = stringForUser(this.props.memberInfo);
-    const avatarInfo = getAvatarForUser(this.props.memberInfo);
 
     const marginLeftStyle = {
       marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
@@ -162,7 +160,7 @@
         <View style={[this.props.styles.innerContainer, firstItem, lastItem]}>
           <View style={this.props.styles.row}>
             <View style={this.props.styles.userInfoContainer}>
-              <Avatar size="small" avatarInfo={avatarInfo} />
+              <UserAvatar size="small" userID={this.props.memberInfo.id} />
               {usernameInfo}
             </View>
             {editButton}
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,7 +4,6 @@
 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,
@@ -12,8 +11,8 @@
 } 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 UserAvatar from '../components/user-avatar.react.js';
 import { useStyles } from '../themes/colors.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
@@ -61,11 +60,9 @@
         });
       };
 
-      const avatarInfo = getAvatarForUser(item);
-
       return (
         <Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
-          <Avatar size="small" avatarInfo={avatarInfo} />
+          <UserAvatar size="small" userID={item.id} />
           <Text style={[styles.buttonLabel, marginLeftStyle]} numberOfLines={1}>
             @{item.username}
           </Text>
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,12 +3,11 @@
 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 UserAvatar from './user-avatar.react.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { TextStyle } from '../types/styles.js';
 
@@ -38,8 +37,6 @@
     }
     const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
 
-    const avatarInfo = getAvatarForUser(this.props.userInfo);
-
     return (
       <Button
         onPress={this.onSelect}
@@ -49,7 +46,7 @@
         iosActiveOpacity={0.85}
         style={this.props.styles.button}
       >
-        <Avatar size="small" avatarInfo={avatarInfo} />
+        <UserAvatar size="small" userID={this.props.userInfo.id} />
         <SingleLine style={[this.props.styles.text, this.props.textStyle]}>
           {this.props.userInfo.username}
         </SingleLine>
diff --git a/native/profile/profile-screen.react.js b/native/profile/profile-screen.react.js
--- a/native/profile/profile-screen.react.js
+++ b/native/profile/profile-screen.react.js
@@ -8,7 +8,6 @@
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
-import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import type { LogOutResult } from 'lib/types/account-types.js';
 import { type PreRequestUserState } from 'lib/types/session-types.js';
 import { type CurrentUserInfo } from 'lib/types/user-types.js';
@@ -21,10 +20,10 @@
 import type { ProfileNavigationProp } from './profile.react.js';
 import { deleteNativeCredentialsFor } from '../account/native-credentials.js';
 import Action from '../components/action-row.react.js';
-import Avatar from '../components/avatar.react.js';
 import Button from '../components/button.react.js';
 import EditSettingButton from '../components/edit-setting-button.react.js';
 import { SingleLine } from '../components/single-line.react.js';
+import UserAvatar from '../components/user-avatar.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import {
   EditPasswordRouteName,
@@ -122,11 +121,9 @@
       );
     }
 
-    const avatarInfo = getAvatarForUser(this.props.currentUserInfo);
-
     const avatar = (
       <View style={this.props.styles.avatarSection}>
-        <Avatar size="profile" avatarInfo={avatarInfo} />
+        <UserAvatar size="profile" userID={this.props.currentUserInfo?.id} />
       </View>
     );
 
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,7 +15,6 @@
   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,
@@ -35,9 +34,9 @@
 } 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 UserAvatar from '../components/user-avatar.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
@@ -177,12 +176,10 @@
       marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
     };
 
-    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} />
+          <UserAvatar size="small" userID={this.props.userInfo.id} />
           <SingleLine style={[this.props.styles.username, marginLeftStyle]}>
             {this.props.userInfo.username}
           </SingleLine>