--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -59,18 +59,19 @@ panelmultiview[mainViewId=PanelUI-pocket
      `inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
   min-width: 20px;
   max-width: 20px;
   min-height: 16px;
   max-height: 16px;
 }
 
 #pocket-button-box > #pocket-animatable-box {
-  /* Match the 6px margin-inline-start of .urlbar-icon plus 1px for internal padding in the animation sprite. */
-  margin-inline-start: 7px;
+  /* .urlbar-icon has width 28px. Each frame is 20px wide. Set margin-inline-start
+     to be half the difference, 4px. */
+  margin-inline-start: 4px;
 }
 
 #pocket-button-box > #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"],

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -180,20 +180,19 @@
   fill: transparent;
   position: relative;
 }
 
 #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
   position: absolute;
   overflow: hidden;
   top: calc(50% - 16.5px); /* 16.5px is half the height of the sprite */
-  /* .urlbar-icon has width 22px. Each frame is 33px wide. Set margin-inline-start
-     to be half the difference, -5.5px, plus the 6px margin-inline-start of
-     .urlbar-icon, 6px. */
-  margin-inline-start: 0.5px;
+  /* .urlbar-icon has width 28px. Each frame is 33px wide. Set margin-inline-start
+     to be half the difference, -2.5px. */
+  margin-inline-start: -2.5px;
   /* 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;
 }