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,7 +4,6 @@
 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';
@@ -14,11 +13,11 @@
 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 ThreadAvatar from '../components/thread-avatar.react.js';
 import UnreadDot from '../components/unread-dot.react.js';
 import { useColors, useStyles } from '../themes/colors.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
@@ -119,7 +118,6 @@
   ]);
 
   const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo);
-  const avatarInfo = useGetAvatarForThread(data.threadInfo);
   const shouldRenderAvatars = useShouldRenderAvatars();
 
   const avatar = React.useMemo(() => {
@@ -127,8 +125,8 @@
       return <ColorSplotch color={data.threadInfo.color} size="profile" />;
     }
 
-    return <Avatar size="large" avatarInfo={avatarInfo} />;
-  }, [avatarInfo, data.threadInfo.color, shouldRenderAvatars]);
+    return <ThreadAvatar size="large" threadInfo={data.threadInfo} />;
+  }, [data.threadInfo, shouldRenderAvatars]);
 
   return (
     <>
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
@@ -7,15 +7,13 @@
 import * as React from 'react';
 import { View } 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 ThreadAvatar from '../components/thread-avatar.react.js';
 import { ThreadSettingsRouteName } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
@@ -31,7 +29,6 @@
   ...BaseProps,
   +styles: typeof unboundStyles,
   +title: string,
-  +avatarInfo: ClientAvatar,
   +shouldRenderAvatars: boolean,
 };
 class MessageListHeaderTitle extends React.PureComponent<Props> {
@@ -43,7 +40,6 @@
       areSettingsEnabled,
       styles,
       title,
-      avatarInfo,
       shouldRenderAvatars,
       ...rest
     } = this.props;
@@ -52,7 +48,7 @@
     if (!isSearchEmpty && shouldRenderAvatars) {
       avatar = (
         <View style={styles.avatarContainer}>
-          <Avatar avatarInfo={avatarInfo} size="small" />
+          <ThreadAvatar size="small" threadInfo={threadInfo} />
         </View>
       );
     }
@@ -105,7 +101,6 @@
     const shouldRenderAvatars = useShouldRenderAvatars();
 
     const { uiName } = useResolvedThreadInfo(props.threadInfo);
-    const avatarInfo = useGetAvatarForThread(props.threadInfo);
 
     const { isSearchEmpty } = props;
 
@@ -116,7 +111,6 @@
         {...props}
         styles={styles}
         title={title}
-        avatarInfo={avatarInfo}
         shouldRenderAvatars={shouldRenderAvatars}
       />
     );
diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
--- a/native/chat/settings/thread-settings-avatar.react.js
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -3,10 +3,9 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import { type ResolvedThreadInfo } from 'lib/types/thread-types.js';
 
-import Avatar from '../../components/avatar.react.js';
+import ThreadAvatar from '../../components/thread-avatar.react.js';
 import { useStyles } from '../../themes/colors.js';
 
 type Props = {
@@ -14,11 +13,10 @@
 };
 function ThreadSettingsAvatar(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
-  const avatarInfo = useGetAvatarForThread(props.threadInfo);
 
   return (
     <View style={styles.container}>
-      <Avatar size="profile" avatarInfo={avatarInfo} />
+      <ThreadAvatar size="profile" threadInfo={props.threadInfo} />
     </View>
   );
 }
diff --git a/native/chat/settings/thread-settings-child-thread.react.js b/native/chat/settings/thread-settings-child-thread.react.js
--- a/native/chat/settings/thread-settings-child-thread.react.js
+++ b/native/chat/settings/thread-settings-child-thread.react.js
@@ -3,11 +3,10 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 
-import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
-import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
+import ThreadAvatar from '../../components/thread-avatar.react.js';
 import ThreadIcon from '../../components/thread-icon.react.js';
 import ThreadPill from '../../components/thread-pill.react.js';
 import { useColors, useStyles } from '../../themes/colors.js';
