diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
index 44e44e075f..60f42f2e56 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
@@ -328,10 +328,15 @@
         offset  (if (or (= size "s") (= size "m"))
                   (/ (- icon-size-m size-px) 2)
                   0)
+        box     (max icon-size-m size-px)
+        ;; The intrinsic size is expressed in rem (via a viewBox so the glyph
+        ;; scales with the box) so icons track the UI scale like the rest of the
+        ;; DS, instead of staying fixed while their scaled containers grow.
         props   (mf/spread-props props
                                  {:class [class (stl/css :icon)]
-                                  :width (max icon-size-m size-px)
-                                  :height (max icon-size-m size-px)})]
+                                  :viewBox (dm/str "0 0 " box " " box)
+                                  :width (dm/str (/ box 16.0) "rem")
+                                  :height (dm/str (/ box 16.0) "rem")})]
     [:> :svg props
      [:use {:href (dm/str "#icon-" icon-id)
             :x offset
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss
index 0db0002fbf..2d092fc418 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -42,7 +42,14 @@
   }
 
   &.hidden {
-    --toolbar-offset-y: -4px;
+    // Tighten the gap between the collapsed handle and the top ruler.
+    --toolbar-offset-y: -5px;
+
+    // With rulers visible, pin the collapsed handle to a fixed offset (px, not
+    // rem) so its gap to the unscaled ruler stays constant across UI scales.
+    &:not(.no-rulers) {
+      --toolbar-position-y: 28px;
+    }
 
     block-size: $sz-16;
     z-index: 1;