Bug 1347543 - Use SVGs instead of PNGs for toolbar button icons. r=dao
☠☠ backed out by e804405fc256 ☠ ☠
authorNihanth Subramanya <nhnt11@gmail.com>
Fri, 28 Apr 2017 21:47:07 +0530
changeset 355615 9542b21d8f462f31727c82bbeb214935085f763c
parent 355614 fc8dfed5a5d245c7e2c5ae93daf41ce5710bf4eb
child 355616 de8bbf1eb20017db722ba77dbe3e187a4bbe359b
push id89712
push usernhnt11@gmail.com
push dateFri, 28 Apr 2017 19:40:45 +0000
treeherdermozilla-inbound@9542b21d8f46 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1347543
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1347543 - Use SVGs instead of PNGs for toolbar button icons. r=dao MozReview-Commit-ID: AdW6POOBeeh
browser/base/content/browser-places.js
browser/extensions/pocket/skin/osx/pocket.css
browser/extensions/pocket/skin/shared/pocket.css
browser/themes/linux/browser.css
browser/themes/linux/downloads/indicator.css
browser/themes/osx/browser.css
browser/themes/osx/downloads/indicator.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/downloads/indicator.inc.css
browser/themes/shared/icons/addons.svg
browser/themes/shared/icons/app.svg
browser/themes/shared/icons/back-large.svg
browser/themes/shared/icons/back.svg
browser/themes/shared/icons/bookmark-hollow.svg
browser/themes/shared/icons/bookmark.svg
browser/themes/shared/icons/bookmarksMenu.svg
browser/themes/shared/icons/characterEncoding.svg
browser/themes/shared/icons/chevron.svg
browser/themes/shared/icons/containers.svg
browser/themes/shared/icons/devTools-panel.svg
browser/themes/shared/icons/developer.svg
browser/themes/shared/icons/download.svg
browser/themes/shared/icons/edit-copy.svg
browser/themes/shared/icons/edit-cut.svg
browser/themes/shared/icons/edit-paste.svg
browser/themes/shared/icons/feed.svg
browser/themes/shared/icons/find.svg
browser/themes/shared/icons/forget.svg
browser/themes/shared/icons/forward.svg
browser/themes/shared/icons/fullscreen.svg
browser/themes/shared/icons/history.svg
browser/themes/shared/icons/home.svg
browser/themes/shared/icons/mail.svg
browser/themes/shared/icons/menu.svg
browser/themes/shared/icons/new-tab.svg
browser/themes/shared/icons/new-window.svg
browser/themes/shared/icons/open.svg
browser/themes/shared/icons/pocket.svg
browser/themes/shared/icons/print.svg
browser/themes/shared/icons/privateBrowsing.svg
browser/themes/shared/icons/refresh.svg
browser/themes/shared/icons/save.svg
browser/themes/shared/icons/settings.svg
browser/themes/shared/icons/share.svg
browser/themes/shared/icons/sidebars.svg
browser/themes/shared/icons/stop.svg
browser/themes/shared/icons/sync.svg
browser/themes/shared/icons/syncedTabs.svg
browser/themes/shared/icons/tabGroups.svg
browser/themes/shared/icons/webIDE.svg
browser/themes/shared/icons/webRTC-camera.svg
browser/themes/shared/icons/zoom-in.svg
browser/themes/shared/icons/zoom-out.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/social/social.inc.css
browser/themes/shared/toolbarbutton-icons.inc.css
browser/themes/windows/browser.css
browser/themes/windows/downloads/indicator.css
browser/themes/windows/places/organizer.css
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -1790,18 +1790,18 @@ var BookmarkingUI = {
       [translateX, translateY] = getCenteringTransformForRects(dropmarkerNotifierRect, dropmarkerRect);
       let dropmarkerTransform = "translate(" + translateX + ", " + translateY + ")";
 
       // Do all layout invalidation in one go:
       this.notifier.style.transform = starIconTransform;
       this.dropmarkerNotifier.style.transform = dropmarkerTransform;
 
       let dropmarkerAnimationNode = this.dropmarkerNotifier.firstChild;
-      dropmarkerAnimationNode.style.MozImageRegion = dropmarkerStyle.MozImageRegion;
       dropmarkerAnimationNode.style.listStyleImage = dropmarkerStyle.listStyleImage;
+      dropmarkerAnimationNode.style.fill = dropmarkerStyle.fill;
     }
 
     let isInOverflowPanel = this.button.getAttribute("overflowedItem") == "true";
     if (!isInOverflowPanel) {
       this.notifier.setAttribute("notification", "finish");
       this.button.setAttribute("notification", "finish");
       this.dropmarkerNotifier.setAttribute("notification", "finish");
     }
--- a/browser/extensions/pocket/skin/osx/pocket.css
+++ b/browser/extensions/pocket/skin/osx/pocket.css
@@ -1,42 +1,12 @@
 @import url("chrome://pocket-shared/skin/pocket.css");
 
 #pocket-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
   max-width: 18px;
   margin: 0;
 }
 
-#pocket-button[cui-areatype="toolbar"][open] {
-  -moz-image-region: rect(36px, 18px, 54px, 0);
-}
 
-@media (min-resolution: 2dppx) {
-  #panelMenu_pocket,
-  #menu_pocket,
-  #BMB_pocket {
-    list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16@2x.png");
-  }
-
-  #panelMenu_pocket > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
-@media not all and (min-resolution: 1.1dppx) {
-  #pocket-button:hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"]) {
-    -moz-image-region: rect(18px, 18px, 36px, 0);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pocket-button[cui-areatype="toolbar"][open] {
-    -moz-image-region: rect(72px, 36px, 108px, 0);
-  }
-
-  #pocket-button:hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"]) {
-    -moz-image-region: rect(36px, 36px, 72px, 0);
-  }
-}
 
 #PanelUI-pocketView[mainview=true] > .panel-subview-body > #pocket-panel-iframe {
   border-radius: var(--arrowpanel-border-radius);
 }
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -9,71 +9,16 @@ panelmultiview[mainViewId=PanelUI-pocket
 }
 
 #PanelUI-pocketView > .panel-subview-body,
 #PanelUI-pocketView {
   overflow: visible;
 }
 
 #pocket-button {
-  list-style-image: url("chrome://pocket/skin/Toolbar.png");
-  -moz-image-region: rect(0, 18px, 18px, 0);
+  list-style-image: url("chrome://browser/skin/pocket.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 toolbar[brighttext] #pocket-button {
-  list-style-image: url(chrome://pocket/skin/Toolbar-inverted.png);
-}
-
-@media not all and (min-resolution: 1.1dppx) {
-  #pocket-button[cui-areatype="menu-panel"],
-  toolbarpaletteitem[place="palette"] > #pocket-button {
-    list-style-image: url(chrome://pocket/skin/menuPanel.png);
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
-  #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
-    -moz-image-region: rect(32px, 32px, 64px, 0);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pocket-button[cui-areatype="menu-panel"],
-  toolbarpaletteitem[place="palette"] > #pocket-button {
-    list-style-image: url(chrome://pocket/skin/menuPanel@2x.png);
-    -moz-image-region: rect(0px, 64px, 64px, 0);
-  }
-
-  #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
-    -moz-image-region: rect(64px, 64px, 128px, 0);
-  }
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
-
-#pocket-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 18px, 18px, 0);
-}
-
-#pocket-button[cui-areatype="toolbar"][open] {
-  -moz-image-region: rect(18px, 18px, 36px, 0);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pocket-button {
-    list-style-image: url("chrome://pocket/skin/Toolbar@2x.png");
-  }
-
-  toolbar[brighttext] #pocket-button {
-    list-style-image: url("chrome://pocket/skin/Toolbar-inverted@2x.png");
-  }
-
-  #pocket-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 36px, 36px, 0px);
-  }
-
-  #pocket-button[cui-areatype="toolbar"][open] {
-    -moz-image-region: rect(36px, 36px, 72px, 0px);
-  }
-}
-
-#panelMenu_pocket,
-#menu_pocket,
-#BMB_pocket {
-  list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16.png");
-}
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -227,16 +227,17 @@ toolbarpaletteitem[place="palette"] > #p
 }
 
 #bookmarked-notification-dropmarker-anchor {
   z-index: -1;
   position: relative;
 }
 
 #bookmarked-notification-dropmarker-icon {
+  -moz-context-properties: fill;
   width: 18px;
   height: 18px;
   visibility: hidden;
 }
 
 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
   animation: animation-bookmarkAdded 800ms;
--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -16,43 +16,31 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-@media not all and (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360);
-  }
+#downloads-button {
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   width: 18px;
   height: 18px;
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
   width: 8px;
   min-width: 0;
