--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1222,17 +1222,17 @@
             <image id="sidebar-switcher-arrow"/>
           </toolbarbutton>
           <image id="sidebar-throbber"/>
 # To ensure the button label's intrinsic width doesn't expand the sidebar
 # if the label is long, the button needs flex=1.
 # To ensure the button doesn't expand unnecessarily for short labels, the
 # spacer should significantly out-flex the button.
           <spacer flex="1000"/>
-          <toolbarbutton id="sidebar-close" class="tabbable" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="SidebarUI.hide();"/>
+          <toolbarbutton id="sidebar-close" class="close-icon tabbable" tooltiptext="&sidebarCloseButton.tooltip;" oncommand="SidebarUI.hide();"/>
         </sidebarheader>
         <browser id="sidebar" flex="1" autoscroll="false" disablehistory="true" disablefullscreen="true"
                   style="min-width: 14em; width: 18em; max-width: 36em;" tooltip="aHTMLTooltip"/>
       </vbox>
 
       <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" hidden="true"/>
       <vbox id="appcontent" flex="1">
         <notificationbox id="high-priority-global-notificationbox" notificationside="top"/>

--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -63,44 +63,41 @@
 #onboarding-overlay-dialog,
 .onboarding-hidden,
 #onboarding-tour-sync-page[data-login-state=logged-in] .show-on-logged-out,
 #onboarding-tour-sync-page[data-login-state=logged-out] .show-on-logged-in {
   display: none;
 }
 
 .onboarding-close-btn {
-   position: absolute;
-   top: 15px;
-   offset-inline-end: 15px;
-   cursor: pointer;
-   width: 16px;
-   height: 16px;
-   padding: 12px;
-   border: none;
-   background: var(--onboarding-overlay-dialog-background-color);
+  position: absolute;
+  top: 15px;
+  offset-inline-end: 15px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: none;
+  padding: 0;
  }
 
 .onboarding-close-btn::before {
-  content: url(chrome://browser/skin/sidebar/close.svg);
-  display: block;
-  margin-top: -8px;
-  margin-inline-start: -8px;
+  content: url(chrome://global/skin/icons/close.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
 }
 
-.onboarding-close-btn:hover,
-#onboarding-notification-close-btn:hover {
-  background-color: rgba(204, 204, 204, 0.6);
+.onboarding-close-btn:hover::before {
+  fill-opacity: 0.1;
 }
 
 #onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
-  --onboarding-overlay-dialog-background-color: #f5f5f7;
   width: 960px;
   height: 510px;
-  background: var(--onboarding-overlay-dialog-background-color);
+  background: #f5f5f7;
   border: 1px solid rgba(9, 6, 13, 0.1); /* #09060D, 0.1 opacity */
   border-radius: 3px;
   position: relative;
   margin: 0 calc(50% - 480px);
   top: calc(50% - 255px);
   display: grid;
   grid-template-rows: [dialog-start] 70px [page-start] 1fr [footer-start] 30px [dialog-end];
   grid-template-columns: [dialog-start] 230px [page-start] 1fr [dialog-end];
@@ -490,17 +487,16 @@
   top: 0;
   offset-inline-start: 73px;
   line-height: calc(var(--height) - var(--vpadding) * 2);
   border-radius: calc(var(--height) / 2);
   padding: var(--vpadding) 10px;
 }
 
 #onboarding-notification-close-btn {
-  background: var(--onboarding-notification-bar-background-color);
   position: absolute;
   offset-block-start: 50%;
   offset-inline-end: 34px;
   transform: translateY(-50%);
 }
 
 #onboarding-notification-message-section {
   height: 100%;

