diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -2,9 +2,11 @@
 
 import * as React from 'react';
 
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import type { UserListItem } from 'lib/types/user-types.js';
 
 import css from './add-members.css';
+import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
 
 type AddMembersItemProps = {
@@ -36,13 +38,21 @@
     }
   }, [canBeAdded, userAdded, userInfo.alertTitle]);
 
+  const avatarInfo = React.useMemo(
+    () => getAvatarForUser(userInfo),
+    [userInfo],
+  );
+
   return (
     <Button
       className={css.addMemberItem}
       onClick={onClickCallback}
       disabled={!canBeAdded}
     >
-      <div className={css.label}>{userInfo.username}</div>
+      <div className={css.userInfoContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+        <div className={css.username}>{userInfo.username}</div>
+      </div>
       <div className={css.label}>{action}</div>
     </Button>
   );
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
--- a/web/modals/components/add-members.css
+++ b/web/modals/components/add-members.css
@@ -34,3 +34,14 @@
 button.addMemberItem:hover .danger {
   color: var(--add-members-remove-pending-color-hover);
 }
+
+div.userInfoContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 16px;
+}
+
+div.username {
+  margin-left: 8px;
+}
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -8,6 +8,7 @@
   changeThreadMemberRoles,
 } from 'lib/actions/thread-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import {
   memberIsAdmin,
   memberHasAdminPowers,
@@ -27,6 +28,7 @@
 } from 'lib/utils/action-utils.js';
 
 import css from './members-modal.css';
+import Avatar from '../../../components/avatar.react.js';
 import Label from '../../../components/label.react.js';
 import MenuItem from '../../../components/menu-item.react.js';
 import Menu from '../../../components/menu.react.js';
@@ -141,6 +143,11 @@
     return null;
   }, [memberInfo, threadInfo]);
 
+  const avatarInfo = React.useMemo(
+    () => getAvatarForUser(memberInfo),
+    [memberInfo],
+  );
+
   const memberContainerClasses = classNames(css.memberContainer, {
     [css.memberContainerWithMenuOpen]: isMenuOpen,
   });
@@ -148,7 +155,9 @@
   return (
     <div className={memberContainerClasses}>
       <div className={css.memberInfo}>
-        {userName} {label}
+        <Avatar size="small" avatarInfo={avatarInfo} />
+        {userName}
+        {label}
       </div>
       <div className={css.memberAction}>
         <Menu