@@ -76,46 +64,40 @@ toolbar[brighttext] #downloads-button[cu
 }
 
 #downloads-button[cui-areatype="toolbar"][attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 #downloads-button[cui-areatype="toolbar"][attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
   filter: none;
 }
 
 #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[cui-areatype="toolbar"][attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -532,16 +532,17 @@ toolbarpaletteitem[place="palette"] > #p
 }
 
 #bookmarked-notification-dropmarker-anchor {
   z-index: -1;
   position: relative;
 }
 
 #bookmarked-notification-dropmarker-icon {
+  -moz-context-properties: fill;
   width: 18px;
   height: 18px;
   visibility: hidden;
 }
 
 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
   animation: animation-bookmarkAdded 800ms;
@@ -724,338 +725,16 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   margin-inline-end: 1px;
   padding-inline-start: 5px;
   -moz-box-align: center;
 }
 
 %include ../shared/toolbarbutton-icons.inc.css
 %include ../shared/menupanel.inc.css
 
-@media not all and (min-resolution: 1.1dppx) {
-  #back-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 36px, 36px, 18px);
-  }
-
-  #forward-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 72px, 36px, 54px);
-  }
-
-  #home-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 126px, 36px, 108px);
-  }
-
-  #bookmarks-menu-button[buttonover]@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 144px, 36px, 126px);
-  }
-
-  #bookmarks-menu-button[starred][buttonover]@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 162px, 36px, 144px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    -moz-image-region: rect(0px, 630px, 18px, 612px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
-    -moz-image-region: rect(18px, 630px, 36px, 612px);
-  }
-
-  #history-panelmenu@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 180px, 36px, 162px);
-  }
-
-  #downloads-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 198px, 36px, 180px);
-  }
-
-  #add-ons-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 216px, 36px, 198px);
-  }
-
-  #open-file-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 234px, 36px, 216px);
-  }
-
-  #save-page-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 252px, 36px, 234px);
-  }
-
-  #sync-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 792px, 36px, 774px);
-  }
-
-  #containers-panelmenu@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 810px, 36px, 792px);
-  }
-
-  #feed-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 288px, 36px, 270px);
-  }
-
-  #social-share-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 306px, 36px, 288px);
-  }
-
-  #characterencoding-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 324px, 36px, 306px);
-  }
-
-  #new-window-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 342px, 36px, 324px);
-  }
-
-  #e10s-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 342px, 36px, 324px);
-  }
-
-  #webide-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 738px, 36px, 720px);
-  }
-
-  #new-tab-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 360px, 36px, 342px);
-  }
-
-  #privatebrowsing-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 378px, 36px, 360px);
-  }
-
-  #find-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 396px, 36px, 378px);
-  }
-
-  #print-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 414px, 36px, 396px);
-  }
-
-  #restore-button:hover:active:not([disabled="true"]),
-  #fullscreen-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 432px, 36px, 414px);
-  }
-
-  #developer-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 450px, 36px, 432px);
-  }
-
-  #preferences-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 468px, 36px, 450px);
-  }
-
-  #PanelUI-menu-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 486px, 36px, 468px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #cut-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 504px, 36px, 486px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #copy-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 522px, 36px, 504px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #paste-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 540px, 36px, 522px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 558px, 36px, 540px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 576px, 36px, 558px);
-  }
-
-  #nav-bar-overflow-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(18px, 612px, 36px, 594px);
-  }
-
-  #email-link-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 666px, 36px, 648px);
-  }
-
-  #sidebar-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 684px, 36px, 666px);
-  }
-
-  #panic-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(18px, 702px, 36px, 684px);
-  }
-
-  /**
-   * OSX has a unique set of icons when fullscreen is in the checked state.
-   */
-
-  #fullscreen-button[checked="true"]:not([cui-areatype="menu-panel"]) {
-    -moz-image-region: rect(36px, 432px, 54px, 414px);
-  }
-
-  #fullscreen-button[checked="true"]@toolbarButtonPressed@ {
-    -moz-image-region: rect(54px, 432px, 72px, 414px);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #back-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 72px, 72px, 36px);
-  }
-
-  #forward-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 144px, 72px, 108px);
-  }
-
-  #home-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 252px, 72px, 216px);
-  }
-
-  #bookmarks-menu-button@toolbarButtonPressed@[buttonover] {
-    -moz-image-region: rect(36px, 288px, 72px, 252px);
-  }
-
-  #bookmarks-menu-button@toolbarButtonPressed@[starred][buttonover] {
-    -moz-image-region: rect(36px, 324px, 72px, 288px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover:active:not([disabled="true"]) > .dropmarker-icon {
-    -moz-image-region: rect(36px, 1260px, 72px, 1224px);
-  }
-
-  #history-panelmenu@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 360px, 72px, 324px);
-  }
-
-  #downloads-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 396px, 72px, 360px);
-  }
-
-  #add-ons-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 432px, 72px, 396px);
-  }
-
-  #open-file-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 468px, 72px, 432px);
-  }
-
-  #save-page-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 504px, 72px, 468px);
-  }
-
-  #sync-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1584px, 72px, 1548px);
-  }
-
-  #containers-panelmenu@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1620px, 72px, 1584px);
-  }
-
-  #feed-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 576px, 72px, 540px);
-  }
-
-  #social-share-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 612px, 72px, 576px);
-  }
-
-  #characterencoding-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 648px, 72px, 612px);
-  }
-
-  #new-window-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 684px, 72px, 648px);
-  }
-
-  #e10s-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 684px, 72px, 648px);
-  }
-
-  #e10s-button > .toolbarbutton-icon {
-    transform: scaleY(-1);
-  }
-
-  #webide-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1476px, 72px, 1440px);
-  }
-
-  #new-tab-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 720px, 72px, 684px);
-  }
-
-  #privatebrowsing-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 756px, 72px, 720px);
-  }
-
-  #find-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 792px, 72px, 756px);
-  }
-
-  #print-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 828px, 72px, 792px);
-  }
-
-  #restore-button:hover:active:not([disabled="true"]),
-  #fullscreen-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 864px, 72px, 828px);
-  }
-
-  #fullscreen-button[cui-areatype="toolbar"][checked="true"] {
-    -moz-image-region: rect(72px, 864px, 108px, 828px);
-  }
-
-  #fullscreen-button@toolbarButtonPressed@[checked="true"] {
-    -moz-image-region: rect(108px, 864px, 144px, 828px);
-  }
-
-  #developer-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 900px, 72px, 864px);
-  }
-
-  #preferences-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 936px, 72px, 900px);
-  }
-
-  #PanelUI-menu-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 972px, 72px, 936px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #cut-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1008px, 72px, 972px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #copy-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1044px, 72px, 1008px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #paste-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1080px, 72px, 1044px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1116px, 72px, 1080px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1152px, 72px, 1116px);
-  }
-
-  #nav-bar-overflow-button:hover:active:not([disabled="true"]) {
-    -moz-image-region: rect(36px, 1224px, 72px, 1188px);
-  }
-
-  #email-link-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1332px, 72px, 1296px);
-  }
-
-  #sidebar-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1368px, 72px, 1332px);
-  }
-
-  #panic-button@toolbarButtonPressed@ {
-    -moz-image-region: rect(36px, 1404px, 72px, 1368px);
-  }
-}
-
 toolbar .toolbarbutton-1:not([type="menu-button"]),
 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   min-width: 28px;
 }
 
 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1[disabled="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
@@ -3068,17 +2747,17 @@ html|*.addon-webext-perm-list {
   height: 14px;
   list-style-image: url("chrome://browser/skin/menuPanel.svg");
   -moz-image-region: rect(0px, 288px, 32px, 256px);
 }
 
 .addon-toolbar-icon {
   width: 14px;
   height: 14px;
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
+  list-style-image: url("chrome://browser/skin/menu.svg");
   -moz-image-region: rect(0, 486px, 18px, 468px);
 }
 
 /* Status panel */
 
 .statuspanel-label {
   margin: 0;
   padding: 2px 4px;
--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -22,38 +22,28 @@
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
 #downloads-button {
-  --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-  --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 36, 198, 54, 180);
-  --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-  --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 36, 198, 54, 180);
-}
-
-@media (min-resolution: 2dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 72, 396, 108, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 72, 396, 108, 360);
-  }
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
   width: 8px;
   min-width: 0;
@@ -77,46 +67,40 @@ toolbar[brighttext] #downloads-indicator
 }
 
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
   filter: none;
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 @media (min-resolution: 2dppx) {
   #downloads-button[cui-areatype="menu-panel"][attention="success"] {
     list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel@2x.png");
   }
 }
 
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -241,23 +241,17 @@ window:not([chromehidden~="toolbar"]) #u
 /* No extra vertical padding for nav bar */
 #nav-bar {
   padding-top: 0;
   padding-bottom: 0;
 }
 
 /* Use smaller back button icon */
 #back-button {