--- a/browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css
+++ b/browser/extensions/shield-recipe-client/skin/osx/Heartbeat.css
@@ -4,21 +4,8 @@
 
 /* Notification overrides for Heartbeat UI */
 
 notification.heartbeat {
   background-image: linear-gradient(-179deg, #FBFBFB 0%, #EBEBEB 100%) !important;
   border-bottom: 1px solid #C1C1C1 !important;
   height: 40px;
 }
-
-/* In themes/osx/global/notification.css the close icon is inverted because notifications
-   on OSX are usually dark. Heartbeat is light, so override that behaviour. */
-
-notification.heartbeat[type="info"] .close-icon:not(:hover) {
-  -moz-image-region: rect(0, 16px, 16px, 0) !important;
-}
-
-@media (min-resolution: 2dppx) {
-  notification.heartbeat[type="info"] .close-icon:not(:hover) {
-    -moz-image-region: rect(0, 32px, 32px, 0) !important;
-  }
-}

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1018,30 +1018,16 @@ html|span.ac-emphasize-text-url {
 
 /* Tab drag and drop */
 .tab-drop-indicator {
   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
   margin-bottom: -9px;
   z-index: 3;
 }
 
-/* Tab close button */
-.tab-close-button:not([selected]):not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48);
-}
-
-.tab-close-button:not(:hover):-moz-lwtheme-brighttext,
-#TabsToolbar[brighttext] .tab-close-button:not([selected]):not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
-.tab-close-button:not(:hover):-moz-lwtheme-darktext {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80);
-}
-
 /* Tab bar scroll arrows */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
 .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon {
   -moz-appearance: none;
 }
 
 /* All tabs menupopup */
@@ -1097,21 +1083,16 @@ toolbarbutton.chevron > .toolbarbutton-i
   border-top-left-radius: .3em;
   margin-left: 1em;
 }
 
 %include ../shared/fullscreen/warning.inc.css
 %include ../shared/ctrlTab.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
-notification.pluginVulnerable > .notification-inner > .messageCloseButton:not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
-
 %include downloads/indicator.css
 
 .gcli-panel {
   padding: 0;
 }
 
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   color: hsl(210,11%,16%);
@@ -1169,21 +1150,16 @@ notification.pluginVulnerable > .notific
 #main-window[customize-entered] #TabsToolbar {
   -moz-appearance: none;
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
 }
 %endif
 
-/* The :hover:active style from toolkit doesn't seem to work in this panel so just use :active. */
-.customization-tipPanel-closeBox > .close-icon:active {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
-}
-
 /* End customization mode */
 
 
 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
   width: 40px;
 }
 

--- a/browser/themes/linux/compacttheme.css
+++ b/browser/themes/linux/compacttheme.css
@@ -10,22 +10,16 @@
   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
 }
 
-.findbar-closebutton:-moz-lwtheme-brighttext:not(:hover),
-#sidebar-header > .close-icon:-moz-lwtheme-brighttext:not(:hover),
-.tab-close-button[selected]:not(:hover) {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
-}
-
 /* The menubar and tabs toolbar should match the devedition theme */
 #TabsToolbar,
 #toolbar-menubar {
   -moz-appearance: none !important;
 }
 #main-menubar {
   color: var(--chrome-color);
 }

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1538,32 +1538,21 @@ toolbarbutton.chevron > .toolbarbutton-m
  * In-tab close button
  */
 
 .tab-close-button > .toolbarbutton-icon {
   margin-inline-end: 0px !important;
 }
 
 .tab-close-button {
-  -moz-appearance: none;
   border: none !important;
   background: none;
   cursor: default;
 }
 
-#TabsToolbar[brighttext] .tab-close-button.close-icon:not([selected=true]):not(:hover) {
-  -moz-image-region: rect(0, 64px, 16px, 48px);
-}
-
-@media (min-resolution: 2dppx) {
-  #TabsToolbar[brighttext] .tab-close-button.close-icon:not([selected=true]):not(:hover) {
-    -moz-image-region: rect(0, 128px, 32px, 96px);
-  }
-}
-
 /* Bookmarks toolbar */
 #PlacesToolbarDropIndicator {
   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
 }
 
 /* Bookmark drag and drop styles */
 
 .bookmark-item[dragover-into="true"] {

--- a/browser/themes/shared/customizableui/customizeTip.inc.css
+++ b/browser/themes/shared/customizableui/customizeTip.inc.css
@@ -61,17 +61,15 @@
   cursor: pointer;
 }
 
 .customization-tipPanel-link > .button-box > .button-text {
   margin: 0 !important;
 }
 
 .customization-tipPanel-closeBox > .close-icon {
-  -moz-appearance: none;
-  border: 0;
   margin-inline-end: -25px;
 }
 
 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
 }

