diff --git a/web/settings/relationship/block-list-row.react.js b/web/settings/relationship/block-list-row.react.js
--- a/web/settings/relationship/block-list-row.react.js
+++ b/web/settings/relationship/block-list-row.react.js
@@ -4,9 +4,11 @@
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 
 import css from './user-list-row.css';
 import type { UserRowProps } from './user-list.react.js';
+import Avatar from '../../components/avatar.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
 
@@ -15,9 +17,17 @@
   const { unblockUser } = useRelationshipCallbacks(userInfo.id);
   const editIcon = <SWMansionIcon icon="edit-1" size={22} />;
 
+  const avatarInfo = React.useMemo(
+    () => getAvatarForUser(userInfo),
+    [userInfo],
+  );
+
   return (
     <div className={css.container}>
-      <div className={css.usernameContainer}>{userInfo.username}</div>
+      <div className={css.userInfoContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+        <div className={css.usernameContainer}>{userInfo.username}</div>
+      </div>
       <div className={css.buttons}>
         <div className={css.edit_menu}>
           <Menu
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -4,10 +4,12 @@
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';
+import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
 
 import css from './user-list-row.css';
 import type { UserRowProps } from './user-list.react.js';
+import Avatar from '../../components/avatar.react.js';
 import Button from '../../components/button.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
@@ -78,9 +80,17 @@
     onMenuVisibilityChange,
   ]);
 
+  const avatarInfo = React.useMemo(
+    () => getAvatarForUser(userInfo),
+    [userInfo],
+  );
+
   return (
     <div className={css.container}>
-      <div className={css.usernameContainer}>{userInfo.username}</div>
+      <div className={css.userInfoContainer}>
+        <Avatar size="small" avatarInfo={avatarInfo} />
+        <div className={css.usernameContainer}>{userInfo.username}</div>
+      </div>
       <div className={css.buttons}>{buttons}</div>
     </div>
   );
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -11,6 +11,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  margin-left: 8px;
 }
 
 .buttons {
@@ -29,3 +30,9 @@
 .edit_menu {
   position: relative;
 }
+
+div.userInfoContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}