-  -moz-image-region: rect(0, 54px, 18px, 36px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #back-button {
-    -moz-image-region: rect(0, 108px, 36px, 72px);
-  }
+  list-style-image: url("chrome://browser/skin/back.svg");
 }
 
 .tab-background {
   visibility: hidden;
 }
 
 /* Tab separators */
 .tabbrowser-tab::after,
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,29 +1,30 @@
 /* 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/. */
 
 #downloads-indicator-progress-icon {
-  background: var(--downloads-indicator-image-attention) bottom no-repeat;
+  background: var(--downloads-indicator-image) bottom no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 18px;
   margin-top: 18px;
   /* From javascript side we use animation delay from 0s to -100s to show
    * corresponding frames needed for progress.
    * animation-delay is set to a positive value to make nothing shown.
    */
   animation-play-state: paused;
   animation-delay: 1s;
   animation-duration: 100s;
   animation-timing-function: linear;
   animation-name: indicatorArrowProgress;
 }
 
 toolbar[brighttext] #downloads-indicator-progress-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
   animation-name: indicatorArrowProgressDark;
 }
 
 @keyframes indicatorArrowProgress {
   0% {
     margin-top: 12px;
     filter: brightness(1.2);
   }
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/addons.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12,17c0.5,0,1-0.5,1-1v-4c0,0,0.2-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8 c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2c-1.1,0-1.2,0.8-1.8,0.8C13.2,8.8,13,8,13,8V6c0-0.6-0.4-1-1-1H9c0,0-0.8-0.1-0.8-0.8 S9,3.6,9,2.5C9,1.9,8.8,1,7,1S5,1.9,5,2.5c0,1.1,0.8,1.2,0.8,1.8S5,5,5,5H2C1.4,5,1,5.4,1,6l0,2.5c0,0-0.1,1.5,1.1,1.5 c0.8,0,0.9-1,1.9-1c0.5,0,1,0.5,1,1.6c0,1-0.5,1.6-1,1.6c-1,0-1.1-1-1.9-1C0.9,11,1,12.5,1,12.5L1,16c0,0.6,0.4,1,1,1h3.9 c0,0,1.5,0.1,1.5-1.1c0-0.8-1-0.9-1-1.9c0-0.5,0.7-1.2,1.8-1.2s1.9,0.7,1.9,1.2c0,1-1,1.1-1,1.9c0,1.2,1.5,1.1,1.5,1.1H12z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/app.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13.888,14.885l-2.375-2.158A14.275,14.275,0,0,1,10.2,13.894H7.8a15.252,15.252,0,0,1-1.372-1.167l-2.2,2.158H3V9.938L5.374,7.659C5.969,4.649,8.051,2,9,2s3.11,2.649,3.554,5.659L15,9.907v4.978H13.888ZM9,5.005c-0.332,0-1.023,1.044-1.386,1.958a9.7,9.7,0,0,1,1.414-.1,8.535,8.535,0,0,1,1.26.093C9.929,6.044,9.335,5.005,9,5.005ZM8.589,14.39a0.757,0.757,0,0,0-.09.359,0.541,0.541,0,0,0,.468.45,0.6,0.6,0,0,0,.522-0.45A0.754,0.754,0,0,0,9.4,14.39H9.987a2.131,2.131,0,0,1,.3.606A1.484,1.484,0,0,1,9,16,1.5,1.5,0,0,1,7.719,14.98a2.035,2.035,0,0,1,.3-0.59H8.589Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/back-large.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,11H8.8l2.8,2.8 c0.4,0.4,0.5,1.1,0.2,1.4l-1.2,1.2c-0.3,0.3-1,0.3-1.4-0.2L2.8,9.9c0,0-0.4-0.5-0.4-0.9c0-0.4,0.4-0.8,0.4-0.8l6.4-6.4 c0.4-0.4,1.1-0.5,1.4-0.2l1.2,1.2c0.3,0.3,0.3,1-0.2,1.4L8.9,7H15c0.6,0,1,0.4,1,1v2C16,10.6,15.6,11,15,11z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/back.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,11H9.2l1.9,1.9c0.5,0.5,0.6,1.2,0.2,1.6 l-0.8,0.9c-0.4,0.4-1.1,0.3-1.6-0.2L3.5,9.7C3.4,9.7,3.2,9.3,3.1,9c0-0.3,0.3-0.6,0.4-0.7l5.3-5.4c0.5-0.5,1.2-0.6,1.6-0.2l0.8,0.9 C11.6,4,11.5,4.7,11,5.2L9.2,7H14c0.6,0,1,0.4,1,1v2C15,10.6,14.6,11,14,11z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark-hollow.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,4.6l1,2l0.5,0.9l1,0.2l2.3,0.4l-1.7,1.8l-0.7,0.7l0.1,1l0.4,2.4l-2-1L9,12.5 L8.1,13l-2,1l0.4-2.4l0.1-1L5.9,9.9L4.2,8.1l2.4-0.4l1-0.2L8,6.6L9,4.6 M9,1C8.7,1,8.4,1.2,8.2,1.7l-2,4.1L1.9,6.5 c-1,0.2-1.2,0.9-0.5,1.6l3.1,3.3l-0.7,4.6C3.7,16.6,4,17,4.5,17c0.2,0,0.4-0.1,0.6-0.2L9,14.7l3.9,2.1c0.2,0.1,0.5,0.2,0.6,0.2 c0.5,0,0.8-0.4,0.7-1.1l-0.7-4.6l3.1-3.3c0.7-0.7,0.4-1.4-0.5-1.6l-4.3-0.7l-2-4.1C9.6,1.2,9.3,1,9,1L9,1z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/bookmark.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,1c-.3,0-.6.2-.8.7l-2,4.1-4.3.7c-1,.2-1.2.9-.5,1.6l3.1,3.3L3.8,16c-.1.6.2,1,.7,1l.6-.2L9,14.7l3.9,2.1.6.2c.5,0,.8-.4.7-1.1l-.7-4.6L16.6,8c.7-.7.4-1.4-.5-1.6l-4.3-.7-2-4.1A.9.9,0,0,0,9,1Z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/bookmarksMenu.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,16H4c-1.1,0-2-0.9-2-2V6 c0-1.1,0.9-2,2-2h2l3-3l3,3h2c1.1,0,2,0.9,2,2v8C16,15.1,15.1,16,14,16z M5,6C4.4,6,4,6.4,4,7s0.4,1,1,1s1-0.4,1-1S5.6,6,5,6z M5,9 c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,9,5,9z M5,12c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S5.6,12,5,12z M14,6H7v2h7V6z M14,9H7 v2h7V9z M14,12H7v2h7V12z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/characterEncoding.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,16H4c-1.1,0-2-0.9-2-2V4 c0-1.1,0.9-2,2-2h10c1.1,0,2,0.9,2,2v10C16,15.1,15.1,16,14,16z M14,6c0-1.7-1.3-3-3-3H7C5.3,3,4,4.3,4,6v4c0,1.7,1.3,3,3,3h4 c1.7,0,3-0.3,3-2V6z M11,9.2c0.3,0,0.6,0,0.9-0.1c0.3-0.1,0.5-0.2,0.8-0.3v0.8c-0.3,0.1-0.6,0.2-0.8,0.3C11.7,10,11.4,10,11,10 c-1,0-1.7-0.4-2.1-1.2C8.6,9.2,8.3,9.5,8,9.7C7.6,9.9,7.2,10,6.8,10c-0.6,0-1-0.2-1.3-0.5C5.1,9.3,5,8.8,5,8.3c0-0.6,0.2-1,0.6-1.3 c0.4-0.3,1.1-0.5,1.9-0.5l0.9,0V6.1c0-0.5-0.1-0.8-0.3-1C8,4.8,7.7,4.7,7.3,4.7c-0.5,0-1,0.1-1.6,0.4L5.5,4.5C5.7,4.4,6,4.2,6.4,4.1 C6.7,4.1,7,4,7.4,4c0.4,0,0.8,0.1,1.1,0.2C8.7,4.4,9,4.6,9.1,5c0.2-0.3,0.4-0.6,0.7-0.7c0.3-0.2,0.6-0.3,1-0.3 c0.7,0,1.2,0.2,1.6,0.7C12.8,5.2,13,5.8,13,6.6v0.6H9.4C9.4,8.6,10,9.2,11,9.2z M8.5,7.1l-0.8,0C7,7.1,6.6,7.2,6.3,7.4 C6,7.6,5.9,7.9,5.9,8.3c0,0.3,0.1,0.6,0.3,0.7c0.2,0.2,0.4,0.2,0.7,0.2c0.5,0,0.9-0.1,1.2-0.4c0.3-0.3,0.4-0.7,0.4-1.3V7.1z M12.1,6.5c0-0.6-0.1-1-0.3-1.3c-0.2-0.3-0.5-0.4-0.9-0.4c-0.4,0-0.7,0.1-1,0.4C9.6,5.5,9.5,5.9,9.4,6.5H12.1z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/chevron.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M11.6,13H8.5l3.8-4L8.5,5h3l3.9,4L11.6,13 z M6.6,13H3.5l3.8-4L3.5,5h3l3.9,4L6.6,13z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/containers.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13,5H5V9h8ZM11,7.75a.25.25,0,0,1-.25.25H7.25A.25.25,0,0,1,7,7.75v-.5A.25.25,0,0,1,7.25,7h3.5a.25.25,0,0,1,.25.25ZM13,10H5v4h8Zm-2,2.75a.25.25,0,0,1-.25.25H7.25A.25.25,0,0,1,7,12.75v-.5A.25.25,0,0,1,7.25,12h3.5a.25.25,0,0,1,.25.25Zm3.854-9.9L14,2H4l-.854.853A.5.5,0,0,0,3,3.207V15a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V3.207A.5.5,0,0,0,14.854,2.853ZM14,15H4V4H14Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/devTools-panel.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,17H4a2,2,0,0,1-2-2V7A2,2,0,0,1,4,5H6L9,2l3,3h2a2,2,0,0,1,2,2v8A2,2,0,0,1,14,17ZM13.66,7.631L11.841,9.448a0.917,0.917,0,1,1-1.3-1.3l1.81-1.807a2.979,2.979,0,0,0-4.168,3.694L4.38,13.808a1.271,1.271,0,0,0,0,1.808,1.3,1.3,0,0,0,1.824,0l3.819-3.783a2.98,2.98,0,0,0,3.99-2.823A2.957,2.957,0,0,0,13.66,7.631ZM5.5,15.005a0.5,0.5,0,1,1,.5-0.5A0.5,0.5,0,0,1,5.5,15.005Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/developer.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13.2,6.5L15.8,4 c0.3,0.6,0.5,1.2,0.5,1.9c0,2.2-1.8,4-4.1,4c-0.5,0-1-0.1-1.4-0.3l-6,5.9c-0.6,0.6-1.7,0.6-2.3,0s-0.6-1.6,0-2.3l5.9-5.9 c-0.2-0.5-0.3-1-0.3-1.6c0-2.2,1.8-4,4.1-4c0.7,0,1.3,0.2,1.9,0.5l-2.5,2.5c-0.2,0.2-0.7,1,0,1.7C12.2,7.2,13,6.6,13.2,6.5z M3.6,13.6c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C4.5,14,4.1,13.6,3.6,13.6z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/download.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.6,10.1L10,15.6C9.8,15.9,9.4,16,9,16 c-0.4,0-0.8-0.1-1.1-0.4l-5.6-5.5C1.8,9.5,1.9,9,2.7,9L6,9V3c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v6h3.2C16,9,16.2,9.5,15.6,10.1z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/edit-copy.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,16H9c-0.6,0-1-0.4-1-1v-3V9.4V7 c0-0.6,0.4-1,1-1c0,0,3.2,0,5,0c0,0,2,2,2,2c0,2.2,0,7,0,7C16,15.6,15.6,16,15,16z M13,7v2h2L13,7z M7,5.9V7v1.9V12H3 c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0,0,3.2,0,5,0c0,0,2,2,2,2c0,0.4,0,0.8,0,1.3H7.5C7.2,5.4,7,5.6,7,5.9z M7,3v2h2L7,3z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/edit-cut.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14.7,16c-0.8,0-1.5-0.2-2.3-1.3 c-0.8-1.1-1.7-2.5-1.7-2.5s-0.7-0.9-1.1-1.6c-0.5-0.7-1.1-0.5-1.1-0.5S5.6,5.4,5.1,4.7C4.5,3.7,5.7,2,5.7,2l4.4,7 c0,0,1.4,1.9,1.9,2.3c0.5,0.4,1.4-0.4,2.8,0.9C16.7,14,16.1,16,14.7,16z M14.4,13.1c-0.9-1-1.7-0.9-1.9-0.6c-0.2,0.3,0,1.2,0.4,1.7 c0.4,0.5,0.8,0.7,1.4,0.7C14.9,15,15.4,14.2,14.4,13.1z M10.6,8.4L9.4,6.6L12.3,2c0,0,1.2,1.7,0.6,2.7C12.6,5.1,11.5,7,10.6,8.4z M6,11.3c0.3-0.3,1-1.1,1.4-1.7l0.8,1.2c-0.4,0.6-0.9,1.4-0.9,1.4s-0.9,1.4-1.7,2.5C4.9,15.8,4.2,16,3.3,16c-1.4,0-2.1-2-0.1-3.8 C4.6,11,5.5,11.7,6,11.3z M3.6,13.1c-0.9,1-0.4,1.8,0.2,1.8c0.6,0,1-0.2,1.4-0.7c0.4-0.5,0.6-1.5,0.4-1.7 C5.3,12.2,4.5,12.1,3.6,13.1z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/edit-paste.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12.5,16h-7C4.7,16,4,15.3,4,14.5v-9 C4,4.7,4.7,4,5.5,4H7c0,0,0-2,2-2s2,2,2,2h1.5C13.3,4,14,4.7,14,5.5v9C14,15.3,13.3,16,12.5,16z M11.7,5l-1.1-0.5c0,0,0-1.5-1.6-1.5 C7.4,3,7.4,4.5,7.4,4.5L6.3,5L5.8,6h2.5h3.2h0.8L11.7,5z M11.8,6.7H7.1l-3,1.7l2.8,4.9l6.6-3.8L11.8,6.7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/feed.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.3,16h-1.5c-0.4,0-0.8-0.3-0.8-0.8 c0,0,0.3-3.6-3.2-7.2C7.3,5,2.8,4.8,2.8,4.8C2.3,4.8,2,4.5,2,4.1V2.7C2,2.3,2.3,2,2.8,2c0,0,6.3,0.4,9.6,4.5 c3.3,3.1,3.6,8.8,3.6,8.8C16,15.7,15.8,16,15.3,16z M2.8,7c0,0,3.7,0.5,5.8,2.4c2.1,2,2.5,5.9,2.5,5.9c0,0.4-0.1,0.8-0.5,0.8H9.1 c-0.4,0-0.6-0.3-0.6-0.8c0,0,0.1-2.4-1.8-4.2C5.2,9.8,2.8,9.7,2.8,9.7C2.3,9.7,2,9.4,2,9V7.7C2,7.3,2.3,7,2.8,7z M4,12 c1.1,0,2,0.9,2,2s-0.9,2-2,2c-1.1,0-2-0.9-2-2S2.9,12,4,12z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/find.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10.5,2C7.5,2,5,4.5,5,7.5c0,1.1,0.3,2.1,0.9,3L2.3,14c-0.4,0.4-0.4,1.2,0,1.6 C2.6,15.9,2.9,16,3.1,16s0.6-0.1,0.8-0.3l3.5-3.5c0.9,0.6,1.9,0.9,3,0.9c3,0,5.5-2.5,5.5-5.5S13.5,2,10.5,2z M10.5,11 C8.6,11,7,9.4,7,7.5S8.6,4,10.5,4S14,5.6,14,7.5S12.4,11,10.5,11z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/forget.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,17a8,8,0,1,1,8-8A8,8,0,0,1,9,17ZM8.981,4.845V2.685L5.605,5.458,8.981,8.4V6.126A2.815,2.815,0,0,1,11.875,9,2.791,2.791,0,0,1,9,11.875,2.884,2.884,0,0,1,6.184,10H5.017A4.281,4.281,0,0,0,9,13.156,4.3,4.3,0,0,0,13.188,9,4.327,4.327,0,0,0,8.981,4.845Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/forward.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M3,10V8c0-0.6,0.4-1,1-1h4.8L7,5.2 C6.5,4.7,6.4,4,6.8,3.6l0.8-0.9C8,2.3,8.7,2.4,9.2,2.9l5.3,5.4c0.1,0.1,0.4,0.4,0.4,0.7c0,0.3-0.3,0.7-0.4,0.7l-5.4,5.4 c-0.5,0.5-1.2,0.6-1.6,0.2l-0.8-0.9c-0.4-0.4-0.3-1.1,0.2-1.6L8.8,11H4C3.4,11,3,10.6,3,10z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/fullscreen.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13,12V6l3,3L13,12z M6,13h6l-3,3L6,13 z M11,12H7c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v4C12,11.5,11.6,12,11,12z M11,9c0-0.6-0.4-1-1-1H8 C7.4,8,7,8.4,7,9v1c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1V9z M9,2l3,3H6L9,2z M5,6v6L2,9L5,6z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/history.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,16.1c-4,0-7.2-3.2-7.2-7.2 C1.8,5,5,1.8,9,1.8c4,0,7.2,3.2,7.2,7.2C16.2,12.9,13,16.1,9,16.1z M9,4C6.2,4,4,6.2,4,9c0,2.7,2.2,5,5,5c2.8,0,5-2.2,5-5 C14,6.2,11.8,4,9,4z M8.7,9.9C8.3,9.8,8,9.4,8,9V6c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v2.8c1.1,1.1,2,3.2,2,3.2S9.8,11,8.7,9.9z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/home.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,9L9,4L3,9H1l8-7l8,7H15z M14,9v7h-4v-5H8 v5H4V9l5-4L14,9z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/mail.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10.8,9c0,0-0.6,0.8-1.8,0.8 C7.8,9.8,7.2,9,7.2,9l-6-5.1C1.5,3.4,2.1,3,2.8,3h12.4c0.7,0,1.3,0.4,1.6,0.9L10.8,9z M7.2,10.7c0,0,0.6,0.8,1.8,0.8 c1.2,0,1.8-0.8,1.8-0.8L17,5.3v8c0,0.9-0.8,1.7-1.8,1.7H2.8c-1,0-1.8-0.8-1.8-1.7v-8L7.2,10.7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/menu.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,11h-13C1.7,11,1,10.3,1,9.5 C1,8.7,1.7,8,2.5,8h13C16.3,8,17,8.7,17,9.5C17,10.3,16.3,11,15.5,11z M15.5,6h-13C1.7,6,1,5.3,1,4.5S1.7,3,2.5,3h13 C16.3,3,17,3.7,17,4.5S16.3,6,15.5,6z M2.5,13h13c0.8,0,1.5,0.7,1.5,1.5S16.3,16,15.5,16h-13C1.7,16,1,15.3,1,14.5S1.7,13,2.5,13z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/new-tab.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M18,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.875-4,0.351-2.316.083-4,3.13-4h4.707C14.917,3,14.647,4.684,15,7c0.34,2.228.582,4,2.89,4H17A1,1,0,0,1,18,12ZM11.5,8H10V6.5a0.5,0.5,0,1,0-1,0V8H7.5a0.5,0.5,0,0,0,0,1H9v1.5a0.5,0.5,0,1,0,1,0V9h1.5A0.5,0.5,0,1,0,11.5,8Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/new-window.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,16h-13C1.7,16,1,15.3,1,14.5v-11 C1,2.7,1.7,2,2.5,2h13C16.3,2,17,2.7,17,3.5v11C17,15.3,16.3,16,15.5,16z M9.5,3C9.2,3,9,3.2,9,3.5S9.2,4,9.5,4S10,3.8,10,3.5 S9.8,3,9.5,3z M11.4,3c-0.3,0-0.5,0.2-0.5,0.5S11.2,4,11.4,4c0.3,0,0.5-0.2,0.5-0.5S11.7,3,11.4,3z M14.5,3h-1C13.2,3,13,3.2,13,3.5 S13.2,4,13.5,4h1C14.8,4,15,3.8,15,3.5S14.8,3,14.5,3z M15,7c0-0.6-0.4-1-1-1H4C3.4,6,3,6.4,3,7v6c0,0.6,0.4,1,1,1h10 c0.6,0,1-0.4,1-1V7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/open.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M2,6V3c0-0.6,0.5-1,1-1h4 c0.5,0,1.2,0.9,1.2,0.9L9,4l6.5,0C15.8,4,16,4.2,16,4.5V6H2z M1.6,7h14.8c0.2,0,0.3,0.2,0.3,0.3c0,0-0.4,2.1-0.5,4.2 c-0.1,2.1-0.2,4.1-0.2,4.1c0,0.2-0.2,0.4-0.4,0.4H2.3C2.1,16,2,15.8,2,15.6c0,0,0.1-1.6-0.2-4.1C1.6,9.4,1.3,7.3,1.3,7.3 C1.3,7.2,1.5,7,1.6,7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/pocket.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M9,15.969a8,8,0,0,1-8-8v-4a2,2,0,0,1,2-2H15a2,2,0,0,1,2,2v4A8,8,0,0,1,9,15.969ZM12.985,5.937a0.99,0.99,0,0,0-.725.319L8.978,9.539,5.755,6.305A0.984,0.984,0,0,0,5,5.937a1,1,0,0,0-.714,1.7L4.27,7.648l3.293,3.306h0l0.707,0.707a1,1,0,0,0,1.414,0l0.707-.707h0L13.7,7.648l0,0A1,1,0,0,0,12.985,5.937Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/print.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,14h-2l1,2H3l1-2H2c-0.6,0-1-0.4-1-1V8 c0-0.6,0.4-1,1-1h1V5c0-0.6,0.4-1,1-1V3c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1v1c0.6,0,1,0.4,1,1v2h1c0.6,0,1,0.4,1,1v5 C17,13.6,16.6,14,16,14z M4,14l0.5-1H4V14z M4.5,9H4H3.5C3.2,9,3,9.2,3,9.5S3.2,10,3.5,10h1C4.8,10,5,9.8,5,9.5S4.8,9,4.5,9z M13,4 c0-0.6-0.4-1-1-1H6C5.4,3,5,3.4,5,4v3c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V4z M12.1,13H5.9L5,15h8L12.1,13z M14,13h-0.5l0.5,1V13z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/privateBrowsing.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16.7,7.5 c-0.1,1.1,0.2,2.5-1.3,4.4C13.9,14,12.3,14,12,14c-1.8-0.1-2-1.5-3-1.5c-0.9,0-1.6,1.4-3,1.5c-0.3,0-1.9,0-3.4-2 C1.1,10,1.4,8.7,1.3,7.5C1.2,6.4,1,5.2,1,5.2S1.7,5.9,2.6,6c0.9,0.1,1.1-0.3,3-0.9C7.7,4.5,9,7,9,7s1.4-2.4,3.4-1.9s2,0.9,2.9,0.9 C16.2,5.9,17,5.2,17,5.2S16.8,6.4,16.7,7.5z M5.9,8C4.8,7.8,4.3,8.2,3.8,8.4C3.4,8.5,3,8.6,3,8.6S3,9.2,4.2,9.8 c1.1,0.6,3.5,0.3,3.5,0.3S7.9,8.4,5.9,8z M14.2,8.4c-0.5-0.2-1-0.6-2.1-0.4c-2,0.4-1.8,2.1-1.8,2.1s2.4,0.3,3.5-0.3 C15,9.2,15,8.6,15,8.6S14.7,8.5,14.2,8.4z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/refresh.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,9H9l2.8-2.8c-0.7-0.5-1.4-0.7-2.3-0.7 c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c1.4,0,2.7-0.7,3.4-1.9l2.3,1c-1.1,2-3.2,3.4-5.7,3.4C5.9,16,3,13.1,3,9.5C3,5.9,5.9,3,9.5,3 c1.5,0,2.9,0.5,4.1,1.4L16,2V9z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/save.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M13.5,16h-9C3.7,16,3,15.3,3,14.5v-11 C3,2.7,3.7,2,4.5,2H12l3,3v9.5C15,15.3,14.3,16,13.5,16z M11,2.7V6h3.3L11,2.7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/settings.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M12.4,14.7l-0.6-1.5c0.3-0.2,0.5-0.4,0.8-0.6c0.2-0.2,0.4-0.5,0.6-0.7l1.5,0.6 c0.3,0.1,0.5,0,0.7-0.3l0.4-0.9c0.1-0.3,0-0.5-0.3-0.7L13.9,10c0.1-0.6,0.1-1.3,0-1.9l1.5-0.6c0.3-0.1,0.4-0.4,0.3-0.7l-0.4-0.9 c-0.1-0.3-0.4-0.4-0.7-0.3l-1.5,0.6C13,6,12.8,5.7,12.5,5.5c-0.2-0.2-0.5-0.4-0.7-0.6l0.6-1.5c0.1-0.3,0-0.5-0.3-0.7l-0.9-0.4 c-0.3-0.1-0.5,0-0.7,0.3L10,4.1C9.4,4,8.7,4,8.1,4.1L7.5,2.6C7.4,2.3,7.1,2.2,6.8,2.3L5.9,2.7C5.7,2.8,5.5,3.1,5.6,3.4l0.6,1.5 C6,5,5.7,5.2,5.5,5.5C5.3,5.7,5.1,5.9,4.9,6.2L3.4,5.5c-0.3-0.1-0.5,0-0.7,0.3L2.4,6.7C2.3,7,2.4,7.3,2.6,7.4L4.1,8 C4,8.6,4,9.3,4.1,9.9l-1.5,0.6c-0.3,0.1-0.4,0.4-0.3,0.7l0.4,0.9c0.1,0.3,0.4,0.4,0.7,0.3l1.5-0.6C5,12,5.2,12.3,5.5,12.5 c0.2,0.2,0.5,0.4,0.7,0.6l-0.6,1.5c-0.1,0.3,0,0.5,0.3,0.7l0.9,0.4c0.3,0.1,0.5,0,0.7-0.3L8,13.9c0.6,0.1,1.3,0.1,1.9,0l0.6,1.5 c0.1,0.3,0.4,0.4,0.7,0.3l0.9-0.4C12.3,15.2,12.5,14.9,12.4,14.7z M7.4,10.6c-0.9-0.9-0.9-2.3,0-3.2c0.9-0.9,2.3-0.9,3.2,0 c0.9,0.9,0.9,2.3,0,3.2C9.7,11.5,8.3,11.5,7.4,10.6z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/share.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M10,11l5-8l-7,8l2,6l-4-5H2L16,1v13L10,11z M12.6,13.3L10,17v-5L12.6,13.3z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/sidebars.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.5,16h-13C1.7,16,1,15.3,1,14.5v-11 C1,2.7,1.7,2,2.5,2h13C16.3,2,17,2.7,17,3.5v11C17,15.3,16.3,16,15.5,16z M3,7v6c0,0.6,0.4,1,1,1h7V6H4C3.4,6,3,6.4,3,7z M9.5,3 C9.2,3,9,3.2,9,3.5S9.2,4,9.5,4S10,3.8,10,3.5S9.8,3,9.5,3z M11.4,3c-0.3,0-0.5,0.2-0.5,0.5S11.2,4,11.4,4c0.3,0,0.5-0.2,0.5-0.5 S11.7,3,11.4,3z M14.5,3h-1C13.2,3,13,3.2,13,3.5S13.2,4,13.5,4h1C14.8,4,15,3.8,15,3.5S14.8,3,14.5,3z M15,7c0-0.6-0.4-1-1-1h-1v8 h1c0.6,0,1-0.4,1-1V7z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/stop.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15.4,4.8L11.2,9l4.2,4.2l-2.1,2.1L9,11.2 l-4.2,4.2l-2.1-2.1L6.9,9L2.6,4.8l2.1-2.1L9,6.9l4.2-4.2L15.4,4.8z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/sync.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M16,9.8c-0.1,0.6-0.2,1.2-0.4,1.7 c-0.4,1.3-1.2,2.5-2.5,3.3c0.4,0.4,1.3,0.9,1.3,0.9s-2,0.3-4.1,0.3c0,0-0.1-0.1-0.1-0.1l0,0.1c-1,0-2-0.3-3-0.6 c0.7-0.6,1.2-1.3,1.6-2.1c0.6-1.2,0.6-3,0.6-3c0,0,0.9,1.5,1.4,2.1c1.2-0.6,2-1.8,2.1-3c0.1-0.9-0.2-1.7-0.6-2.3 c-0.4-0.7-1-1.1-1.7-1.4c0.2-0.4,0.5-0.9,0.8-1.3c0.4-0.6,0.9-1,1.3-1.2C14.8,4.3,16.3,6.9,16,9.8z M9,7.8c0,0-1.1-1.5-1.6-2 C6,6.5,5.2,7.8,5.2,9.2c0.1,1.5,1.1,2.7,2.4,3.3c-0.3,0.5-0.6,1-1,1.4c-0.4,0.5-0.9,0.8-1.2,1.1C3.1,13.6,1.7,11,2.1,8.2 c0.1-0.7,0.3-1.4,0.5-2c0.4-1.1,1.1-2,2.1-2.7C4.8,3.4,4.9,3.4,5,3.3C4.6,2.9,3.4,2.5,3.4,2.5s2.5-0.8,6.8-0.3C8.9,4.1,9,7.8,9,7.8z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/syncedTabs.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/tabGroups.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,16H9c-0.6,0-1-0.4-1-1v-5 c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1v5C16,15.6,15.6,16,15,16z M15,8h-2c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v4 C16,7.6,15.6,8,15,8z M10,8H3C2.4,8,2,7.6,2,7V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v4C11,7.6,10.6,8,10,8z M3,9h3c0.6,0,1,0.4,1,1v5 c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1v-5C2,9.4,2.4,9,3,9z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/webIDE.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14.311,5.123A6.579,6.579,0,1,0,5.026,14.24L4.545,15.609A7.985,7.985,0,1,1,16.885,7.7ZM9.034,16.148L5,18l1.863-4.024ZM13.4,4.89c0.009,0.028.014,0.058,0.023,0.085,0.059,0.064.1,0.14,0.16,0.207l-0.89.911c-0.038-.222-0.061-0.458-0.107-0.672a15.86,15.86,0,0,0-1.706-.277c0.034,0.621.058,1.252,0.076,1.9,0.265,0.008.518,0.022,0.778,0.032L10,8.855c0-.283-0.011-0.556-0.014-0.839C9.652,8.013,9.337,8,9,8s-0.652.013-.983,0.017C8.013,8.348,8,8.663,8,9s0.013,0.652.017,0.983C8.308,9.987,8.59,10,8.882,10l-1.8,1.848c-0.012-.3-0.028-0.586-0.036-0.888-0.657-.019-1.3-0.045-1.93-0.081A15.963,15.963,0,0,0,5.389,12.6c0.26,0.059.547,0.089,0.819,0.135l-0.958.982a6.057,6.057,0,0,1-.642-0.6c-0.009-.027-0.014-0.057-0.023-0.085A6,6,0,0,1,3.93,12.2c0.148,0.051.312,0.091,0.466,0.139a13.619,13.619,0,0,1-.275-1.521c-0.282-.02-0.581-0.031-0.857-0.054A5.981,5.981,0,0,1,3.06,9.8c0.313,0.021.651,0.031,0.971,0.049C4.015,9.571,4,9.289,4,9s0.015-.571.032-0.852C3.711,8.166,3.372,8.176,3.06,8.2a5.981,5.981,0,0,1,.2-0.957c0.276-.023.575-0.034,0.857-0.054a13.633,13.633,0,0,1,.268-1.5c-0.158.048-.325,0.088-0.476,0.14a6,6,0,0,1,.671-0.864C4.593,4.938,4.6,4.907,4.607,4.88a6.031,6.031,0,0,1,1.195-1c-0.061.178-.11,0.375-0.165,0.562a13.17,13.17,0,0,1,1.544-.3C7.2,3.827,7.214,3.5,7.239,3.2A5.92,5.92,0,0,1,8.2,3c-0.023.343-.034,0.713-0.053,1.066C8.431,4.046,8.7,4,9,4s0.568,0.046.856,0.063C9.837,3.711,9.826,3.34,9.8,3a5.923,5.923,0,0,1,.957.206c0.025,0.3.037,0.624,0.058,0.931a13.172,13.172,0,0,1,1.518.3c-0.056-.191-0.1-0.391-0.167-0.573A6.032,6.032,0,0,1,13.4,4.89ZM5,9c0,0.308.02,0.6,0.035,0.9,0.648,0.029,1.31.049,1.985,0.064C7.016,9.641,7,9.33,7,9s0.016-.641.02-0.966C6.345,8.049,5.683,8.069,5.035,8.1,5.02,8.4,5,8.692,5,9ZM5.383,5.427a15.968,15.968,0,0,0-.272,1.695c0.631-.036,1.273-0.062,1.93-0.081,0.018-.645.042-1.276,0.076-1.9A15.853,15.853,0,0,0,5.383,5.427Zm4.523-.36C9.606,5.051,9.309,5.031,9,5.031s-0.606.02-.906,0.036c-0.027.638-.046,1.29-0.06,1.954C8.358,7.016,8.67,7,9,7s0.641,0.016.967,0.021C9.952,6.357,9.934,5.7,9.906,5.067Zm4.033,1.872,2.121,2.121L9.884,15.209,7.763,13.087ZM14.5,12.633l2.385-2.313a7.993,7.993,0,0,1-6.806,6.6L12.5,14.569A6.608,6.608,0,0,0,14.5,12.633Z"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/webRTC-camera.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M15,13.2l-3-2.7v2.1 c0,0.8-0.6,1.4-1.3,1.4H3.3C2.6,14,2,13.4,2,12.6V5.4C2,4.6,2.6,4,3.3,4h7.4C11.4,4,12,4.6,12,5.4v2l3-2.7c0.3-0.3,0.6-0.4,1-0.3 v9.1C15.7,13.6,15.3,13.5,15,13.2z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/zoom-in.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M14,10h-4v4H8v-4H4V8h4V4h2v4h4V10z" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/icons/zoom-out.svg
@@ -0,0 +1,6 @@
+<!-- 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="18" height="18" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M4,8h10v2H4V8z" />
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -84,16 +84,64 @@
   skin/classic/browser/fxa/default-avatar.svg                  (../shared/fxa/default-avatar.svg)
   skin/classic/browser/fxa/logo.png                            (../shared/fxa/logo.png)
   skin/classic/browser/fxa/logo@2x.png                         (../shared/fxa/logo@2x.png)
   skin/classic/browser/fxa/sync-illustration.svg               (../shared/fxa/sync-illustration.svg)
   skin/classic/browser/fxa/android.png                         (../shared/fxa/android.png)
   skin/classic/browser/fxa/android@2x.png                      (../shared/fxa/android@2x.png)
   skin/classic/browser/fxa/ios.png                             (../shared/fxa/ios.png)
   skin/classic/browser/fxa/ios@2x.png                          (../shared/fxa/ios@2x.png)
+
+
+  skin/classic/browser/addons.svg                     (../shared/icons/addons.svg)
+  skin/classic/browser/app.svg                        (../shared/icons/app.svg)
+  skin/classic/browser/back.svg                       (../shared/icons/back.svg)
+  skin/classic/browser/back-large.svg                 (../shared/icons/back-large.svg)
+  skin/classic/browser/bookmark.svg                   (../shared/icons/bookmark.svg)
+  skin/classic/browser/bookmark-hollow.svg            (../shared/icons/bookmark-hollow.svg)
+  skin/classic/browser/bookmarksMenu.svg              (../shared/icons/bookmarksMenu.svg)
+  skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
+  skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
+  skin/classic/browser/containers.svg                       (../shared/icons/containers.svg)
+  skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
+  skin/classic/browser/devTools-panel.svg             (../shared/icons/devTools-panel.svg)
+  skin/classic/browser/download.svg                   (../shared/icons/download.svg)
+  skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
+  skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
+  skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)
+  skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
+  skin/classic/browser/find.svg                       (../shared/icons/find.svg)
+  skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
+  skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
+  skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
+  skin/classic/browser/history.svg                    (../shared/icons/history.svg)
+  skin/classic/browser/home.svg                       (../shared/icons/home.svg)
+  skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)
+  skin/classic/browser/menu.svg                       (../shared/icons/menu.svg)
+  skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
+  skin/classic/browser/new-window.svg                 (../shared/icons/new-window.svg)
+  skin/classic/browser/open.svg                       (../shared/icons/open.svg)
+  skin/classic/browser/pocket.svg                     (../shared/icons/pocket.svg)
+  skin/classic/browser/print.svg                      (../shared/icons/print.svg)
+  skin/classic/browser/privateBrowsing.svg            (../shared/icons/privateBrowsing.svg)
+  skin/classic/browser/refresh.svg                    (../shared/icons/refresh.svg)
+  skin/classic/browser/save.svg                       (../shared/icons/save.svg)
+  skin/classic/browser/settings.svg                   (../shared/icons/settings.svg)
+  skin/classic/browser/share.svg                      (../shared/icons/share.svg)
+  skin/classic/browser/sidebars.svg                   (../shared/icons/sidebars.svg)
+  skin/classic/browser/stop.svg                       (../shared/icons/stop.svg)
+  skin/classic/browser/sync.svg                       (../shared/icons/sync.svg)
+  skin/classic/browser/syncedTabs.svg                 (../shared/icons/syncedTabs.svg)
+  skin/classic/browser/tabGroups.svg                  (../shared/icons/tabGroups.svg)
+  skin/classic/browser/webIDE.svg                     (../shared/icons/webIDE.svg)
+  skin/classic/browser/webRTC-camera.svg              (../shared/icons/webRTC-camera.svg)
+  skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
+  skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
+
+
   skin/classic/browser/search-indicator.png                    (../shared/search/search-indicator.png)
   skin/classic/browser/search-indicator@2x.png                 (../shared/search/search-indicator@2x.png)
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
   skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
   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)
