diff --git a/web/avatars/edit-user-avatar.css b/web/avatars/edit-user-avatar.css
new file mode 100644
--- /dev/null
+++ b/web/avatars/edit-user-avatar.css
@@ -0,0 +1,26 @@
+.editUserAvatarContainer {
+  position: relative;
+  height: 112px;
+  width: 112px;
+}
+
+.editAvatarBadge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 34px;
+  height: 34px;
+  color: var(--fg);
+  background-color: var(--edit-avatar-button);
+  border: 2px solid var(--bg);
+  border-radius: 50%;
+  cursor: pointer;
+  transition-duration: 200ms;
+}
+
+.editAvatarBadge:hover {
+  filter: brightness(0.8);
+}
diff --git a/web/avatars/edit-user-avatar.react.js b/web/avatars/edit-user-avatar.react.js
--- a/web/avatars/edit-user-avatar.react.js
+++ b/web/avatars/edit-user-avatar.react.js
@@ -2,6 +2,9 @@
 
 import * as React from 'react';
 
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './edit-user-avatar.css';
 import UserAvatar from './user-avatar.react.js';
 
 type Props = {
@@ -10,7 +13,14 @@
 };
 function EditUserAvatar(props: Props): React.Node {
   const { userID } = props;
-  return <UserAvatar userID={userID} size="profile" />;
+  return (
+    <div className={css.editUserAvatarContainer}>
+      <UserAvatar userID={userID} size="profile" />
+      <div className={css.editAvatarBadge}>
+        <SWMansionIcon icon="edit-2" size={20} />
+      </div>
+    </div>
+  );
 }
 
 export default EditUserAvatar;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -225,4 +225,5 @@
   --pinned-count-text-color: var(--shades-white-90);
   --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
   --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
+  --edit-avatar-button: var(--violet-dark-60);
 }