diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 167f45791f..067a588079 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -255,6 +255,7 @@
     --left-sidebar-max-width: calc(
         20.6429em - var(--left-sidebar-right-margin)
     );
+    --realm-logo-max-width: 12.5em; /* 200px at 16px em */
     /* Sidebar width is 1/3 of the screen at smaller
        sizes, but gets held to the left sidebar's max width.
        This is very useful for areas in the CSS codebase
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 37cf2d2504..5a3e2c8e64 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1068,7 +1068,7 @@ nav {
         .nav-logo {
             display: inline-block;
             height: 1.25em; /* 20px at 16px em */
-            max-width: 12.5em; /* 200px at 16px em */
+            max-width: var(--realm-logo-max-width);
 
             @media (height < $short_navbar_cutoff_height) {
                 height: 0.9375em; /* 15px at 16px em */