diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss
index 3ab0d7049f..0d772d7bd6 100644
--- a/res/css/views/elements/_FacePile.scss
+++ b/res/css/views/elements/_FacePile.scss
@@ -20,10 +20,8 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        .mx_BaseAvatar {
-            & + .mx_BaseAvatar {
-                margin-right: -10px;
-            }
+        > span + span {
+            margin-right: -8px;
         }
 
         .mx_BaseAvatar_image {
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index dd5ca9ce1f..025bb23aa0 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -20,6 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
+import TextWithTooltip from "../elements/TextWithTooltip";
 
 const DEFAULT_NUM_FACES = 5;
 
@@ -38,7 +39,11 @@ const FacePile = ({ room, numShown = DEFAULT_NUM_FACES }: IProps) => {
 
     return <div className="mx_FacePile">
         <div className="mx_FacePile_faces">
-            { shownMembers.map(member => <MemberAvatar key={member.userId} member={member} width={28} height={28} />) }
+            { shownMembers.map(member => {
+                return <TextWithTooltip key={member.userId} tooltip={member.name}>
+                    <MemberAvatar member={member} width={28} height={28} />
+                </TextWithTooltip>;
+            }) }
         </div>
         <span>
             { _t("%(count)s people you know have already joined", { count: knownMembers.length }) }