--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -54,16 +54,26 @@
 }
 
 #pocket-button-box[animate="true"] > #pocket-animatable-box {
   /* .urlbar-icon has width 28px. Each frame is 20px wide. Set margin-inline-start
      to be half the difference, 4px. */
   margin-inline-start: 4px;
 }
 
+:root[uidensity=compact] #pocket-button-box[animate="true"] > #pocket-animatable-box {
+  /* .urlbar-icon has width 24px in this case */
+  margin-inline-start: 2px;
+}
+
+:root[uidensity=touch] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 30px in this case */
+  margin-inline-start: 5px;
+}
+
 #pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
 #pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
 }
 
 #pocket-button-box[animate="true"],
 #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
   position: relative;

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -271,16 +271,26 @@
   /* Set the height to equal the height of each frame of the SVG. Must use
      min- and max- width and height due to bug 1379332. */
   min-width: 33px;
   max-width: 33px;
   min-height: 33px;
   max-height: 33px;
 }
 
+:root[uidensity=compact] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 24px in this case */
+  margin-inline-start: -4.5px;
+}
+
+:root[uidensity=touch] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 30px in this case */
+  margin-inline-start: -1.5px;
+}
+
 #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
   background-image: url("chrome://browser/skin/bookmark-animation.svg");
   background-size: auto;
   list-style-image: none;
   height: var(--toolbarbutton-height);
   min-height: 33px; /* Minimum height must be equal to the height of the SVG sprite */
   animation-name: bookmark-animation;
   animation-fill-mode: forwards;