diff --git a/lib/types/media-types.js b/lib/types/media-types.js
--- a/lib/types/media-types.js
+++ b/lib/types/media-types.js
@@ -55,6 +55,11 @@
 
 export type Media = Image | Video | EncryptedImage | EncryptedVideo;
 
+export type AvatarMediaInfo = {
+  +type: 'photo',
+  +uri: string,
+};
+
 export type ClientDBMediaInfo = {
   +id: string,
   +uri: string,
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,7 @@
 
 import type { ClientAvatar } from 'lib/types/avatar-types.js';
 
+import Multimedia from '../media/multimedia.react.js';
 import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
 
 type Props = {
@@ -49,15 +50,35 @@
     return styles.emojiLarge;
   }, [size]);
 
-  if (!shouldRenderAvatars) {
-    return null;
-  }
+  const avatar = React.useMemo(() => {
+    if (avatarInfo.type === 'image') {
+      const avatarMediaInfo = {
+        type: 'photo',
+        uri: avatarInfo.uri,
+      };
 
-  return (
-    <View style={emojiContainerStyle}>
-      <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
-    </View>
-  );
+      return (
+        <View style={[containerSizeStyle, styles.imageContainer]}>
+          <Multimedia mediaInfo={avatarMediaInfo} spinnerColor="white" />
+        </View>
+      );
+    }
+
+    return (
+      <View style={emojiContainerStyle}>
+        <Text style={emojiSizeStyle}>{avatarInfo.emoji}</Text>
+      </View>
+    );
+  }, [
+    avatarInfo.emoji,
+    avatarInfo.type,
+    avatarInfo.uri,
+    containerSizeStyle,
+    emojiContainerStyle,
+    emojiSizeStyle,
+  ]);
+
+  return shouldRenderAvatars ? avatar : null;
 }
 
 const styles = StyleSheet.create({
@@ -81,6 +102,9 @@
     fontSize: 14,
     textAlign: 'center',
   },
+  imageContainer: {
+    overflow: 'hidden',
+  },
   large: {
     borderRadius: 20,
     height: 40,
diff --git a/native/media/multimedia.react.js b/native/media/multimedia.react.js
--- a/native/media/multimedia.react.js
+++ b/native/media/multimedia.react.js
@@ -5,13 +5,13 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { type MediaInfo } from 'lib/types/media-types.js';
+import type { MediaInfo, AvatarMediaInfo } from 'lib/types/media-types.js';
 
 import RemoteImage from './remote-image.react.js';
 import { type InputState, InputStateContext } from '../input/input-state.js';
 
 type BaseProps = {
-  +mediaInfo: MediaInfo,
+  +mediaInfo: MediaInfo | AvatarMediaInfo,
   +spinnerColor: string,
 };
 type Props = {