--- a/browser/themes/shared/social/social.inc.css
+++ b/browser/themes/shared/social/social.inc.css
@@ -1,17 +1,18 @@
 %if 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/. */
 %endif
 
 #manage-share-providers {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+  list-style-image: url("chrome://browser/skin/settings.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
 }
 
 #manage-share-providers > .toolbarbutton-icon {
   min-height: 18px;
   min-width: 18px;
 }
 
 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -1,347 +1,182 @@
-:-moz-any(@primaryToolbarButtons@),
-#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
+:root {
+  --toolbarbutton-icon-fill: #4c4c4c;
+  --toolbarbutton-icon-fill-inverted: #fff;
+  --toolbarbutton-icon-fill-attention: #177ee5;
 }
 
-toolbar[brighttext] :-moz-any(@primaryToolbarButtons@),
-toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  list-style-image: url(chrome://browser/skin/Toolbar-inverted.png);
+:-moz-any(@primaryToolbarButtons@) {
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
+}
+
+toolbar[brighttext] :-moz-any(@primaryToolbarButtons@) {
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #back-button {
-  -moz-image-region: rect(0, 36px, 18px, 18px);
+  list-style-image: url("chrome://browser/skin/back-large.svg");
 }
 
 #forward-button {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
+  list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 #home-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 126px, 18px, 108px);
+  list-style-image: url("chrome://browser/skin/home.svg");
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 144px, 18px, 126px);
+  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-  -moz-image-region: rect(0, 162px, 18px, 144px);
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+toolbar:not([brighttext]) #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button {
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  -moz-image-region: rect(0, 630px, 18px, 612px);
+  list-style-image: url("chrome://browser/skin/bookmarksMenu.svg");
 }
 
 #history-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 180px, 18px, 162px);
