diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css
--- a/web/modals/chat/message-reactions-modal.css
+++ b/web/modals/chat/message-reactions-modal.css
@@ -14,3 +14,13 @@
   flex-direction: row;
   justify-content: space-between;
 }
+
+div.userInfoContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+div.username {
+  margin-left: 8px;
+}
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -3,9 +3,11 @@
 import * as React from 'react';
 
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
 
 import css from './message-reactions-modal.css';
+import Avatar from '../../components/avatar.react.js';
 import Modal from '../modal.react.js';
 
 type Props = {
@@ -20,12 +22,19 @@
 
   const reactionsList = React.useMemo(
     () =>
-      messageReactionsList.map(messageReactionUser => (
-        <div key={messageReactionUser.id} className={css.userRowContainer}>
-          <div>{messageReactionUser.username}</div>
-          <div>{messageReactionUser.reaction}</div>
-        </div>
-      )),
+      messageReactionsList.map(messageReactionUser => {
+        const avatarInfo = getAvatarForUser(messageReactionUser);
+
+        return (
+          <div key={messageReactionUser.id} className={css.userRowContainer}>
+            <div className={css.userInfoContainer}>
+              <Avatar size="small" avatarInfo={avatarInfo} />
+              <div className={css.username}>{messageReactionUser.username}</div>
+            </div>
+            <div>{messageReactionUser.reaction}</div>
+          </div>
+        );
+      }),
     [messageReactionsList],
   );