diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 4c6b4d1e2e..1c12fd1729 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1145,7 +1145,7 @@ input[type=checkbox].inline-block {
 
     #user_avatar_delete_button {
         cursor: pointer;
-        color: hsl(236, 33%, 90%);
+        color: hsl(0, 0%, 75%);
         opacity: 0;
         font-size: 3rem;
         position: absolute;
@@ -1154,9 +1154,31 @@ input[type=checkbox].inline-block {
         z-index: 99;
     }
 
+    #user_avatar_delete_button:hover {
+        color: hsl(0, 0%, 100%);
+    }
+
+    #user_avatar_delete_button:hover ~ #user_avatar_upload_button {
+        visibility: hidden;
+    }
+
+    #user_avatar_delete_button:hover ~ #user_avatar_delete {
+        visibility: visible;
+    }
+
+    #user_avatar_delete {
+        color: hsl(0, 0%, 100%);
+        font-size: 0.85rem;
+        position: absolute;
+        top: 90px;
+        right: 40px;
+        visibility: hidden;
+        z-index: 99;
+    }
+
     #user_avatar_upload_button {
         cursor: pointer;
-        color: hsl(236, 33%, 90%);
+        color: hsl(0, 0%, 85%);
         opacity: 0;
         font-size: 0.85rem;
         position: absolute;
@@ -1165,6 +1187,10 @@ input[type=checkbox].inline-block {
         z-index: 99;
     }
 
+    #user_avatar_upload_button:hover {
+        color: hsl(0, 0%, 100%);
+    }
+
     #user-avatar-spinner {
         position: absolute;
         top: 40%;
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index d0afc0a162..f16f36aefd 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -163,6 +163,9 @@
                       {{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
                         ×
                     </span>
+                    <span id="user_avatar_delete" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
+                        {{t 'Delete profile picture' }}
+                    </span>
                     <object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
                     <span id="user_avatar_upload_button" aria-label="{{t 'Upload new profile picture'}}" role="button" tabindex="0"
                       {{#if (and (not page_params.is_admin) page_params.realm_avatar_changes_disabled)}}style="display:none"{{/if}}>