diff --git a/web/shared/icons/user-group.svg b/web/shared/icons/user-group.svg
index 09a3dc56d2..c6d3e493aa 100644
--- a/web/shared/icons/user-group.svg
+++ b/web/shared/icons/user-group.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M10 1.335a3.332 3.332 0 1 1 0 6.663 3.332 3.332 0 0 1 0-6.663Zm2.002 3.332a2.002 2.002 0 1 0-4.004 0 2.002 2.002 0 0 0 4.004 0ZM12 9.335a3.332 3.332 0 0 1 3.332 3.332V14a.665.665 0 0 1-1.33 0v-1.333A2.002 2.002 0 0 0 12 10.665H8a2.002 2.002 0 0 0-2.002 2.002V14a.665.665 0 0 1-1.33 0v-1.333A3.332 3.332 0 0 1 8 9.335h4Zm-8.023.585a.665.665 0 0 1-.477.81 2.002 2.002 0 0 0-1.502 1.937V14a.665.665 0 1 1-1.33 0v-1.334a3.332 3.332 0 0 1 2.5-3.223.665.665 0 0 1 .81.477Zm1.191-8.478a.665.665 0 1 1 .33 1.289 2.002 2.002 0 0 0 0 3.878.665.665 0 0 1-.33 1.288 3.332 3.332 0 0 1 0-6.455Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="m 10.182226,0.72803666 a 3.6355726,3.6355726 0 1 1 0,7.27005394 3.6355726,3.6355726 0 0 1 0,-7.27005394 z m 2.184399,3.63557244 a 2.1843994,2.1843994 0 1 0 -4.3687987,0 2.1843994,2.1843994 0 0 0 4.3687987,0 z m -0.0022,5.0932932 a 3.6355726,3.6355726 0 0 1 3.635572,3.6355717 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 2.1843987,2.1843987 0 0 0 12.364442,10.908076 H 8.0000085 a 2.1843987,2.1843987 0 0 0 -2.1843986,2.184398 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 3.6355726,3.6355726 0 0 1 8.0000085,9.4569023 Z M 3.6104801,10.095201 A 0.72558695,0.72558695 0 0 1 3.0900216,10.978998 2.1843987,2.1843987 0 0 0 1.451177,13.092474 v 1.454448 a 0.725587,0.725587 0 1 1 -1.451174,0 V 13.091383 A 3.6355726,3.6355726 0 0 1 2.7277736,9.5747419 0.72558695,0.72558695 0 0 1 3.6115712,10.095201 Z M 4.90999,0.84478524 a 0.72589886,0.72589886 0 1 1 0.3600658,1.40643846 2.1843987,2.1843987 0 0 0 0,4.2313176 0.72558695,0.72558695 0 0 1 -0.3600658,1.4053474 3.6355726,3.6355726 0 0 1 0,-7.04310346 z"/>
 </svg>
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index f66c31c3e9..babea30558 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -385,7 +385,14 @@
 }
 
 .display_only_group_pill .zulip-icon-user-group {
-    font-size: 1.3571em; /* 19px at 14px / em */
+    /* Reserve the same square box for the user-group
+       icon as on pill images. */
+    height: var(--height-input-pill);
+    width: var(--height-input-pill);
+    /* Center the icon in the box using flex. */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 @keyframes shake {
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index de401d6677..68cd2adb2e 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -195,27 +195,22 @@
 
 /* For FontAwesome icons and zulip icons used in place of images for some users. */
 .typeahead-image {
-    font-size: 1.3571em; /* 19px at 14px em */
-    display: inline-block;
-    height: 1.1052em; /* 21px at 19px/1em */
-    width: 1.1052em; /* 21px at 19px/1em */
+    flex: 0 0 auto;
+    height: 1.3125em; /* 21px at 16px/1em */
+    width: 1.3125em; /* 21px at 16px/1em */
     border-radius: 4px;
 
-    text-align: center;
-
-    &.zulip-icon-user-group {
-        font-size: 1.3571em; /* 19px at 14px em */
-    }
-
     &.no-presence-circle {
-        /* 0.6875 * var(--base-font-size) is the width of presence
-        circle, no margin (-2px left margin + 2px right margin = 0px)
-        of the presence circle and 0.3571 * var(--base-font-size-px)
-        is gap between the presence circle and avatar.
-        Cannot directly use 0.6875em or 0.3571em
-        since font-size for user group icon is different from the
-        font size used to calculate presence circle width and gap. */
-        margin-left: calc((0.6875 + 0.3571) * var(--base-font-size-px));
+        /* 0.6875em at 16px/1em is the width of presence circle,
+           no margin (-2px left margin + 2px right margin = 0px),
+           and 0.3571  is the gap between the presence circle and
+           image avatars. */
+        margin-left: calc(0.6875em + 0.3571em);
+        /* To properly align icons within the 21px square box
+           defined on .typeahead-image, we establish a flexbox: */
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 }