+  list-style-image: url("chrome://browser/skin/history.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 198px, 18px, 180px);
+  list-style-image: url("chrome://browser/skin/download.svg");
 }
 
 #add-ons-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 216px, 18px, 198px);
+  list-style-image: url("chrome://browser/skin/addons.svg");
 }
 
 #open-file-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 234px, 18px, 216px);
+  list-style-image: url("chrome://browser/skin/open.svg");
 }
 
 #save-page-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 252px, 18px, 234px);
+  list-style-image: url("chrome://browser/skin/save.svg");
 }
 
 #sync-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 792px, 18px, 774px);
+  list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 #containers-panelmenu[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 810px, 18px, 792px);
+  list-style-image: url("chrome://browser/skin/containers.svg");
 }
 
 #feed-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 288px, 18px, 270px);
+  list-style-image: url("chrome://browser/skin/feed.svg");
 }
 
 #social-share-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0px, 306px, 18px, 288px);
+  list-style-image: url("chrome://browser/skin/share.svg");
 }
 
 #characterencoding-button[cui-areatype="toolbar"]{
-  -moz-image-region: rect(0, 324px, 18px, 306px);
+  list-style-image: url("chrome://browser/skin/characterEncoding.svg");
 }
 
 #new-window-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+  list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 342px, 18px, 324px);