--- a/browser/themes/shared/incontentprefs-old/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs-old/preferences.inc.css
@@ -332,23 +332,20 @@ description > html|a {
 }
 
 .dialogTitle {
   text-align: center;
   -moz-user-select: none;
 }
 
 .close-icon {
-  background-color: transparent !important;
   border: none;
-  box-shadow: none;
-  padding: 0;
-  height: auto;
-  min-height: 16px;
+  background: none !important;
   min-width: 0;
+  min-height: auto;
 }
 
 .dialogBox > .groupbox-body {
   -moz-appearance: none;
   padding: 20px;
 }
 
 .dialogFrame {

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -365,23 +365,20 @@ groupbox {
 }
 
 .dialogTitle {
   text-align: center;
   -moz-user-select: none;
 }
 
 .close-icon {
-  background-color: transparent !important;
   border: none;
-  box-shadow: none;
-  padding: 0;
-  height: auto;
-  min-height: 16px;
+  background: none !important;
   min-width: 0;
+  min-height: auto;
 }
 
 .dialogBox > .groupbox-body {
   -moz-appearance: none;
   padding: 20px;
 }
 
 .dialogFrame {

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -212,17 +212,16 @@
   skin/classic/browser/searchReset.css                         (../shared/searchReset.css)
   skin/classic/browser/badge-add-engine.png                    (../shared/search/badge-add-engine.png)
   skin/classic/browser/badge-add-engine@2x.png                 (../shared/search/badge-add-engine@2x.png)
   skin/classic/browser/search-indicator-badge-add.png          (../shared/search/search-indicator-badge-add.png)
   skin/classic/browser/search-indicator-badge-add@2x.png       (../shared/search/search-indicator-badge-add@2x.png)
   skin/classic/browser/search-indicator-magnifying-glass.svg   (../shared/search/search-indicator-magnifying-glass.svg)
   skin/classic/browser/search-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
   skin/classic/browser/gear.svg                                (../shared/search/gear.svg)
-  skin/classic/browser/sidebar/close.svg                       (../shared/sidebar/close.svg)
   skin/classic/browser/tabbrowser/connecting.png               (../shared/tabbrowser/connecting.png)
   skin/classic/browser/tabbrowser/connecting@2x.png            (../shared/tabbrowser/connecting@2x.png)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
   skin/classic/browser/tabbrowser/newtab.svg                   (../shared/tabbrowser/newtab.svg)
 #ifdef MOZ_PHOTON_THEME
   skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
 #endif
   skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)

--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -44,56 +44,45 @@
 
 #sidebar-title {
   margin: 0;
   padding: 0;
   padding-inline-start: 8px;
   padding-inline-end: 4px;
 }
 
-#sidebar-switcher-arrow,
-#sidebar-close > .toolbarbutton-icon {
+#sidebar-switcher-arrow {
   -moz-context-properties: fill;
   fill: currentColor;
   opacity: 0.8;
 }
 
 #sidebar-switcher-arrow {
   list-style-image: url(chrome://browser/skin/arrow-dropdown-12.svg);
   width: 12px;
   height: 12px;
 }
 
-#sidebar-close {
-  -moz-appearance: none;
-  list-style-image: url(chrome://browser/skin/sidebar/close.svg);
-  margin: 0;
-  padding: 4px;
-  border-radius: 4px;
-}
-
 #sidebar-switcher-target {
   -moz-appearance: none;
   color: inherit;
   margin-inline-end: 4px;
   border-radius: 4px;
   border: 1px solid transparent;
   padding: 2px 4px;
 }
 
-#sidebar-switcher-target:hover,
-#sidebar-close:hover {
+#sidebar-switcher-target:hover {
   background: hsla(240, 5%, 5%, 0.05);
 }
 
 #sidebar-switcher-target:hover {
   border-color: rgba(0, 0, 0, 0.2);
 }
 
-#sidebar-close:hover:active,
 #sidebar-switcher-target:hover:active,
 #sidebar-switcher-target.active {
   background: hsla(240, 5%, 5%, 0.1);
 }
 
 #sidebar-switcher-target:hover:active,
 #sidebar-switcher-target.active {
   border-color: rgba(0, 0, 0, 0.25);

