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
@@ -15,6 +15,7 @@
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 export type MessageReactionsModalParams = {
   +reactions: ReactionInfo,
@@ -38,6 +39,14 @@
 
   const reactionsListData = useMessageReactionsList(reactions);
 
+  const shouldRenderAvatars = useShouldRenderAvatars();
+  const marginLeftStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [shouldRenderAvatars],
+  );
+
   const renderItem = React.useCallback(
     ({ item }) => {
       const avatarInfo = getAvatarForUser(item);
@@ -46,7 +55,7 @@
         <View key={item.id} style={styles.reactionsListRowContainer}>
           <View style={styles.reactionsListUserInfoContainer}>
             <Avatar size="small" avatarInfo={avatarInfo} />
-            <Text style={styles.reactionsListUsernameText}>
+            <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}>
               {item.username}
             </Text>
           </View>
@@ -55,6 +64,7 @@
       );
     },
     [
+      marginLeftStyle,
       styles.reactionsListReactionText,
       styles.reactionsListRowContainer,
       styles.reactionsListUserInfoContainer,
@@ -136,7 +146,6 @@
   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
@@ -45,6 +45,7 @@
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { VerticalBounds } from '../../types/layout-types.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
 
 type BaseProps = {
   +memberInfo: RelativeMemberInfo,
@@ -67,6 +68,7 @@
   +keyboardState: ?KeyboardState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
+  +shouldRenderAvatars: boolean,
 };
 class ThreadSettingsMember extends React.PureComponent<Props> {
   editButton: ?React.ElementRef<typeof View>;
@@ -74,15 +76,26 @@
   render() {
     const userText = stringForUser(this.props.memberInfo);
     const avatarInfo = getAvatarForUser(this.props.memberInfo);
+
+    const marginLeftStyle = {
+      marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
+    };
+
     let usernameInfo = null;
     if (this.props.memberInfo.username) {
       usernameInfo = (
-        <SingleLine style={this.props.styles.username}>{userText}</SingleLine>
+        <SingleLine style={[this.props.styles.username, marginLeftStyle]}>
+          {userText}
+        </SingleLine>
       );
     } else {
       usernameInfo = (
         <SingleLine
-          style={[this.props.styles.username, this.props.styles.anonymous]}
+          style={[
+            this.props.styles.username,
+            this.props.styles.anonymous,
+            marginLeftStyle,
+          ]}
         >
           {userText}
         </SingleLine>
@@ -257,7 +270,6 @@
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
-    marginLeft: 8,
   },
 };
 
@@ -285,6 +297,8 @@
     const styles = useStyles(unboundStyles);
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
+    const shouldRenderAvatars = useShouldRenderAvatars();
+
     return (
       <ThreadSettingsMember
         {...props}
@@ -295,6 +309,7 @@
         styles={styles}
         keyboardState={keyboardState}
         overlayContext={overlayContext}
+        shouldRenderAvatars={shouldRenderAvatars}
       />
     );
   });
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
@@ -15,6 +15,7 @@
 import Avatar from '../components/avatar.react.js';
 import Button from '../components/button.react.js';
 import { useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 export type TypeaheadTooltipProps = {
   +text: string,
@@ -31,10 +32,19 @@
     focusAndUpdateTextAndSelection,
   } = props;
 
+  const shouldRenderAvatars = useShouldRenderAvatars();
+
   const { textBeforeAtSymbol, usernamePrefix } = matchedStrings;
 
   const styles = useStyles(unboundStyles);
 
+  const marginLeftStyle = React.useMemo(
+    () => ({
+      marginLeft: shouldRenderAvatars ? 8 : 0,
+    }),
+    [shouldRenderAvatars],
+  );
+
   const renderTypeaheadButton = React.useCallback(
     ({ item }: { item: RelativeMemberInfo, ... }) => {
       const onPress = () => {
@@ -56,19 +66,20 @@
       return (
         <Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
           <Avatar size="small" avatarInfo={avatarInfo} />
-          <Text style={styles.buttonLabel} numberOfLines={1}>
+          <Text style={[styles.buttonLabel, marginLeftStyle]} numberOfLines={1}>
             @{item.username}
           </Text>
         </Button>
       );
     },
     [
-      focusAndUpdateTextAndSelection,
       styles.button,
       styles.buttonLabel,
-      text,
+      marginLeftStyle,
       textBeforeAtSymbol,
+      text,
       usernamePrefix,
+      focusAndUpdateTextAndSelection,
     ],
   );
 
@@ -148,7 +159,6 @@
     color: 'white',
     fontSize: 16,
     fontWeight: '400',
-    marginLeft: 8,
   },
 };
 
diff --git a/native/components/avatar.react.js b/native/components/avatar.react.js
--- a/native/components/avatar.react.js
+++ b/native/components/avatar.react.js
@@ -5,6 +5,8 @@
 
 import type { ClientAvatar } from 'lib/types/avatar-types.js';
 
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
+
 type Props = {
   +avatarInfo: ClientAvatar,
   +size?: 'large' | 'small' | 'profile' | 'micro',
@@ -13,6 +15,8 @@
 function Avatar(props: Props): React.Node {
   const { avatarInfo, size } = props;
 
+  const shouldRenderAvatars = useShouldRenderAvatars();
+
   const containerSizeStyle = React.useMemo(() => {
     if (size === 'profile') {
       return styles.profile;
@@ -45,6 +49,10 @@
     return styles.emojiLarge;
   }, [size]);
 
+  if (!shouldRenderAvatars) {
+    return null;
+  }
+
   return (
     <View style={emojiContainerStyle}>
       <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
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
@@ -39,6 +39,7 @@
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type ProfileRowProps = {
@@ -73,6 +74,7 @@
   +staffCanSee: boolean,
   +stringForUser: ?string,
   +isAccountWithPassword: boolean,
+  +shouldRenderAvatars: boolean,
 };
 
 class ProfileScreen extends React.PureComponent<Props> {
@@ -128,14 +130,23 @@
       </View>
     );
 
+    let avatarSection;
+    if (this.props.shouldRenderAvatars) {
+      avatarSection = (
+        <>
+          <Text style={this.props.styles.header}>USER AVATAR</Text>
+          <View style={this.props.styles.section}>{avatar}</View>
+        </>
+      );
+    }
+
     return (
       <View style={this.props.styles.container}>
         <ScrollView
           contentContainerStyle={this.props.styles.scrollViewContentContainer}
           style={this.props.styles.scrollView}
         >
-          <Text style={this.props.styles.header}>USER AVATAR</Text>
-          <View style={this.props.styles.section}>{avatar}</View>
+          {avatarSection}
           <Text style={this.props.styles.header}>ACCOUNT</Text>
           <View style={this.props.styles.section}>
             <Action.Row>
@@ -395,6 +406,7 @@
     const isAccountWithPassword = useSelector(state =>
       accountHasPassword(state.currentUserInfo),
     );
+    const shouldRenderAvatars = useShouldRenderAvatars();
 
     return (
       <ProfileScreen
@@ -409,6 +421,7 @@
         staffCanSee={staffCanSee}
         stringForUser={stringForUser}
         isAccountWithPassword={isAccountWithPassword}
+        shouldRenderAvatars={shouldRenderAvatars}
       />
     );
   });
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
@@ -55,6 +55,7 @@
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import type { VerticalBounds } from '../types/layout-types.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type BaseProps = {
   +userInfo: AccountUserInfo,
@@ -80,6 +81,7 @@
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
+  +shouldRenderAvatars: boolean,
 };
 class RelationshipListItem extends React.PureComponent<Props> {
   editButton = React.createRef<React.ElementRef<typeof View>>();
@@ -171,13 +173,17 @@
       );
     }
 
+    const marginLeftStyle = {
+      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} />
-          <SingleLine style={this.props.styles.username}>
+          <SingleLine style={[this.props.styles.username, marginLeftStyle]}>
             {this.props.userInfo.username}
           </SingleLine>
           {editButton}
@@ -334,6 +340,8 @@
     const boundUpdateRelationships = useServerCall(updateRelationships);
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
+    const shouldRenderAvatars = useShouldRenderAvatars();
+
     return (
       <RelationshipListItem
         {...props}
@@ -344,6 +352,7 @@
         updateRelationships={boundUpdateRelationships}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
+        shouldRenderAvatars={shouldRenderAvatars}
       />
     );
   });
diff --git a/native/utils/avatar-utils.js b/native/utils/avatar-utils.js
new file mode 100644
--- /dev/null
+++ b/native/utils/avatar-utils.js
@@ -0,0 +1,14 @@
+// @flow
+
+import * as React from 'react';
+
+import { FeatureFlagsContext } from '../components/feature-flags-provider.react.js';
+
+function useShouldRenderAvatars(): boolean {
+  const { configuration: featureFlagConfig } =
+    React.useContext(FeatureFlagsContext);
+
+  return !!featureFlagConfig['AVATARS_DISPLAY'];
+}
+
+export { useShouldRenderAvatars };