+  list-style-image: url("chrome://browser/skin/new-window.svg");
 }
 
 #e10s-button > .toolbarbutton-icon {
   transform: scaleY(-1);
 }
 
 #new-tab-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 360px, 18px, 342px);
+  list-style-image: url("chrome://browser/skin/new-tab.svg");
 }
 
 #privatebrowsing-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 378px, 18px, 360px);
+  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
 }
 
 #find-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 396px, 18px, 378px);
+  list-style-image: url("chrome://browser/skin/find.svg");
 }
 
 #print-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 414px, 18px, 396px);
+  list-style-image: url("chrome://browser/skin/print.svg");
 }
 
 %ifdef XP_MACOSX
 #restore-button,
 %endif
 #fullscreen-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 432px, 18px, 414px);
+  list-style-image: url("chrome://browser/skin/fullscreen.svg");
 }
 
 #developer-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 450px, 18px, 432px);
+  list-style-image: url("chrome://browser/skin/developer.svg");
 }
 
 #preferences-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 468px, 18px, 450px);
+  list-style-image: url("chrome://browser/skin/settings.svg");
 }
 
 #PanelUI-menu-button {
-  -moz-image-region: rect(0, 486px, 18px, 468px);
+  list-style-image: url("chrome://browser/skin/menu.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #cut-button {
-  -moz-image-region: rect(0, 504px, 18px, 486px);
+  list-style-image: url("chrome://browser/skin/edit-cut.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #copy-button {
-  -moz-image-region: rect(0, 522px, 18px, 504px);
+  list-style-image: url("chrome://browser/skin/edit-copy.svg");
 }
 
 #edit-controls:not(@inAnyPanel@) > #paste-button {
-  -moz-image-region: rect(0, 540px, 18px, 522px);
+  list-style-image: url("chrome://browser/skin/edit-paste.svg");
 }
 
 #zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
-  -moz-image-region: rect(0, 558px, 18px, 540px);
+  list-style-image: url("chrome://browser/skin/zoom-out.svg");
 }
 
 #zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
-  -moz-image-region: rect(0, 576px, 18px, 558px);
+  list-style-image: url("chrome://browser/skin/zoom-in.svg");
 }
 
 #nav-bar-overflow-button {
-  -moz-image-region: rect(0, 612px, 18px, 594px);
+  list-style-image: url("chrome://browser/skin/chevron.svg");
 }
 
 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #email-link-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 666px, 18px, 648px);
+  list-style-image: url("chrome://browser/skin/mail.svg");
 }
 
 #sidebar-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 684px, 18px, 666px);
+  list-style-image: url("chrome://browser/skin/sidebars.svg");
 }
 
 #panic-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 702px, 18px, 684px);
+  list-style-image: url("chrome://browser/skin/forget.svg");
 }
 
 #panic-button[cui-areatype="toolbar"][open] {
-%ifdef XP_MACOSX
-  -moz-image-region: rect(36px, 702px, 54px, 684px);
-%else
-  -moz-image-region: rect(18px, 702px, 36px, 684px);
-%endif
+  fill: rgb(213, 32, 20);
 }
 
 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #webide-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 738px, 18px, 720px);