deleted file mode 100644
--- a/browser/themes/shared/sidebar/close.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M9.061,8l3.47-3.47A.75.75,0,0,0,11.47,3.47L8,6.939,4.53,3.47A.75.75,0,0,0,3.47,4.53L6.939,8,3.47,11.47A.75.75,0,1,0,4.53,12.53L8,9.061l3.47,3.47A.75.75,0,0,0,12.53,11.47Z"/>
-</svg>

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1384,31 +1384,16 @@ treechildren.searchbar-treebody::-moz-tr
 #TabsToolbar {
   min-height: 0;
   padding: 0;
   margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); /* overlap the nav-bar's top border */
 }
 
 %include ../shared/tabs.inc.css
 
-/* Invert the unhovered close tab icons on bright-text tabs */
-@media not all and (min-resolution: 1.1dppx) {
-  .tab-close-button:-moz-lwtheme-brighttext,
-  #TabsToolbar[brighttext] .tab-close-button:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  .tab-close-button:-moz-lwtheme-brighttext,
-  #TabsToolbar[brighttext] .tab-close-button:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
 /* tabbrowser-tab focus ring */
 .tabbrowser-tab:focus > .tab-stack > .tab-content {
   outline: 1px dotted;
   outline-offset: -6px;
 }
 
 /* Tab DnD indicator */
 .tab-drop-indicator {
@@ -1686,27 +1671,16 @@ notification[value="translation"] {
   */
   margin-left: 1em;
 }
 
 %include ../shared/fullscreen/warning.inc.css
 %include ../shared/ctrlTab.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 
-notification.pluginVulnerable > .notification-inner > .messageCloseButton {
-  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  notification.pluginVulnerable > .notification-inner > .messageCloseButton {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
-
 %include downloads/indicator.css
 
 /* Error counter */
 
 #developer-toolbar-toolbox-button[error-count]:before {
   color: #FDF3DE;
   min-width: 16px;
   text-shadow: none;

--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -33,44 +33,16 @@
 #TabsToolbar::after {
   display: none;
 }
 
 #toolbar-menubar {
   text-shadow: none !important;
 }
 
-.findbar-closebutton:-moz-lwtheme-brighttext,
-/* Tab styling - make sure to use an inverted icon for the selected tab
-   (brighttext only covers the unselected tabs) */
-.tab-close-button[selected=true] {
-  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .findbar-closebutton:-moz-lwtheme-brighttext,
-  .tab-close-button[selected=true] {
-    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
-  }
-}
-
-/* Override tab close icon (to disable inversion) for better contrast with
-   light theme on Windows 7 Classic theme. */
-@media not all and (min-resolution: 1.1dppx) {
-  #TabsToolbar[brighttext] .tab-close-button:-moz-lwtheme-darktext:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close.png");
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #TabsToolbar[brighttext] .tab-close-button:-moz-lwtheme-darktext:not([selected="true"]) {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-  }
-}
-
 @media (-moz-os-version: windows-win7),
        (-moz-os-version: windows-win8) {
 %ifndef MOZ_PHOTON_THEME
   :root {
     --space-above-tabbar: 15px;
   }
 %endif
   /* It'd be nice if there was an element in the scrollbox's inner content

--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -59,21 +59,16 @@
   filter: invert(1);
 }
 
 .developer-toolbar-button > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
-/* The toolkit close button is low contrast in the dark theme so invert it. */
-#browser-bottombox[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
-  filter: invert(1);
-}
-
 #developer-toolbar-toolbox-button {
   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
 #developer-toolbar-toolbox-button > label {
   display: none;
 }

--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -28,19 +28,16 @@ findbar[noanim] {
 
 .findbar-container {
   padding-inline-start: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .findbar-closebutton {
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
   margin: 0 8px;
 }
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
   border: 1px solid ThreeDShadow;

--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -300,24 +300,9 @@ popupnotificationcontent {
 }
 
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
 }
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  -moz-appearance: none;
-  height: 16px;
-  width: 16px;
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-.close-icon:hover {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
-}
-
-.close-icon:hover:active {
-  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
-}
+%include ../../shared/close-icon.inc.css
\ No newline at end of file

deleted file mode 100644
--- a/toolkit/themes/linux/global/icons/close.svg
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="16px" viewBox="0 0 96 16">
-  <defs>
-    <style>
-      /* X Glyph Styles */
-      .glyphShape-style-foreground {
-        fill: ButtonText;
-        fill-opacity: .8;
-      }
-      .glyphShape-style-background {
-        fill: -moz-MenuBarText;
-        fill-opacity: .8;
-      }
-      .glyphShape-style-hover {
-        fill: #fff;
-      }
-      .glyphShape-style-hover-shadow {
-        fill: #b32c12;
-      }
-      .glyphShape-style-hover-active {
-        fill: #fff;
-        fill-opacity: .8;
-      }
-      .glyphShape-style-hover-active-shadow {
-        fill: #99260f;
-      }
-      .glyphShape-style-LWT-bright {
-        fill: #fff;
-        fill-opacity: .8;
-      }
-      .glyphShape-style-LWT-dark {
-        fill: #000;
-        fill-opacity: .8;
-      }
-      /* Close Button Background Styles */
-      .icon-background-hover {
-        fill: #d93616;
-      }
-      .icon-background-hover-active {
-        fill: #b32c12;
-      }
-    </style>
-    <polygon id="glyphShape-close" points="4,5.5 5.5,4 8,6.5 10.5,4 12,5.5 9.5,8 12,10.5 10.5,12 8,9.5 5.5,12 4,10.5 6.5,8"/>
-    <polygon id="glyphShape-close-topHighlight" points="4,5.5 5.5,4 8,6.5 10.5,4 12,5.5 9.5,8 11.5,6 10.5,5 8,7.5 5.5,5 4.5,6"/>
-    <rect id="glyphShape-background" x="2" y="2" rx="2" width="12" height="12"/>
-  </defs>
-  <g id="icon-closeForeground-default">
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-foreground" />
-    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-foreground" />
-  </g>
-  <g id="icon-close-hover" transform="translate(16)">
-    <use xlink:href="#glyphShape-background" class="icon-background-hover" />
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-shadow" transform="translate(0,1)" />
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover" />
-  </g>
-  <g id="icon-close-hover-active" transform="translate(32)">
-    <use xlink:href="#glyphShape-background" class="icon-background-hover-active" />
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-active-shadow" transform="translate(0,1)" />
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-hover-active" />
-  </g>
-  <g id="icon-closeBackground-default" transform="translate(48)">
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-background" />
-    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-background" />
-  </g>
-  <g id="icon-close-LWT-bright" transform="translate(64)">
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-LWT-bright" />
-    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-LWT-bright" />
-  </g>
-  <g id="icon-close-LWT-dark" transform="translate(80)">
-    <use xlink:href="#glyphShape-close" class="glyphShape-style-LWT-dark" />
-    <use xlink:href="#glyphShape-close-topHighlight" class="glyphShape-style-LWT-dark" />
-  </g>
-</svg>

--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -38,17 +38,16 @@ toolkit.jar:
    skin/classic/global/arrow/arrow-dn-hov.gif                  (arrow/arrow-dn-hov.gif)
    skin/classic/global/arrow/arrow-up-hov.gif                  (arrow/arrow-up-hov.gif)
 
    skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
    skin/classic/global/icons/autoscroll.png                    (icons/autoscroll.png)
    skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
    skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
    skin/classic/global/icons/Close.gif                         (icons/Close.gif)
-   skin/classic/global/icons/close.svg                         (icons/close.svg)
    skin/classic/global/icons/Minimize.gif                      (icons/Minimize.gif)
    skin/classic/global/icons/resizer.png                       (icons/resizer.png)
    skin/classic/global/icons/Restore.gif                       (icons/Restore.gif)
    skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 
 *  skin/classic/global/in-content/common.css                   (in-content/common.css)
 *  skin/classic/global/in-content/info-pages.css               (in-content/info-pages.css)
    skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)

--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -57,22 +57,16 @@ label.findbar-find-fast:-moz-lwtheme,
   margin-inline-start: 4px;
   padding-inline-start: 0;
   padding-inline-end: 8px;
   border: none;
   /* make sure the closebutton is displayed as the first element in the bar: */
   -moz-box-ordinal-group: 0;
 }
 
