diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
index 445172abe8..31dc9149f6 100644
--- a/src/main/frontend/components/block.css
+++ b/src/main/frontend/components/block.css
@@ -69,6 +69,12 @@
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
+    /* Optical lift: `vertical-align: middle` centers on the parent's
+       x-height middle, but readers compare the icon against the cap-
+       height middle (~2px higher in Inter at body size). The pure
+       geometric answer reads as "icon sags." translateY corrects
+       the optical center without disturbing layout flow. */
+    transform: translateY(-1px);
     padding-left: 1px;
 
     &.as-emoji {
@@ -103,6 +109,21 @@
     height: 16px;
   }
 
+  /* Emoji glyphs render via the native font (Apple Color Emoji etc.),
+     whose bounding box is ~32% taller than `font-size`. emoji-mart's
+     `<em-emoji size="20">` sets `font-size: 20px` on its inner span
+     and the visual lands at ~26.5px — overflowing the 20×20 slot.
+     Clamp the inner span's font-size to land at ~18-19px visual,
+     comfortably inside the slot. Both selectors are load-bearing:
+     emoji-mart's inline `font-size` on the descendant span wins over
+     `!important` on the ancestor, so we target both directly. (Same
+     pattern as icon.css:2214 for the customize-band's compact state.) */
+  .icon-cp-container:not(.photo-icon) em-emoji,
+  .icon-cp-container:not(.photo-icon) em-emoji span {
+    font-size: 16px !important;
+    line-height: 1 !important;
+  }
+
   .icon-emoji-wrap em-emoji,
   .icon-cp-container .ui__icon {
     display: inline-flex;
diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css
index d953213cfc..2df5353724 100644
--- a/src/main/frontend/components/container.css
+++ b/src/main/frontend/components/container.css
@@ -137,6 +137,16 @@
       max-width: 20px;
       overflow: hidden;
     }
+
+    /* Emoji clamp — see block.css's `.page-ref ... em-emoji` rule for
+       the rationale (emoji-mart inline-styles win over `!important` on
+       the ancestor, so target both em-emoji and its descendant span).
+       At font-size 14 the glyph lands ~18-19px, fitting inside the
+       20×20 tile without bleeding into adjacent rows. */
+    em-emoji, em-emoji span {
+      font-size: 16px !important;
+      line-height: 1 !important;
+    }
   }
 
   .icon-cp-container {