+  list-style-image: url("chrome://browser/skin/webIDE.svg");
 }
-
-@media (min-resolution: 1.1dppx) {
-  :-moz-any(@primaryToolbarButtons@),
-  #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
-  }
-
-  toolbar[brighttext] :-moz-any(@primaryToolbarButtons@),
-  toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png");
-  }
-
-  #back-button {
-    -moz-image-region: rect(0, 72px, 36px, 36px);
-  }
-
-  #forward-button {
-    -moz-image-region: rect(0, 144px, 36px, 108px);
-  }
-
-  #home-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 252px, 36px, 216px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 288px, 36px, 252px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-    -moz-image-region: rect(0, 324px, 36px, 288px);
-  }
-
-  #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-    -moz-image-region: rect(0px, 1260px, 36px, 1224px);
-  }
-
-  #history-panelmenu[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 360px, 36px, 324px);
-  }
-
-  #downloads-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 396px, 36px, 360px);
-  }
-
-  #add-ons-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 432px, 36px, 396px);
-  }
-
-  #open-file-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 468px, 36px, 432px);
-  }
-
-  #save-page-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 504px, 36px, 468px);
-  }
-
-  #sync-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1584px, 36px, 1548px);
-  }
-
-  #containers-panelmenu[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1620px, 36px, 1584px);
-  }
-
-  #feed-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 576px, 36px, 540px);
-  }
-
-  #social-share-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 612px, 36px, 576px);
-  }
-
-  #characterencoding-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 648px, 36px, 612px);
-  }
-
-  #new-window-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 684px, 36px, 648px);
-  }
-
-  #e10s-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 684px, 36px, 648px);
-  }
-
-  #e10s-button > .toolbarbutton-icon {
-    transform: scaleY(-1);
-  }
-
-  #new-tab-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 720px, 36px, 684px);
-  }
-
-  #privatebrowsing-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 756px, 36px, 720px);
-  }
-
-  #find-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 792px, 36px, 756px);
-  }
-
-  #print-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 828px, 36px, 792px);
-  }
-
-%ifdef XP_MACOSX
-  #restore-button,
-%endif
-  #fullscreen-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 864px, 36px, 828px);
-  }
-
-  #developer-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 900px, 36px, 864px);
-  }
-
-  #preferences-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 936px, 36px, 900px);
-  }
-
-  #PanelUI-menu-button {
-    -moz-image-region: rect(0, 972px, 36px, 936px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #cut-button {
-    -moz-image-region: rect(0, 1008px, 36px, 972px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #copy-button {
-    -moz-image-region: rect(0, 1044px, 36px, 1008px);
-  }
-
-  #edit-controls[cui-areatype="toolbar"] > #paste-button {
-    -moz-image-region: rect(0, 1080px, 36px, 1044px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-out-button {
-    -moz-image-region: rect(0, 1116px, 36px, 1080px);
-  }
-
-  #zoom-controls[cui-areatype="toolbar"] > #zoom-in-button {
-    -moz-image-region: rect(0, 1152px, 36px, 1116px);
-  }
-
-  #nav-bar-overflow-button {
-    -moz-image-region: rect(0, 1224px, 36px, 1188px);
-  }
-
-  #email-link-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1332px, 36px, 1296px);
-  }
-
-  #sidebar-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1368px, 36px, 1332px);
-  }
-
-  #panic-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1404px, 36px, 1368px);
-  }
-
-  #panic-button[cui-areatype="toolbar"][open] {
-%ifdef XP_MACOSX
-    -moz-image-region: rect(72px, 1404px, 108px, 1368px);
-%else
-    -moz-image-region: rect(36px, 1404px, 72px, 1368px);
-%endif
-  }
-
-  #webide-button[cui-areatype="toolbar"] {
-    -moz-image-region: rect(0, 1476px, 36px, 1440px);
-  }
-}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -468,29 +468,32 @@ toolbarpaletteitem[place="palette"] > #p
 }
 
 #bookmarked-notification-dropmarker-anchor {
   z-index: -1;
   position: relative;
 }
 
 #bookmarked-notification-dropmarker-icon {
+  -moz-context-properties: fill;
   width: 18px;
   height: 18px;
   visibility: hidden;
 }
 
 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
   animation: animation-bookmarkAdded 800ms;
   animation-timing-function: ease, ease, ease;
 }
 
 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: none !important;
+  min-width: 32px;
+  min-height: 28px;
 }
 
 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
   visibility: visible;
   animation: animation-bookmarkPulse 300ms;
   animation-delay: 600ms;
   animation-timing-function: ease-out;
 }
--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -16,43 +16,31 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-@media not all and (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), 18, 198, 36, 180);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);
-  }
-}
-
-@media (min-resolution: 1.1dppx) {
-  #downloads-button {
-    --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 36, 396, 72, 360);
-    --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 0, 396, 36, 360);
-    --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted@2x.png"), 36, 396, 72, 360);
-  }
+#downloads-button {
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 }
 
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   width: 18px;
   height: 18px;
   background-size: 18px;
 }
 
 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: -moz-box;
   height: 8px;
   width: 8px;
   min-width: 0;
@@ -76,46 +64,40 @@ toolbar[brighttext] #downloads-button:no
 }
 
 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
   filter: none;
 }
 
 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
 /* In the next few rules, we use :not([counter]) as a shortcut that is
    equivalent to -moz-any([progress], [paused]). */
 
 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
   background: var(--downloads-indicator-image) center no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill);
   background-size: 12px;
 }
 
 toolbar[brighttext] #downloads-button:not([counter]):not([attention="success"]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-inverted);
+  fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention);
-}
-
-toolbar[brighttext] #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-  background-image: var(--downloads-indicator-image-attention-inverted);
+  fill: var(--toolbarbutton-icon-fill-attention);
 }
 
 /*** Download notifications ***/
 
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@@ -10,27 +10,29 @@
   padding: 3px;
   padding-inline-end: 6px;
 }
 
 #placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .4;
 }
 
-#back-button,
-#forward-button {
-  list-style-image: url("chrome://browser/skin/Toolbar.png");
+#back-button > .toolbarbutton-icon,
+#forward-button > .toolbarbutton-icon {
+  -moz-context-properties: fill;
+  fill: currentcolor;
+  opacity: 0.65;
 }
 
 #back-button {
-  -moz-image-region: rect(0, 54px, 18px, 36px);
+  list-style-image: url("chrome://browser/skin/back.svg");
 }
 
 #forward-button {
-  -moz-image-region: rect(0, 72px, 18px, 54px);
+  list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 /* Menu */
@@ -74,18 +76,18 @@
   background: url(chrome://global/skin/arrow/arrow-dn.gif) right center no-repeat;
 }
 
 #placesMenu > menu > .menubar-text:-moz-locale-dir(rtl) {
   background-position: left center;
 }
 
 /* organize, view and maintenance buttons icons */
-#organizeButton, 
-#viewMenu, 
+#organizeButton,
+#viewMenu,
 #maintenanceButton {
   list-style-image: url("chrome://browser/skin/places/libraryToolbar.png");
 }
 
 /* organize button */
 #organizeButton {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }