diff --git a/web/chat/typeahead-tooltip.css b/web/chat/typeahead-tooltip.css
--- a/web/chat/typeahead-tooltip.css
+++ b/web/chat/typeahead-tooltip.css
@@ -65,3 +65,7 @@
   opacity: 1;
   transition: opacity 100ms ease-in;
 }
+
+span.username {
+  margin-left: 8px;
+}
diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js
--- a/web/utils/typeahead-utils.js
+++ b/web/utils/typeahead-utils.js
@@ -12,6 +12,7 @@
 import { typeaheadStyle } from '../chat/chat-constants.js';
 import css from '../chat/typeahead-tooltip.css';
 import Button from '../components/button.react.js';
+import UserAvatar from '../components/user-avatar.react.js';
 
 const webTypeaheadRegex: RegExp = new RegExp(
   `(?<textPrefix>(?:^(?:.|\n)*\\s+)|^)@(?<username>${oldValidUsernameRegexString})?$`,
@@ -20,7 +21,7 @@
 export type TypeaheadTooltipAction = {
   +key: string,
   +execute: () => mixed,
-  +actionButtonContent: React.Node,
+  +actionButtonContent: { +userID: string, +username: string },
 };
 
 export type TooltipPosition = {
@@ -112,7 +113,10 @@
         inputStateSetDraft(newText);
         inputStateSetTextCursorPosition(newSelectionStart);
       },
-      actionButtonContent: stringForUserExplicit(suggestedUser),
+      actionButtonContent: {
+        userID: suggestedUser.id,
+        username: stringForUserExplicit(suggestedUser),
+      },
     }));
 }
 
@@ -140,7 +144,8 @@
         onMouseMove={onMouseMove}
         className={buttonClasses}
       >
-        <span>@{actionButtonContent}</span>
+        <UserAvatar size="small" userID={actionButtonContent.userID} />
+        <span className={css.username}>@{actionButtonContent.username}</span>
       </Button>
     );
   });