diff --git a/src/Facepile.tsx b/src/Facepile.tsx
index c3f5b290..86c5c6f5 100644
--- a/src/Facepile.tsx
+++ b/src/Facepile.tsx
@@ -72,12 +72,12 @@ export function Facepile({
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
+        const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
             key={member.userId}
             size={size}
-            src={avatarUrl}
+            src={avatarUrl ?? undefined}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
             style={{ left: i * (_size - _overlap) }}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index da6a6dc9..82eb7570 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -237,14 +237,14 @@ export function InCallView({
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
+      const avatarUrl = roomMember.getMxcAvatarUrl();
       const size = Math.round(Math.min(width, height) / 2);
 
       return (
         <Avatar
           key={roomMember.userId}
           size={size}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />