--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,16 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
   --toolbarbutton-active-background: hsla(240,5%,5%,.15);
 
+  --toolbarbutton-hover-transition-duration: 150ms;
+  --toolbarbutton-active-transition-duration: 10ms;
+
   --toolbarbutton-inner-padding: 6px;
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
   /* This default value of --toolbarbutton-height is defined to prevent
@@ -105,17 +108,17 @@ toolbar .toolbarbutton-1 > menupopup.cui
 .findbar-button > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton),
 toolbar .toolbarbutton-1 > .toolbarbutton-icon,
 toolbar .toolbarbutton-1 > .toolbarbutton-text,
 toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
   padding: var(--toolbarbutton-inner-padding);
   border-radius: var(--toolbarbutton-border-radius);
   transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
+  transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
 toolbar .toolbarbutton-1 > .toolbarbutton-icon {
   /* horizontal padding + actual icon width */
   max-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
 }
 
 .bookmark-item > .toolbarbutton-menu-dropmarker,
@@ -173,17 +176,17 @@ toolbar .toolbarbutton-1:not([disabled=t
 
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
 toolbarbutton.bookmark-item[open="true"],
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
   background-color: var(--toolbarbutton-active-background);
-  transition-duration: 10ms;
+  transition-duration: var(--toolbarbutton-active-transition-duration);
   color: inherit;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 

--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -113,18 +113,16 @@
 #pageAction-urlbar-sendToDevice-fxa {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 /* URL bar and page action buttons */
 
 #page-action-buttons {
   -moz-box-align: center;
-  /* Add more space between the last icon and the urlbar's edge. */
-  margin-inline-end: 3px;
 }
 
 #pageActionSeparator {
   /* This draws the separator the same way that #urlbar-display-box draws its
      left and right borders, which end up looking like separators.  It might not
      be the best way in this case, but it makes sure that all these vertical
      lines in the urlbar look the same: same height, vertical position, etc. */
   border-inline-start: 1px solid var(--urlbar-separator-color);
@@ -153,28 +151,49 @@
 
 #userContext-icons,
 #urlbar-zoom-button {
   margin-left: 6px;
   margin-right: 6px;
 }
 
 .urlbar-icon {
-  padding: 0 6px;
-  /* 16x16 icon with border-box sizing */
   width: 28px;
-  height: 16px;
+  height: 28px;
+  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
+  padding: 6px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   color: inherit;
+  transition-property: background-color;
+  transition-duration: var(--toolbarbutton-hover-transition-duration);
+}
+
+:root[uidensity=compact] .urlbar-icon {
+  width: 24px;
+  height: 24px;
+  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
+  padding: 4px;
+}
+
+:root[uidensity=touch] .urlbar-icon {
+  width: 30px;
+  height: 30px;
+  /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
+  padding: 7px;
 }
 
 .urlbar-icon:hover {
-  fill-opacity: 0.8;
+  background-color: hsla(0,0%,80%,.4);
+}
+
+.urlbar-icon:hover:active {
+  background-color: hsla(0,0%,80%,.45);
+  transition-duration: var(--toolbarbutton-active-transition-duration);
 }
 
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/back.svg");
   width: 26px;
 }