diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index d2491dfcd0..ef5fadd5c1 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -816,6 +816,18 @@
         hsl(0deg 0% 90%),
         hsl(0deg 0% 91% / 10%)
     );
+    --color-modal-selectable-icon: light-dark(
+        hsl(240deg 30% 40%),
+        hsl(240deg 35% 68%)
+    );
+    --color-modal-selectable-icon-hover: light-dark(
+        hsl(240deg 100% 15%),
+        hsl(240deg 100% 90%)
+    );
+    --background-color-modal-selectable-icon-hover: light-dark(
+        hsl(240deg 100% 50% / 7%),
+        hsl(240deg 100% 75% / 20%)
+    );
     --color-background-pill-container-without-placeholder: light-dark(
         hsl(0deg 0% 100%),
         hsl(0deg 0% 0% / 20%)
diff --git a/web/styles/user_status.css b/web/styles/user_status.css
index e6522c9f52..27219d80e0 100644
--- a/web/styles/user_status.css
+++ b/web/styles/user_status.css
@@ -8,14 +8,18 @@
             "status-icon search-input clear-search" auto / auto minmax(0, 1fr)
             auto;
         align-items: center;
-        border: 1px solid;
-        border-color: hsl(0deg 0% 0% / 60%);
-        border-radius: 5px;
+        outline: 1px solid hsl(0deg 0% 0% / 60%);
+        outline-offset: -1px;
+        border-radius: 4px;
         background-color: var(--color-background-input);
 
         & input.user-status {
             grid-area: search-input;
+            line-height: 1.25em; /* 20px at 16px/em */
+            padding: 0.5em 0.125em; /* 8px 2px at 16px/1em */
             width: 100%;
+            /* Override default input height */
+            height: unset;
             border: none;
             outline: none;
             box-shadow: none;
@@ -30,36 +34,46 @@
             }
         }
 
-        .clear_search_button {
+        #clear_status_message_button {
             grid-area: clear-search;
-            width: 40px;
-            padding-left: 5px;
+            padding: 0.5em; /* 8px at 16px/1em */
+            margin: 0.125em; /* 2px at 16px/1em */
         }
 
         .status-emoji-wrapper {
-            padding: 4px 8px;
-            border-right: 1px solid;
-            border-color: hsl(0deg 0% 0% / 60%);
+            display: flex;
+            padding: 0.375em; /* 6px at 16px/1em */
+            margin: 0.125em; /* 2px at 16px/1em */
+            border-radius: 4px;
             cursor: pointer;
 
-            .selected-emoji {
+            .selected-emoji,
+            .smiley-icon {
                 width: 1.25em; /* 20px at 16px/em */
                 height: 1.25em; /* 20px at 16px/em */
                 cursor: pointer;
             }
 
-            /* For custom emojis and smiley icon to take full width. */
-            & img.selected-emoji,
             .smiley-icon {
-                text-align: center;
-                min-width: 1.25em; /* 20px at 16px/em */
-            }
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: var(--color-modal-selectable-icon);
 
-            .smiley-icon {
                 &:hover {
                     text-decoration: none;
                 }
             }
+
+            &:hover {
+                background-color: var(
+                    --background-color-modal-selectable-icon-hover
+                );
+
+                .smiley-icon {
+                    color: var(--color-modal-selectable-icon-hover);
+                }
+            }
         }
     }
 
@@ -67,6 +81,15 @@
         padding-top: 15px;
 
         .user-status-value {
+            /* We set the gap between the status emoji and text
+               in the default user status options to match the gap
+               between the corresponding emoji and text of the
+               custom user status input.
+               6px (emoji button padding)
+               + 2px (emoji button margin)
+               + 2px (input padding) */
+            gap: 0.625em; /* 10px at 16px/em */
+
             .status-emoji {
                 /* Size and align status emoji to match
                    the top line of the modal. */
diff --git a/web/templates/set_status_overlay.hbs b/web/templates/set_status_overlay.hbs
index cb8082a0a3..c0454a1f7f 100644
--- a/web/templates/set_status_overlay.hbs
+++ b/web/templates/set_status_overlay.hbs
@@ -5,9 +5,7 @@
         </div>
     </div>
     <input type="text" class="user-status modal_text_input" id="user-status-input" placeholder="{{t 'Your status' }}" maxlength="60"/>
-    <button type="button" class="clear_search_button" id="clear_status_message_button">
-        <i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
-    </button>
+    {{> ./components/icon_button id="clear_status_message_button" squared=true intent="neutral" icon="close" }}
 </div>
 <ul class="user-status-options modal-options-list">
     {{#each default_status_messages_and_emoji_info}}
diff --git a/web/templates/status_emoji_selector.hbs b/web/templates/status_emoji_selector.hbs
index 94a623b1e0..be61edda9a 100644
--- a/web/templates/status_emoji_selector.hbs
+++ b/web/templates/status_emoji_selector.hbs
@@ -7,5 +7,5 @@
         <div class="emoji selected-emoji emoji-{{selected_emoji.emoji_code}}"></div>
     {{/if}}
 {{else}}
-    <a type="button" class="smiley-icon show zulip-icon zulip-icon-smile"></a>
+    <span class="smiley-icon show zulip-icon zulip-icon-smile"></span>
 {{/if}}