diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index d2f5606ecd..474332c318 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -220,9 +220,9 @@ p.n-margin {
 .alert-zulip-logo,
 .top-messages-logo,
 .bottom-messages-logo {
-    width: 24px;
-    height: 24px;
-    margin: 0 auto 12px;
+    width: 1.7143em; /* 24px at 14px/em */
+    height: 1.7143em;
+    margin: 0 auto 0.8571em; /* 12px at 14px/em */
 
     & svg {
         & circle {
@@ -246,10 +246,6 @@ p.n-margin {
     /* Since padding under message header is not transparent
        we need to position it below the padding. */
     padding-top: var(--header-padding-bottom);
-    margin-bottom: 0;
-    /* To fit the logo inside the spinner. */
-    position: relative;
-    top: -2px;
 }
 
 /* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@@ -1201,13 +1197,20 @@ nav {
 #loading_newer_messages_indicator_box_container {
     position: absolute;
     left: 50%;
+
+    /* Override the base rules in app_components.css, which would require
+       coordination with loading.make_indicator */
+    .loading_indicator_spinner {
+        height: 2.7143em; /* 38px at 14px/em */
+        width: 2.7143em; /* 38px at 14px/em */
+    }
 }
 
 #loading_older_messages_indicator_box,
 #loading_newer_messages_indicator_box {
     position: relative;
-    left: -50%;
-    top: -43px;
+    left: -1.3571em; /* 50% of 38px = 19px at 14px/em */
+    top: -3.0714em; /* -43px at 14px/em */
     z-index: 1;
     border-radius: 6px;
 }