Bug 1347543 - Use SVGs instead of PNGs for toolbar button icons. r=dao draft
authorStephen Horlander <shorlander@mozilla.com>
Fri, 14 Apr 2017 00:15:52 +0530
changeset 570197 8e00f0f99b96f43af2a692064521b427496f8d4f
parent 569550 eaba9fc3589db01a3b50d600f70e9803946ee559
child 626431 860437aaa91281be481d96ee254843b5ba2971e0
push id56423
push usernhnt11@gmail.com
push dateFri, 28 Apr 2017 15:04:52 +0000
reviewersdao
bugs1347543
milestone55.0a1
Bug 1347543 - Use SVGs instead of PNGs for toolbar button icons. r=dao MozReview-Commit-ID: 8bWJGFU4lpC
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/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;
@@ -984,17 +985,17 @@ html|span.ac-emphasize-text-url {
 
 .ac-type-icon[type=bookmark][selected][current] {
   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");
 }
 
 .ac-type-icon[type=keyword],
 .ac-site-icon[type=searchengine] {
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
-  /* uncomment after bug 1350010 lands: context-properties: fill; */
+  -moz-context-properties: fill;
   fill: GrayText;
 }
 
 .ac-type-icon[type=keyword][selected],
 .ac-site-icon[type=searchengine][selected] {
   fill: highlighttext;
 }
 
--- 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,
@@ -1761,17 +1440,17 @@ html|span.ac-emphasize-text-url {
 
 .ac-type-icon[type=bookmark][selected][current] {
   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");
 }
 
 .ac-type-icon[type=keyword],
 .ac-site-icon[type=searchengine] {
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
-  /* uncomment after bug 1350010 lands: context-properties: fill; */
+  -moz-context-properties: fill;
   fill: GrayText;
 }
 
 .ac-type-icon[type=keyword][selected],
 .ac-site-icon[type=searchengine][selected] {
   fill: highlighttext;
 }
 
@@ -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/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;
 }
@@ -1504,17 +1507,17 @@ html|span.ac-emphasize-text-url {
 
 .ac-type-icon[type=bookmark][selected][current] {
   list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");
 }
 
 .ac-type-icon[type=keyword],
 .ac-site-icon[type=searchengine] {
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg);
-  /* uncomment after bug 1350010 lands: context-properties: fill; */
+  -moz-context-properties: fill;
   fill: GrayText;
 }
 
 .ac-type-icon[type=keyword][selected],
 .ac-site-icon[type=searchengine][selected] {
   fill: highlighttext;
 }
 
--- 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);
 }