-@media (min-resolution: 2dppx) {
-  .findbar-closebutton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 .findbar-find-next,
 .findbar-find-previous,
 .findbar-highlight,
 .findbar-case-sensitive,
 .findbar-entire-word {
   -moz-appearance: none;
   border-radius: 10000px;
   border: @roundButtonBorder@;

--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -356,41 +356,9 @@ popupnotificationcontent {
 }
 
 .popup-internal-box > autorepeatbutton[disabled="true"] {
   visibility: collapse;
 }
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.close-icon:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-.close-icon:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
-@media (min-resolution: 2dppx) {
-  .close-icon > .button-icon,
-  .close-icon > .button-box > .button-icon,
-  .close-icon > .toolbarbutton-icon {
-    width: 16px;
-  }
-
-  .close-icon {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
-  }
-}
+%include ../../shared/close-icon.inc.css
\ No newline at end of file

deleted file mode 100644
index 9bba044ce5de824ebcdd12e4e2c4b3e96cfa0448..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100755
index 01c5ef4232921e661274adc179bcb42b62802091..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -74,18 +74,16 @@ toolkit.jar:
   skin/classic/global/icons/autocomplete-search.svg                  (icons/autocomplete-search.svg)
   skin/classic/global/icons/autoscroll.png                           (icons/autoscroll.png)
   skin/classic/global/icons/blacklist_favicon.png                    (icons/blacklist_favicon.png)
   skin/classic/global/icons/blacklist_64.png                         (icons/blacklist_64.png)
   skin/classic/global/icons/chevron.png                              (icons/chevron.png)
   skin/classic/global/icons/chevron-inverted.png                     (icons/chevron-inverted.png)
   skin/classic/global/icons/chevron@2x.png                           (icons/chevron@2x.png)
   skin/classic/global/icons/chevron-inverted@2x.png                  (icons/chevron-inverted@2x.png)
-  skin/classic/global/icons/close.png                                (icons/close.png)
-  skin/classic/global/icons/close@2x.png                             (icons/close@2x.png)
   skin/classic/global/icons/glyph-dropdown.png                       (icons/glyph-dropdown.png)
   skin/classic/global/icons/glyph-dropdown@2x.png                    (icons/glyph-dropdown@2x.png)
   skin/classic/global/icons/menulist-dropmarker.png                  (icons/menulist-dropmarker.png)
   skin/classic/global/icons/notfound.png                             (icons/notfound.png)
   skin/classic/global/icons/panebutton-active.png                    (icons/panebutton-active.png)
   skin/classic/global/icons/panebutton-inactive.png                  (icons/panebutton-inactive.png)
   skin/classic/global/icons/panel-dropmarker.png                     (icons/panel-dropmarker.png)
   skin/classic/global/icons/resizer.png                              (icons/resizer.png)

--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -1,17 +1,17 @@
 /* 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/. */
 
 %include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 notification {
-  padding: 3px 3px 4px;
+  padding: 2px 3px 3px;
   text-shadow: none;
 }
 
 notification[type="info"] {
   color: rgba(255,255,255,0.95);
   background: linear-gradient(#606060, #404040);
   border-top: 1px solid #2a2a2a;
   border-bottom: 1px solid #2a2a2a;
@@ -72,42 +72,16 @@ notificationbox[notificationside="bottom
 
 .messageCloseButton {
   -moz-appearance: none;
   padding: 0;
   margin: 0 2px;
   border: none;
 }
 
-/*
- Invert the close icon for @type=info since both are normally dark. It's unclear
- why !important is necessary here so remove it if it's no longer needed.
-*/
-notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-  -moz-image-region: rect(0, 64px, 16px, 48px) !important;
-}
-
-@media (min-resolution: 2dppx) {
-  notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-    -moz-image-region: rect(0, 128px, 32px, 96px) !important;
-  }
-}
-
-.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
-  border-radius: 10000px;
-  box-shadow: 0 0 2px 1px -moz-mac-focusring,
-              0 0 0 2px -moz-mac-focusring inset;
-}
-
-@media (min-resolution: 2dppx) {
-  .messageCloseButton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 %include ../../shared/popupnotification.inc.css
 
 .popup-notification-button:-moz-focusring {
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 .popup-notification-warning {

new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/close-icon.inc.css
@@ -0,0 +1,28 @@
+/* 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/. */
+
+.close-icon {
+  -moz-appearance: none;
+  -moz-context-properties: fill, fill-opacity;
+  list-style-image: url(chrome://global/skin/icons/close.svg);
+  color: inherit;
+  fill: currentColor;
+  fill-opacity: 0;
+}
+
+.close-icon:hover {
+  fill-opacity: 0.1;
+}
+
+.close-icon:hover:active {
+  fill-opacity: 0.2;
+}
+
+.close-icon > .button-icon,
+.close-icon > .button-box > .button-icon,
+.close-icon > .toolbarbutton-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+}

new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/close.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M0 0h20v20H0z"/>
+  <path fill="context-fill" d="M11.06 10l3.47-3.47a.75.75 0 0 0-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 1 0-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 1 0 1.06 1.06L10 11.06l3.47 3.47a.75.75 0 0 0 1.06-1.06z"/>
+</svg>

--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -23,16 +23,17 @@ toolkit.jar:
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
   skin/classic/global/filters.svg                          (../../shared/filters.svg)
   skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
   skin/classic/global/scale.css                            (../../shared/scale.css)
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
+  skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)

--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -35,17 +35,16 @@ findbar[noanim] {
   padding-bottom: 4px;
 }
 
 .findbar-closebutton {
   margin-inline-start: 4px;
   padding-inline-start: 0;
   padding-inline-end: 8px;
   border: none;
-  -moz-appearance: none;
 }
 
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
   border: 1px solid ThreeDShadow;

--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -328,75 +328,9 @@ popupnotificationcontent {
   background-position: right bottom;
 %else
   background-position: left bottom;
 %endif
 }
 
 /* :::::: Close button icons ::::: */
 
-.close-icon {
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  -moz-image-region: rect(0, 20px, 20px, 0);
-}
-
-.close-icon:hover {
-  -moz-image-region: rect(0, 40px, 20px, 20px);
-}
-
-.close-icon:hover:active {
-  -moz-image-region: rect(0, 60px, 20px, 40px);
-}
-
-.close-icon > .button-icon,
-.close-icon > .button-box > .button-icon,
-.close-icon > .toolbarbutton-icon {
-  width: 20px;
-}
-
-@media (-moz-os-version: windows-win7) {
-  .close-icon {
-    -moz-image-region: rect(0, 16px, 16px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-
-  .close-icon > .button-icon,
-  .close-icon > .button-box > .button-icon,
-  .close-icon > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  .close-icon {
-    list-style-image: url("chrome://global/skin/icons/close@2x.png");
-    -moz-image-region: rect(0, 40px, 40px, 0);
-  }
-
-  .close-icon:hover {
-    -moz-image-region: rect(0, 80px, 40px, 40px);
-  }
-
-  .close-icon:hover:active {
-    -moz-image-region: rect(0, 120px, 40px, 80px);
-  }
-
-  @media (-moz-os-version: windows-win7) {
-    .close-icon {
-      -moz-image-region: rect(0, 32px, 32px, 0);
-    }
-
-    .close-icon:hover {
-      -moz-image-region: rect(0, 64px, 32px, 32px);
-    }
-
-    .close-icon:hover:active {
-      -moz-image-region: rect(0, 96px, 32px, 64px);
-    }
-  }
-}
+%include ../../shared/close-icon.inc.css

deleted file mode 100644
index 68596a3076a050d5171f466e870a31da06e06335..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index eec52e6d1341a998de3dbbd05e147267f57c853c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 0e815805d60948f01219741611ad0150e8671ab5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 79d6e872c658d95710be1830f16ebf6f0f60c38d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index ea6ada49e63e0df53ea3c2edcc83844de0572f03..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index c25a64a4b08ef76dea0d771c4b1974173d674083..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 1a79a875b76afccbbdb8303f3e707fc53153962b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 3cc9ea2a7401b07ffec748c562d0a36a7b7ca87c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -34,25 +34,17 @@ toolkit.jar:
 * skin/classic/global/tree.css
   skin/classic/global/alerts/alert.css                     (alerts/alert.css)
   skin/classic/global/arrow/panelarrow-horizontal.svg      (arrow/panelarrow-horizontal.svg)
   skin/classic/global/arrow/panelarrow-vertical.svg        (arrow/panelarrow-vertical.svg)
   skin/classic/global/dirListing/folder.png                (dirListing/folder.png)
   skin/classic/global/dirListing/up.png                    (dirListing/up.png)
   skin/classic/global/icons/blacklist_favicon.png          (icons/blacklist_favicon.png)
   skin/classic/global/icons/blacklist_large.png            (icons/blacklist_large.png)
-  skin/classic/global/icons/close.png                      (icons/close.png)
-  skin/classic/global/icons/close@2x.png                   (icons/close@2x.png)
   skin/classic/global/icons/Error.png                      (icons/Error.png)
-  skin/classic/global/icons/close-win7.png                 (icons/close-win7.png)
-  skin/classic/global/icons/close-win7@2x.png              (icons/close-win7@2x.png)
-  skin/classic/global/icons/close-inverted.png             (icons/close-inverted.png)
-  skin/classic/global/icons/close-inverted@2x.png          (icons/close-inverted@2x.png)
-  skin/classic/global/icons/close-inverted-win7.png        (icons/close-inverted-win7.png)
-  skin/classic/global/icons/close-inverted-win7@2x.png     (icons/close-inverted-win7@2x.png)
   skin/classic/global/icons/collapse.png                   (icons/collapse.png)
   skin/classic/global/icons/expand.png                     (icons/expand.png)
   skin/classic/global/icons/folder-item.png                (icons/folder-item.png)
   skin/classic/global/icons/information-16.png             (icons/information-16.png)
   skin/classic/global/icons/Landscape.png                  (icons/Landscape.png)
   skin/classic/global/icons/Portrait.png                   (icons/Portrait.png)
   skin/classic/global/icons/Print-preview.png              (icons/Print-preview.png)
   skin/classic/global/icons/Search-close.png               (icons/Search-close.png)
@@ -70,20 +62,16 @@ toolkit.jar:
   skin/classic/global/tree/twisty.svg                            (tree/twisty.svg)
   skin/classic/global/tree/twisty-preWin10.svg                   (tree/twisty-preWin10.svg)
 
 #if MOZ_BUILD_APP == browser
 [browser/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 #elif MOZ_SEPARATE_MANIFEST_FOR_THEME_OVERRIDES
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 #endif
-% override chrome://global/skin/icons/close.png                   chrome://global/skin/icons/close-win7.png            osversion<=6.1
-% override chrome://global/skin/icons/close@2x.png                chrome://global/skin/icons/close-win7@2x.png         osversion<=6.1
-% override chrome://global/skin/icons/close-inverted.png          chrome://global/skin/icons/close-inverted-win7.png   osversion<=6.1
-% override chrome://global/skin/icons/close-inverted@2x.png       chrome://global/skin/icons/close-inverted-win7@2x.png osversion<=6.1
 
 % override chrome://global/skin/tree/twisty.svg#clsd              chrome://global/skin/tree/twisty-preWin10.svg#clsd           osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#clsd-rtl          chrome://global/skin/tree/twisty-preWin10.svg#clsd-rtl       osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#clsd-hover        chrome://global/skin/tree/twisty-preWin10.svg#clsd-hover     osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#clsd-hover-rtl    chrome://global/skin/tree/twisty-preWin10.svg#clsd-hover-rtl osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#open              chrome://global/skin/tree/twisty-preWin10.svg#open           osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#open-rtl          chrome://global/skin/tree/twisty-preWin10.svg#open-rtl       osversion<=6.3
 % override chrome://global/skin/tree/twisty.svg#open-hover        chrome://global/skin/tree/twisty-preWin10.svg#open-hover     osversion<=6.3