@@ -30,7 +29,6 @@
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
-  const avatarInfo = useGetAvatarForThread(threadInfo);
   const shouldRenderAvatars = useShouldRenderAvatars();
 
   const avatar = React.useMemo(() => {
@@ -39,10 +37,10 @@
     }
     return (
       <View style={styles.avatarContainer}>
-        <Avatar size="small" avatarInfo={avatarInfo} />
+        <ThreadAvatar size="small" threadInfo={threadInfo} />
       </View>
     );
-  }, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);
+  }, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);
 
   const firstItem = props.firstListItem ? null : styles.topBorder;
   const lastItem = props.lastListItem ? styles.lastButton : null;
diff --git a/native/chat/settings/thread-settings-parent.react.js b/native/chat/settings/thread-settings-parent.react.js
--- a/native/chat/settings/thread-settings-parent.react.js
+++ b/native/chat/settings/thread-settings-parent.react.js
@@ -3,11 +3,10 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
-import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 
-import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
+import ThreadAvatar from '../../components/thread-avatar.react.js';
 import ThreadPill from '../../components/thread-pill.react.js';
 import { useStyles } from '../../themes/colors.js';
 import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
@@ -25,7 +24,6 @@
     navigateToThread({ threadInfo: props.parentThreadInfo });
   }, [props.parentThreadInfo, navigateToThread]);
 
-  const avatarInfo = useGetAvatarForThread(props.parentThreadInfo);
   const shouldRenderAvatars = useShouldRenderAvatars();
 
   const avatar = React.useMemo(() => {
@@ -35,10 +33,10 @@
 
     return (
       <View style={styles.avatarContainer}>
-        <Avatar size="small" avatarInfo={avatarInfo} />
+        <ThreadAvatar size="small" threadInfo={props.parentThreadInfo} />
       </View>
     );
-  }, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);
+  }, [props.parentThreadInfo, shouldRenderAvatars, styles.avatarContainer]);
 
   return (
     <Button onPress={onPressParentThread} style={styles.parentContainer}>
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,15 +2,13 @@
 
 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 ThreadAvatar from './thread-avatar.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';
@@ -27,7 +25,6 @@
 type Props = {
   ...SharedProps,
   +threadInfo: ResolvedThreadInfo,
-  +avatarInfo: ClientAvatar,
   +shouldRenderAvatars: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
@@ -38,7 +35,7 @@
 
     let avatar;
     if (this.props.shouldRenderAvatars) {
-      avatar = <Avatar size="small" avatarInfo={this.props.avatarInfo} />;
+      avatar = <ThreadAvatar size="small" threadInfo={this.props.threadInfo} />;
     } else {
       avatar = <ColorSplotch color={this.props.threadInfo.color} />;
     }
@@ -85,14 +82,12 @@
     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}
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -3,15 +3,14 @@
 import * as React from 'react';
 import { View, FlatList, TouchableOpacity } from 'react-native';
 
-import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
 import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react.js';
 import SubchannelsButton from './subchannels-button.react.js';
 import type { MessageListParams } from '../chat/message-list-types.js';
-import Avatar from '../components/avatar.react.js';
 import { SingleLine } from '../components/single-line.react.js';
+import ThreadAvatar from '../components/thread-avatar.react.js';
 import { useStyles } from '../themes/colors.js';
 import type { TextStyle } from '../types/styles.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
@@ -82,7 +81,6 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
-  const avatarInfo = useGetAvatarForThread(threadInfo);
   const shouldRenderAvatars = useShouldRenderAvatars();
 
   const avatar = React.useMemo(() => {
@@ -92,10 +90,10 @@
 
     return (
       <View style={styles.avatarContainer}>
-        <Avatar size="micro" avatarInfo={avatarInfo} />
+        <ThreadAvatar size="micro" threadInfo={threadInfo} />
       </View>
     );
-  }, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);
+  }, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);
 
   return (
     <View>