diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js
--- a/web/modals/user-profile/user-profile.react.js
+++ b/web/modals/user-profile/user-profile.react.js
@@ -5,6 +5,7 @@
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { stringForUserExplicit } from 'lib/shared/user-utils.js';
 import type { UserInfo } from 'lib/types/user-types';
+import sleep from 'lib/utils/sleep.js';
 
 import css from './user-profile.css';
 import UserAvatar from '../../avatars/user-avatar.react.js';
@@ -18,20 +19,41 @@
 
   const usernameText = stringForUserExplicit(userInfo);
 
+  const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
+
+  const onClickCopyUsername = React.useCallback(async () => {
+    if (usernameCopied) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(usernameText);
+    setUsernameCopied(true);
+    await sleep(3000);
+    setUsernameCopied(false);
+  }, [usernameCopied, usernameText]);
+
   const userProfile = React.useMemo(
     () => (
       <div className={css.container}>
         <UserAvatar userID={userInfo?.id} size="L" />
         <div className={css.usernameContainer}>
           <div className={css.usernameText}>{usernameText}</div>
-          <div className={css.copyUsernameContainer}>
-            <SWMansionIcon icon="copy" size={16} />
-            <p className={css.copyUsernameText}>Copy username</p>
+          <div
+            className={css.copyUsernameContainer}
+            onClick={onClickCopyUsername}
+          >
+            <SWMansionIcon
+              icon={!usernameCopied ? 'copy' : 'check'}
+              size={16}
+            />
+            <p className={css.copyUsernameText}>
+              {!usernameCopied ? 'Copy username' : 'Username copied!'}
+            </p>
           </div>
         </div>
       </div>
     ),
-    [userInfo?.id, usernameText],
+    [onClickCopyUsername, userInfo?.id, usernameCopied, usernameText],
   );
 
   return userProfile;