Bug 1768505 - Update the Tab icons with the new "supernova" icons r=aleca
authorMicah Ilbery <micah@thunderbird.net>
Thu, 19 May 2022 13:31:53 +0300
changeset 35777 3a43bdbcd359a4de7085b237243fd5b48a8f317e
parent 35776 b914c584f5e5a83d9f49d1c7c7d98dafa930e105
child 35778 348dffc5ece7d28c97d88df200db662f9ec383e6
push id19937
push usermkmelin@iki.fi
push dateThu, 19 May 2022 10:36:31 +0000
treeherdercomm-central@3a43bdbcd359 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca
bugs1768505
Bug 1768505 - Update the Tab icons with the new "supernova" icons r=aleca Differential Revision: https://phabricator.services.mozilla.com/D146625
mail/actors/LinkHandlerParent.jsm
mail/base/content/aboutMessage.xhtml
mail/base/content/glodaFacetTab.js
mail/base/content/mailTabs.js
mail/base/content/specialTabs.js
mail/components/accountcreation/content/accountSetup.xhtml
mail/components/newmailaccount/content/accountProvisioner.xhtml
mail/components/preferences/preferences.xhtml
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/aboutAddonsExtra.css
mail/themes/shared/mail/icons.css
mail/themes/shared/mail/icons/new/compact/account-settings.svg
mail/themes/shared/mail/icons/new/compact/export.svg
mail/themes/shared/mail/icons/new/compact/extension.svg
mail/themes/shared/mail/icons/new/compact/import.svg
mail/themes/shared/mail/icons/new/compact/new-mail.svg
mail/themes/shared/mail/icons/new/compact/search.svg
mail/themes/shared/mail/panelUI.css
mail/themes/shared/mail/preferences/preferences.css
mail/themes/shared/mail/primaryToolbar.css
mail/themes/shared/mail/tabmail.css
mailnews/base/prefs/content/AccountManager.xhtml
mailnews/import/content/aboutImport.xhtml
--- a/mail/actors/LinkHandlerParent.jsm
+++ b/mail/actors/LinkHandlerParent.jsm
@@ -51,13 +51,13 @@ class LinkHandlerParent extends JSWindow
         return;
       }
     }
 
     if (canUseForTab) {
       tabmail.setTabFavIcon(
         tab,
         iconURL,
-        "chrome://messenger/skin/icons/file-item.svg"
+        "chrome://messenger/skin/icons/new/compact/draft.svg"
       );
     }
   }
 }
--- a/mail/base/content/aboutMessage.xhtml
+++ b/mail/base/content/aboutMessage.xhtml
@@ -24,17 +24,17 @@
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml">
 <head>
   <meta charset="utf-8" />
   <title>about:message</title>
 
-  <link rel="icon" href="chrome://messenger/skin/icons/file-item.svg" />
+  <link rel="icon" href="chrome://messenger/skin/icons/new/compact/draft.svg" />
 
   <link rel="stylesheet" href="chrome://messenger/skin/messageWindow.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/popupPanel.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/messageHeader.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/folderMenus.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/attachmentList.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/searchBox.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/openpgp/inlineNotification.css" />
--- a/mail/base/content/glodaFacetTab.js
+++ b/mail/base/content/glodaFacetTab.js
@@ -24,17 +24,19 @@ var glodaFacetTabType = {
   openTab(aTab, aArgs) {
     // If aArgs is omitted, default to a blank user search.
     if (!aArgs) {
       aArgs = { searcher: new GlodaMsgSearcher(null, "") };
     }
     // we have no browser until our XUL document loads
     aTab.browser = null;
 
-    aTab.tabNode.setIcon("chrome://global/skin/icons/search-glass.svg");
+    aTab.tabNode.setIcon(
+      "chrome://messenger/skin/icons/new/compact/search.svg"
+    );
 
     // First clone the page and set up the basics.
     let clone = document
       .getElementById("glodaTab")
       .firstElementChild.cloneNode(true);
 
     aTab.panel.setAttribute("id", "glodaTab" + this.lastTabId);
     aTab.panel.appendChild(clone);
--- a/mail/base/content/mailTabs.js
+++ b/mail/base/content/mailTabs.js
@@ -346,17 +346,19 @@ var mailTabType = {
       type: "message",
       // The set of panes that are legal to be displayed in this mode
       legalPanes: {
         folder: false,
         thread: false,
         message: true,
       },
       openTab(aTab, aArgs) {
-        aTab.tabNode.setIcon("chrome://messenger/skin/icons/file-item.svg");
+        aTab.tabNode.setIcon(
+          "chrome://messenger/skin/icons/new/compact/draft.svg"
+        );
         this.openTab(aTab, false, new MessageTabDisplayWidget(), false);
 
         let viewWrapperToClone =
           "viewWrapperToClone" in aArgs && aArgs.viewWrapperToClone;
         let background = "background" in aArgs && aArgs.background;
 
         if (viewWrapperToClone) {
           // The original view must have a collapsed group header thread's
@@ -495,17 +497,19 @@ var mailTabType = {
        *     content (a search string, a message subject, etc.), make sure you
        *     are using a localized string.
        *
        * XXX This needs to handle opening in the background
        */
       openTab(aTab, aArgs) {
         aTab.glodaSynView = new GlodaSyntheticView(aArgs);
         aTab.title = aArgs.title;
-        aTab.tabNode.setIcon("chrome://global/skin/icons/search-glass.svg");
+        aTab.tabNode.setIcon(
+          "chrome://messenger/skin/icons/new/compact/search.svg"
+        );
 
         this.openTab(aTab, false, new MessagePaneDisplayWidget(), false);
         aTab.folderDisplay.show(aTab.glodaSynView);
         // XXX persist threaded state?
         aTab.folderDisplay.view.showThreaded = true;
 
         let background = "background" in aArgs && aArgs.background;
         if (!background) {
--- a/mail/base/content/specialTabs.js
+++ b/mail/base/content/specialTabs.js
@@ -1359,12 +1359,12 @@ var specialTabs = {
         aTab.browser.contentPrincipal
       );
     }
     document
       .getElementById("tabmail")
       .setTabFavIcon(
         aTab,
         aIcon,
-        "chrome://messenger/skin/icons/file-item.svg"
+        "chrome://messenger/skin/icons/new/compact/draft.svg"
       );
   },
 };
--- a/mail/components/accountcreation/content/accountSetup.xhtml
+++ b/mail/components/accountcreation/content/accountSetup.xhtml
@@ -7,17 +7,17 @@
 
 <html id="accountSetup" xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml"
       windowtype="mail:accountsetup">
 <head>
   <title data-l10n-id="account-setup-tab-title"></title>
   <meta name="color-scheme" content="light dark" />
-  <link rel="icon" href="chrome://messenger/skin/icons/globe.svg" />
+  <link rel="icon" href="chrome://messenger/skin/icons/new/compact/new-mail.svg" />
 
   <link rel="stylesheet" href="chrome://messenger/skin/messenger.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/menulist.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/inContentDialog.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/accountSetup.css" />
 
   <link rel="localization" href="branding/brand.ftl" />
   <link rel="localization" href="messenger/accountcreation/accountSetup.ftl" />
--- a/mail/components/newmailaccount/content/accountProvisioner.xhtml
+++ b/mail/components/newmailaccount/content/accountProvisioner.xhtml
@@ -6,17 +6,17 @@
 <?xml-stylesheet href="chrome://messenger/skin/accountSetup.css" type="text/css"?>
 
 <!DOCTYPE html>
 
 <html id="accountProvisioner" xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title data-l10n-id="account-provisioner-tab-title"></title>
   <meta name="color-scheme" content="light dark" />
-  <link rel="icon" href="chrome://messenger/skin/icons/globe.svg" />
+  <link rel="icon" href="chrome://messenger/skin/icons/new/compact/new-mail.svg" />
 
   <link rel="localization" href="branding/brand.ftl" />
   <link rel="localization" href="messenger/accountProvisioner.ftl" />
 
   <script defer="defer" src="chrome://global/content/globalOverlay.js"></script>
   <script defer="defer" src="chrome://global/content/editMenuOverlay.js"></script>
   <script defer="defer" src="chrome://messenger/content/accountUtils.js"></script>
   <script defer="defer" src="chrome://messenger/content/newmailaccount/accountProvisioner.js"></script>
--- a/mail/components/preferences/preferences.xhtml
+++ b/mail/components/preferences/preferences.xhtml
@@ -149,25 +149,25 @@
         </richlistbox>
 
         <spacer flex="1"/>
 
         <vbox class="sidebar-footer-list">
           <label is="text-link" id="accountButton" class="sidebar-footer-link"
                  onclick="MsgAccountManager(null);">
             <html:img class="sidebar-footer-icon account-icon"
-                      src="chrome://messenger/skin/icons/sidebar-left.svg"
+                      src="chrome://messenger/skin/icons/new/compact/account-settings.svg"
                       alt="" />
             <label data-l10n-id="account-button" class="sidebar-footer-label" flex="1"/>
           </label>
 
           <label is="text-link" id="addonsButton" class="sidebar-footer-link"
                  onclick="window.browsingContext.topChromeWindow.openAddonsMgr();">
             <html:img class="sidebar-footer-icon"
-                      src="chrome://mozapps/skin/extensions/extension.svg"
+                      src="chrome://messenger/skin/icons/new/compact/extension.svg"
                       alt="" />
             <label class="sidebar-footer-label"
                    data-l10n-id="open-addons-sidebar-button"
                    flex="1"/>
           </label>
         </vbox>
 
       </vbox>
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -43,28 +43,26 @@
 % override chrome://global/skin/icons/info.svg chrome://messenger/skin/overrides/info.svg
 % override chrome://global/skin/icons/info-filled.svg chrome://messenger/skin/overrides/info-filled.svg
 % override chrome://global/skin/icons/menu-check.svg chrome://messenger/skin/overrides/check.svg
 % override chrome://global/skin/icons/more.svg chrome://messenger/skin/overrides/more.svg
 % override chrome://global/skin/icons/open-in-new.svg chrome://messenger/skin/overrides/open-in-new.svg
 % override chrome://global/skin/icons/plugin.svg chrome://messenger/skin/overrides/plugin.svg
 % override chrome://global/skin/icons/plugin-blocked.svg chrome://messenger/skin/overrides/plugin-blocked.svg
 % override chrome://global/skin/icons/print.svg chrome://messenger/skin/overrides/print.svg
-% override chrome://global/skin/icons/search-glass.svg chrome://messenger/skin/overrides/search-glass.svg
 % override chrome://global/skin/icons/security.svg chrome://messenger/skin/overrides/security.svg
 % override chrome://global/skin/icons/security-broken.svg chrome://messenger/skin/overrides/security-broken.svg
 % override chrome://global/skin/icons/security-warning.svg chrome://messenger/skin/overrides/security-warning.svg
 % override chrome://global/skin/icons/update-icon.svg chrome://messenger/skin/overrides/update-icon.svg
 % override chrome://global/skin/icons/warning.svg chrome://messenger/skin/overrides/warning.svg
 % override chrome://mozapps/skin/extensions/category-available.svg chrome://messenger/skin/overrides/category-available.svg
 % override chrome://mozapps/skin/extensions/category-discover.svg chrome://messenger/skin/overrides/category-discover.svg
 % override chrome://mozapps/skin/extensions/category-extensions.svg chrome://messenger/skin/overrides/category-extensions.svg
 % override chrome://mozapps/skin/extensions/category-recent.svg chrome://messenger/skin/overrides/category-recent.svg
 % override chrome://mozapps/skin/extensions/category-themes.svg chrome://messenger/skin/overrides/category-themes.svg
-% override chrome://mozapps/skin/extensions/extension.svg chrome://messenger/skin/overrides/extension.svg
 % override chrome://mozapps/skin/extensions/extensionGeneric.svg chrome://messenger/skin/overrides/category-extensions.svg
 
   skin/classic/messenger/overrides/add.svg                    (../shared/mail/overrides/add.svg)
   skin/classic/messenger/overrides/arrow-down.svg             (../shared/mail/overrides/arrow-down.svg)
   skin/classic/messenger/overrides/arrow-down-12.svg          (../shared/mail/overrides/arrow-down-12.svg)
   skin/classic/messenger/overrides/arrow-left.svg             (../shared/mail/overrides/arrow-left.svg)
   skin/classic/messenger/overrides/arrow-left-12.svg          (../shared/mail/overrides/arrow-left-12.svg)
   skin/classic/messenger/overrides/arrow-right.svg            (../shared/mail/overrides/arrow-right.svg)
@@ -101,16 +99,18 @@
   skin/classic/messenger/overrides/security-warning.svg       (../shared/mail/overrides/security-warning.svg)
   skin/classic/messenger/overrides/settings.svg               (../shared/mail/overrides/settings.svg)
   skin/classic/messenger/overrides/update-icon.svg            (../shared/mail/overrides/update-icon.svg)
   skin/classic/messenger/overrides/warning.svg                (../shared/mail/overrides/warning.svg)
 # End Proton icon overrides
 
 # Supernova icon overrides
 % override chrome://global/skin/icons/settings.svg chrome://messenger/skin/icons/new/compact/settings.svg
+% override chrome://mozapps/skin/extensions/extension.svg chrome://messenger/skin/icons/new/compact/extension.svg
+% override chrome://global/skin/icons/search-glass.svg chrome://messenger/skin/icons/new/compact/search.svg
 # End Supernova icon overrides
 
   skin/classic/messenger/abFormFields.css                     (../shared/mail/abFormFields.css)
   skin/classic/messenger/about3Pane.css                       (../shared/mail/about3Pane.css)
   skin/classic/messenger/aboutAddonsExtra.css                 (../shared/mail/aboutAddonsExtra.css)
   skin/classic/messenger/aboutAddressBook.css                 (../shared/mail/aboutAddressBook.css)
   skin/classic/messenger/aboutImport.css                      (../shared/mail/aboutImport.css)
   skin/classic/messenger/aboutNetError.css                    (../shared/mail/aboutNetError.css)
@@ -464,34 +464,40 @@
   skin/classic/messenger/illustrations/form.svg               (../shared/mail/illustrations/form.svg)
   skin/classic/messenger/illustrations/octopus-setup.svg      (../shared/mail/illustrations/octopus-setup.svg)
   skin/classic/messenger/illustrations/sloth.svg              (../shared/mail/illustrations/sloth.svg)
 
 # New design system
   skin/classic/messenger/icons.css                            (../shared/mail/icons.css)
   skin/classic/messenger/colors.css                           (../shared/mail/colors.css)
 
+  skin/classic/messenger/icons/new/compact/account-settings.svg (../shared/mail/icons/new/compact/account-settings.svg)
   skin/classic/messenger/icons/new/compact/address-book.svg   (../shared/mail/icons/new/compact/address-book.svg)
   skin/classic/messenger/icons/new/compact/archive.svg        (../shared/mail/icons/new/compact/archive.svg)
   skin/classic/messenger/icons/new/compact/calendar.svg       (../shared/mail/icons/new/compact/calendar.svg)
   skin/classic/messenger/icons/new/compact/chat.svg           (../shared/mail/icons/new/compact/chat.svg)
   skin/classic/messenger/icons/new/compact/collapse.svg       (../shared/mail/icons/new/compact/collapse.svg)
   skin/classic/messenger/icons/new/compact/draft.svg          (../shared/mail/icons/new/compact/draft.svg)
-  skin/classic/messenger/icons/new/compact/folder.svg         (../shared/mail/icons/new/compact/folder.svg)
+  skin/classic/messenger/icons/new/compact/export.svg         (../shared/mail/icons/new/compact/export.svg)
+  skin/classic/messenger/icons/new/compact/extension.svg      (../shared/mail/icons/new/compact/extension.svg)
   skin/classic/messenger/icons/new/compact/folder-filter.svg  (../shared/mail/icons/new/compact/folder-filter.svg)
   skin/classic/messenger/icons/new/compact/folder-rss.svg     (../shared/mail/icons/new/compact/folder-rss.svg)
+  skin/classic/messenger/icons/new/compact/folder.svg         (../shared/mail/icons/new/compact/folder.svg)
+  skin/classic/messenger/icons/new/compact/globe-secure.svg   (../shared/mail/icons/new/compact/globe-secure.svg)
   skin/classic/messenger/icons/new/compact/globe.svg          (../shared/mail/icons/new/compact/globe.svg)
-  skin/classic/messenger/icons/new/compact/globe-secure.svg   (../shared/mail/icons/new/compact/globe-secure.svg)
+  skin/classic/messenger/icons/new/compact/import.svg         (../shared/mail/icons/new/compact/import.svg)
   skin/classic/messenger/icons/new/compact/inbox.svg          (../shared/mail/icons/new/compact/inbox.svg)
+  skin/classic/messenger/icons/new/compact/mail-secure.svg    (../shared/mail/icons/new/compact/mail-secure.svg)
   skin/classic/messenger/icons/new/compact/mail.svg           (../shared/mail/icons/new/compact/mail.svg)
-  skin/classic/messenger/icons/new/compact/mail-secure.svg    (../shared/mail/icons/new/compact/mail-secure.svg)
+  skin/classic/messenger/icons/new/compact/new-mail.svg       (../shared/mail/icons/new/compact/new-mail.svg)
   skin/classic/messenger/icons/new/compact/newsletter.svg     (../shared/mail/icons/new/compact/newsletter.svg)
   skin/classic/messenger/icons/new/compact/outbox.svg         (../shared/mail/icons/new/compact/outbox.svg)
   skin/classic/messenger/icons/new/compact/overflow.svg       (../shared/mail/icons/new/compact/overflow.svg)
   skin/classic/messenger/icons/new/compact/rss.svg            (../shared/mail/icons/new/compact/rss.svg)
+  skin/classic/messenger/icons/new/compact/search.svg         (../shared/mail/icons/new/compact/search.svg)
   skin/classic/messenger/icons/new/compact/sent.svg           (../shared/mail/icons/new/compact/sent.svg)
   skin/classic/messenger/icons/new/compact/settings.svg       (../shared/mail/icons/new/compact/settings.svg)
   skin/classic/messenger/icons/new/compact/spam.svg           (../shared/mail/icons/new/compact/spam.svg)
   skin/classic/messenger/icons/new/compact/tasks.svg          (../shared/mail/icons/new/compact/tasks.svg)
   skin/classic/messenger/icons/new/compact/template.svg       (../shared/mail/icons/new/compact/template.svg)
   skin/classic/messenger/icons/new/compact/trash.svg          (../shared/mail/icons/new/compact/trash.svg)
 
   skin/classic/messenger/icons/new/normal/address-book.svg    (../shared/mail/icons/new/normal/address-book.svg)
--- a/mail/themes/shared/mail/aboutAddonsExtra.css
+++ b/mail/themes/shared/mail/aboutAddonsExtra.css
@@ -43,17 +43,17 @@ button[name="plugin"] {
 .page-options-menu > .more-options-button {
   -moz-context-properties: fill, stroke, stroke-opacity;
   fill: color-mix(in srgb, currentColor 20%, transparent);
   stroke: currentColor;
 }
 
 /* Settings icon override */
 #preferencesButton .sidebar-footer-icon {
-  content: url("chrome://messenger/skin/icons/new/normal/settings.svg");
+  content: var(--icon-settings);
 }
 
 .page-options-menu > .more-options-button {
   background-image: url("chrome://messenger/skin/icons/new/touch/settings.svg") !important;
   width: 24px !important;
   height: 24px !important;
 }
 
--- a/mail/themes/shared/mail/icons.css
+++ b/mail/themes/shared/mail/icons.css
@@ -1,33 +1,39 @@
 /* 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/. */
 
 /* Density variations */
 
 :root {
+  --icon-account-settings: url("chrome://messenger/skin/icons/new/compact/account-settings.svg");
   --icon-address-book: url("chrome://messenger/skin/icons/new/compact/address-book.svg");
   --icon-archive: url("chrome://messenger/skin/icons/new/compact/archive.svg");
   --icon-calendar: url("chrome://messenger/skin/icons/new/compact/calendar.svg");
   --icon-chat: url("chrome://messenger/skin/icons/new/compact/chat.svg");
   --icon-collapse: url("chrome://messenger/skin/icons/new/compact/collapse.svg");
   --icon-draft: url("chrome://messenger/skin/icons/new/compact/draft.svg");
-  --icon-folder: url("chrome://messenger/skin/icons/new/compact/folder.svg");
+  --icon-export: url("chrome://messenger/skin/icons/new/compact/export.svg");
+  --icon-extension: url("chrome://messenger/skin/icons/new/compact/extension.svg");
   --icon-folder-filter: url("chrome://messenger/skin/icons/new/compact/folder-filter.svg");
   --icon-folder-rss: url("chrome://messenger/skin/icons/new/compact/folder-rss.svg");
+  --icon-folder: url("chrome://messenger/skin/icons/new/compact/folder.svg");
+  --icon-globe-secure: url("chrome://messenger/skin/icons/new/compact/globe-secure.svg");
   --icon-globe: url("chrome://messenger/skin/icons/new/compact/globe.svg");
-  --icon-globe-secure: url("chrome://messenger/skin/icons/new/compact/globe-secure.svg");
+  --icon-import: url("chrome://messenger/skin/icons/new/compact/import.svg");
   --icon-inbox: url("chrome://messenger/skin/icons/new/compact/inbox.svg");
+  --icon-mail-secure: url("chrome://messenger/skin/icons/new/compact/mail-secure.svg");
   --icon-mail: url("chrome://messenger/skin/icons/new/compact/mail.svg");
-  --icon-mail-secure: url("chrome://messenger/skin/icons/new/compact/mail-secure.svg");
+  --icon-new-mail: url("chrome://messenger/skin/icons/new/compact/new-mail.svg");
   --icon-newsletter: url("chrome://messenger/skin/icons/new/compact/newsletter.svg");
   --icon-outbox: url("chrome://messenger/skin/icons/new/compact/outbox.svg");
   --icon-overflow: url("chrome://messenger/skin/icons/new/compact/overflow.svg");
   --icon-rss: url("chrome://messenger/skin/icons/new/compact/rss.svg");
+  --icon-search: url("chrome://messenger/skin/icons/new/compact/search.svg");
   --icon-sent: url("chrome://messenger/skin/icons/new/compact/sent.svg");
   --icon-settings: url("chrome://messenger/skin/icons/new/compact/settings.svg");
   --icon-spam: url("chrome://messenger/skin/icons/new/compact/spam.svg");
   --icon-tasks: url("chrome://messenger/skin/icons/new/compact/tasks.svg");
   --icon-template: url("chrome://messenger/skin/icons/new/compact/template.svg");
   --icon-trash: url("chrome://messenger/skin/icons/new/compact/trash.svg");
 
   --spaces-icon-mail:  url("chrome://messenger/skin/icons/new/normal/mail.svg");;
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/account-settings.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+  <path d="M8 .498a1 1 0 0 0-.48.123l-5.5 3c-.32.176-.52.514-.52.879v7c0 .365.2.703.52.879l1.48.807V12c0-.831.669-1.5 1.5-1.5h1.5c-.741-.295-1.999-1.953-2-3.5a3.5 3.5 0 0 1 7 0c-.001 1.547-1.259 3.205-2 3.5H11c.831 0 1.5.669 1.5 1.5v1.186l1.48-.807c.32-.176.52-.514.52-.879v-7c0-.365-.2-.703-.52-.879l-5.5-3A1 1 0 0 0 8 .498ZM7.969 15.5h.062z" fill="context-fill"/>
+  <path d="M8-.002c-.248 0-.496.06-.72.184l-5.5 3A1.5 1.5 0 0 0 1 4.5v7a1.502 1.502 0 0 0 .78 1.318l5.5 3c.448.246.992.246 1.44 0l5.5-3A1.5 1.5 0 0 0 15 11.5v-7a1.502 1.502 0 0 0-.78-1.318l-5.5-3A1.499 1.499 0 0 0 8-.002ZM8 1a.5.5 0 0 1 .24.06l5.5 3c.16.088.26.258.26.44v7c0 .182-.1.352-.26.44l-.74.404V12c0-1.1-.9-2-2-2h-.326c.167-.2.372-.269.527-.514C11.646 8.782 12 7.91 12 7c0-2.203-1.797-4-4-4-2.203 0-4 1.797-4 4 0 .909.354 1.782.799 2.486.155.245.36.314.527.514H5c-1.1 0-2 .9-2 2v.344l-.74-.405A.503.503 0 0 1 2 11.5v-7c0-.182.1-.352.26-.44l5.5-3A.5.5 0 0 1 8 1Zm0 3c1.663 0 3 1.337 3 3 0 .638-.275 1.368-.645 1.953-.369.585-.879 1.018-1.04 1.082A.5.5 0 0 0 9.5 11H11c.563 0 1 .437 1 1v.889l-3.76 2.05a.502.502 0 0 1-.48 0L4 12.89V12c0-.563.437-1 1-1h1.5a.5.5 0 0 0 .186-.965c-.162-.064-.672-.497-1.041-1.082C5.275 8.368 5 7.638 5 7c0-1.663 1.337-3 3-3Z" fill="context-stroke"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/export.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+  <path d="M11.732 4c.17.294.268.635.268 1v6c0 1.108-.892 2-2 2H5a1.99 1.99 0 0 1-1-.268V13c0 .554.446 1 1 1h7c.554 0 1-.446 1-1V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+  <path d="M3 1c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2 0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2 0-1.1-.9-2-2-2Zm0 1h7c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm3.5 1c-.14 0-.24.043-.354.146l-2 2a.5.5 0 0 0 .708.708L6 4.707V7.5a.5.5 0 1 0 1 0V4.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2C6.763 3.033 6.65 3 6.5 3ZM12 4c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1h6c1.1 0 2-.9 2-2zM4.5 8a.5.5 0 0 0-.5.5v1c0 .822.678 1.5 1.5 1.5h2c.822 0 1.5-.678 1.5-1.5v-1a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1c0 .286-.214.5-.5.5h-2a.488.488 0 0 1-.5-.5v-1a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/extension.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+  <path d="M14 6.5c-.97 0-1 1-1.75 1a.77.77 0 0 1-.75-.75V5.5a1 1 0 0 0-1-1H9.25a.77.77 0 0 1-.75-.75c0-.75 1-.78 1-1.75C9.5 1.14 8.1.5 7 .5S4.5 1.14 4.5 2c0 .97 1 1 1 1.75a.77.77 0 0 1-.75.75H1.5a1 1 0 0 0-1 1v1.25c.01.41.34.74.75.75.75 0 .78-1 1.75-1 .87 0 1.5 1.4 1.5 2.5s-.64 2.5-1.5 2.5c-.97 0-1-1-1.75-1a.77.77 0 0 0-.75.75v3.25a1 1 0 0 0 1 1h3.25a.77.77 0 0 0 .75-.75c0-.75-1-.78-1-1.75 0-.86 1.4-1.5 2.5-1.5s2.5.64 2.5 1.5c0 .97-1 1-1 1.75.01.41.34.74.75.75h1.25a1 1 0 0 0 1-1v-3.25a.77.77 0 0 1 .75-.75c.75 0 .78 1 1.75 1 .86 0 1.5-1.4 1.5-2.5s-.64-2.5-1.5-2.5z" fill="context-fill"/>
+  <path d="M7 0c-.647 0-1.33.175-1.902.488C4.526.802 4 1.298 4 2c0 .657.403 1.094.668 1.33.133.118.23.209.277.27.044.057.05.076.051.14a.263.263 0 0 1-.26.26H1.5C.677 4 0 4.677 0 5.5v1.262A1.277 1.277 0 0 0 1.238 8h.012c.299 0 .57-.117.756-.258.186-.14.306-.293.41-.41C2.625 7.097 2.686 7 3 7c.167 0 .417.176.637.578C3.857 7.981 4 8.545 4 9c0 .453-.144 1.019-.365 1.422S3.159 11 3 11c-.313 0-.375-.097-.584-.332-.104-.117-.224-.27-.41-.41A1.279 1.279 0 0 0 1.25 10h-.014c-.67.017-1.219.565-1.236 1.236V14.5c0 .823.677 1.5 1.5 1.5h3.264A1.276 1.276 0 0 0 6 14.764v-.014c0-.299-.117-.57-.258-.756-.14-.186-.293-.306-.41-.41C5.097 13.375 5 13.314 5 13c0-.159.175-.414.578-.635A3.211 3.211 0 0 1 7 12c.453 0 1.019.144 1.422.365S9 12.841 9 13c0 .313-.097.375-.332.584-.117.104-.27.224-.41.41A1.279 1.279 0 0 0 8 14.75v.012A1.277 1.277 0 0 0 9.238 16H10.5c.823 0 1.5-.677 1.5-1.5v-3.236a.263.263 0 0 1 .26-.26c.064.001.083.007.14.05.061.047.152.145.27.278.236.265.673.668 1.33.668.701 0 1.198-.526 1.512-1.098A4.046 4.046 0 0 0 16 9c0-.647-.175-1.33-.488-1.902C15.198 6.526 14.702 6 14 6c-.657 0-1.094.403-1.33.668a2.493 2.493 0 0 1-.27.277c-.057.044-.076.05-.14.051a.263.263 0 0 1-.26-.26V5.5c0-.823-.677-1.5-1.5-1.5H9.264a.263.263 0 0 1-.26-.26c.001-.064.007-.083.05-.14.047-.061.145-.152.278-.27C9.597 3.094 10 2.657 10 2 10 1.299 9.474.802 8.902.488A4.046 4.046 0 0 0 7 0Zm0 1c.453 0 1.019.144 1.422.365S9 1.841 9 2c0 .313-.097.375-.332.584-.117.104-.27.224-.41.41A1.279 1.279 0 0 0 8 3.75v.014c.017.67.565 1.219 1.236 1.236H10.5c.282 0 .5.218.5.5v1.264c.017.67.565 1.219 1.236 1.236h.014c.299 0 .57-.117.756-.258.186-.14.306-.293.41-.41.209-.235.27-.332.584-.332.159 0 .414.175.635.578.221.403.365.969.365 1.422 0 .453-.144 1.019-.365 1.422S14.159 11 14 11c-.313 0-.375-.097-.584-.332-.104-.117-.224-.27-.41-.41A1.279 1.279 0 0 0 12.25 10h-.014c-.67.017-1.219.565-1.236 1.236V14.5c0 .282-.218.5-.5.5H9.262a.26.26 0 0 1-.258-.258c0-.066.007-.085.05-.142.047-.061.145-.152.278-.27.265-.236.668-.673.668-1.33 0-.701-.526-1.198-1.098-1.512A4.046 4.046 0 0 0 7 11c-.647 0-1.33.175-1.902.488C4.526 11.802 4 12.298 4 13c0 .657.403 1.094.668 1.33.133.118.23.209.277.27.044.057.05.076.051.14a.263.263 0 0 1-.26.26H1.5a.493.493 0 0 1-.5-.5v-3.236a.263.263 0 0 1 .26-.26c.064.001.083.007.14.05.061.047.152.145.27.278.236.265.673.668 1.33.668.701 0 1.198-.526 1.512-1.098A4.046 4.046 0 0 0 5 9c0-.645-.172-1.33-.484-1.902C4.203 6.525 3.703 6 3 6c-.657 0-1.094.403-1.33.668a2.493 2.493 0 0 1-.27.277c-.057.044-.076.05-.142.051A.26.26 0 0 1 1 6.738V5.5c0-.282.218-.5.5-.5h3.264A1.276 1.276 0 0 0 6 3.764V3.75c0-.299-.117-.57-.258-.756-.14-.186-.293-.306-.41-.41C5.097 2.375 5 2.314 5 2c0-.159.175-.414.578-.635A3.211 3.211 0 0 1 7 1Z" fill="context-stroke"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/import.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+  <path d="M11.732 4c.17.294.268.635.268 1v6c0 1.108-.892 2-2 2H5a1.99 1.99 0 0 1-1-.268V13c0 .554.446 1 1 1h7c.554 0 1-.446 1-1V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+  <path d="M3 1c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2 0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2 0-1.1-.9-2-2-2Zm0 1h7c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm3.5 1a.5.5 0 0 0-.5.5v2.793L4.854 5.146a.5.5 0 0 0-.708.708l2 2C6.322 8.029 6.5 8 6.5 8s.182.025.354-.146l2-2a.5.5 0 0 0-.708-.708L7 6.293V3.5a.5.5 0 0 0-.5-.5ZM12 4c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1h6c1.1 0 2-.9 2-2zM4.5 8a.5.5 0 0 0-.5.5v1c0 .822.678 1.5 1.5 1.5h2c.822 0 1.5-.678 1.5-1.5v-1a.5.5 0 1 0-1 0v1c0 .286-.214.5-.5.5h-2a.488.488 0 0 1-.5-.5v-1a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/new-mail.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+  <path d="M3 4c-.554 0-1 .446-1 1v7c0 .554.446 1 1 1h6.5c-.817 0-1.5-.683-1.5-1.5S8.683 10 9.5 10H11V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+  <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h8v-1H3c-.563 0-1-.437-1-1V5c0-.563.437-1 1-1h10c.563 0 1 .437 1 1v5h1V5c0-1.1-.9-2-2-2Zm.47 2.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L6.697 9.01l.971.863a.5.5 0 0 0 .664 0l.97-.863.991.99H11v-.707l-.95-.95 2.782-2.47a.5.5 0 0 0 .041-.705.5.5 0 0 0-.705-.041L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125ZM12.5 8a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H13V8.5a.5.5 0 0 0-.5-.5Zm1.5 5v.729c.301-.176.553-.428.729-.729Z" fill="context-stroke"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/new/compact/search.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" viewBox="0 0 16 16" fill-opacity="context-fill-opacity" height="16" width="16">
+  <path d="M6.5 2C4.02 2 2 4.02 2 6.5S4.02 11 6.5 11c1.06 0 2.034-.371 2.805-.988l3.841 3.842a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708l-3.842-3.841C10.629 8.535 11 7.56 11 6.5 11 4.02 8.98 2 6.5 2zm0 1C8.439 3 10 4.561 10 6.5S8.439 10 6.5 10A3.492 3.492 0 0 1 3 6.5C3 4.561 4.561 3 6.5 3z" fill="context-stroke"/>
+</svg>
--- a/mail/themes/shared/mail/panelUI.css
+++ b/mail/themes/shared/mail/panelUI.css
@@ -287,17 +287,20 @@ menu.subviewbutton,
 .subviewbutton-iconic > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 /* Temporary styles for the supernova icons */
-#appmenu_preferences.subviewbutton-iconic > .toolbarbutton-icon {
+#appmenu_preferences.subviewbutton-iconic > .toolbarbutton-icon,
+#appmenu_addons.subviewbutton-iconic > .toolbarbutton-icon,
+#appmenu_accountmgr.subviewbutton-iconic > .toolbarbutton-icon,
+#appmenu_activityManager.subviewbutton-iconic > .toolbarbutton-icon {
   -moz-context-properties: fill, stroke, stroke-opacity;
   fill: color-mix(in srgb, currentColor 20%, transparent);
   stroke: currentColor;
 }
 
 /* We don't always display: none this item, and if it has forced width (like above)
  * or margin, that impacts the position of the label. Fix:
  */
--- a/mail/themes/shared/mail/preferences/preferences.css
+++ b/mail/themes/shared/mail/preferences/preferences.css
@@ -65,17 +65,17 @@ search-textbox {
 }
 
 #pref-category-box {
   background-color: var(--in-content-categories-background);
   width: 240px;
 }
 
 /* Temporary styles for the supernova icons */
-#prefsButton .sidebar-footer-icon,
+.sidebar-footer-icon,
 #category-general .category-icon {
   -moz-context-properties: fill, stroke, stroke-opacity;
   fill: color-mix(in srgb, currentColor 20%, transparent);
   stroke: currentColor;
 }
 
 /*
   The stack has some very tall content but it shouldn't be taller than the
--- a/mail/themes/shared/mail/primaryToolbar.css
+++ b/mail/themes/shared/mail/primaryToolbar.css
@@ -128,17 +128,17 @@
   list-style-image: url("chrome://messenger/skin/icons/filter.svg");
 }
 
 #button-showconversation {
   list-style-image: url("chrome://messenger/skin/icons/conversation.svg");
 }
 
 #button-addons {
-  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+  list-style-image: var(--icon-extension);
 }
 
 .button-appmenu {
   list-style-image: url("chrome://messenger/skin/icons/appbutton.svg");
   min-width: 35px !important;
   margin-inline: 4px;
 }
 
@@ -235,44 +235,44 @@ toolbar[mode="text"] .button-appmenu .to
   list-style-image: url("chrome://messenger/skin/icons/save-as.svg");
 }
 
 #appmenu_emptyTrash {
   list-style-image: url("chrome://messenger/skin/icons/delete.svg");
 }
 
 #appmenu_activityManager {
-  list-style-image: url("chrome://messenger/skin/icons/file-item.svg");
+  list-style-image: var(--icon-draft);
 }
 
 #appmenu_accountmgr {
-  list-style-image: url("chrome://messenger/skin/icons/sidebar-left.svg");
+  list-style-image: var(--icon-account-settings);
 }
 
 #appmenu_filters,
 #appmenu_filtersCmd {
   list-style-image: url("chrome://messenger/skin/icons/filter.svg");
 }
 
 #appmenu_customize {
   list-style-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
 }
 
 /* Temporary styles for the supernova icons */
 #appmenu_preferences {
-  list-style-image: url("chrome://messenger/skin/icons/new/compact/settings.svg");
+  list-style-image: var(--icon-settings);
 }
 
 #appmenu-quit {
   list-style-image: url("chrome://messenger/skin/icons/quit.svg");
 }
 
 #appmenu_addons,
 #appmenu_Add-Ons {
-  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+  list-style-image: var(--icon-extension);
 }
 
 #appmenu_help,
 #appmenu_openHelp {
   list-style-image: url(chrome://global/skin/icons/help.svg);
 }
 
 #appmenu_addressBook {
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -391,17 +391,17 @@ button.tab-close-button {
 #alltabs-button > .toolbarbutton-text,
 #alltabs-button > .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 /* All Tabs Menupopup */
 
 .alltabs-item {
-  list-style-image: url("chrome://messenger/skin/icons/file-item.svg");
+  list-style-image: var(--icon-draft);
 }
 
 .alltabs-item[selected] {
   font-weight: bold;
 }
 
 .alltabs-item[busy] {
   list-style-image: url("chrome://global/skin/icons/loading.png") !important;
--- a/mailnews/base/prefs/content/AccountManager.xhtml
+++ b/mailnews/base/prefs/content/AccountManager.xhtml
@@ -15,17 +15,17 @@
       xmlns:html="http://www.w3.org/1999/xhtml"
       scrolling="false">
 <head>
   <title>&accountManagerTitle.label;</title>
 
   <meta http-equiv="Content-Security-Policy" content="default-src chrome:; script-src chrome: 'unsafe-inline'; img-src chrome: moz-icon: https: data:; style-src chrome: data: 'unsafe-inline'; object-src 'none'" />
   <meta name="color-scheme" content="light dark" />
 
-  <link rel="icon" href="chrome://messenger/skin/icons/sidebar-left.svg" />
+  <link rel="icon" href="chrome://messenger/skin/icons/new/compact/account-settings.svg" />
 
   <link rel="stylesheet" href="chrome://messenger/skin/inContentDialog.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/folderPane.css" />
   <link rel="stylesheet" href="chrome://messenger/skin/shared/accountManager.css" />
 
   <link rel="localization" href="branding/brand.ftl" />
   <link rel="localization" href="messenger/accountManager.ftl" />
 
@@ -110,17 +110,17 @@
         <label class="sidebar-footer-label"
                data-l10n-id="open-preferences-sidebar-button2"
                flex="1"/>
       </label>
 
       <label is="text-link" id="addonsButton" class="sidebar-footer-link"
              onclick="window.browsingContext.topChromeWindow.openAddonsMgr();">
         <html:img class="sidebar-footer-icon"
-                  src="chrome://mozapps/skin/extensions/extension.svg"
+                  src="chrome://messenger/skin/icons/new/compact/extension.svg"
                   alt="" />
         <label class="sidebar-footer-label"
                data-l10n-id="open-addons-sidebar-button"
                flex="1"/>
       </label>
     </vbox>
   </html:aside>
   <html:aside>
--- a/mailnews/import/content/aboutImport.xhtml
+++ b/mailnews/import/content/aboutImport.xhtml
@@ -12,17 +12,17 @@
   <link rel="stylesheet" href="chrome://calendar/skin/shared/calendar-attendees.css"/>
   <link rel="stylesheet" href="chrome://calendar/skin/shared/calendar-item-summary.css"/>
   <link rel="stylesheet" href="chrome://messenger/skin/accountSetup.css"/>
   <link rel="stylesheet" href="chrome://messenger/skin/aboutImport.css"/>
 
   <link rel="localization" href="branding/brand.ftl" />
   <link rel="localization" href="messenger/aboutImport.ftl"/>
 
-  <link rel="icon" href="chrome://messenger/skin/icons/import.svg" sizes="any"/>
+  <link rel="icon" href="chrome://messenger/skin/icons/new/compact/import.svg" sizes="any"/>
 
   <script defer="" src="chrome://messenger/content/aboutImport.js"></script>
   <script defer="" src="chrome://messenger/content/csv-field-map.js"></script>
   <script defer="" src="chrome://calendar/content/widgets/calendar-item-summary.js"></script>
 </head>
 <body>
   <main id="main">
     <section id="errorNotifications"></section>