--- a/browser/themes/linux/downloads/indicator.css
+++ b/browser/themes/linux/downloads/indicator.css
@@ -16,33 +16,40 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
-  --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
 #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: 16px;
   height: 16px;
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%endif
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[cui-areatype="toolbar"]:not([progress]) > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 0;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 1;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: url("chrome://browser/skin/downloads/download-icon-no-bar.svg");
+}
+%endif
+
 toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   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;
@@ -76,16 +83,18 @@ toolbar[brighttext] #downloads-button[cu
   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;
 }
 
+/*** Download notifications ***/
+
 #downloads-indicator-notification {
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
 }

--- a/browser/themes/osx/downloads/indicator.css
+++ b/browser/themes/osx/downloads/indicator.css
@@ -1,52 +1,56 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../shared/downloads/indicator.inc.css
 
 /*** Status and progress indicator ***/
 
-#downloads-indicator-anchor {
-  min-width: 16px;
-  min-height: 16px;
-}
-
 #downloads-animation-container {
   min-height: 1px;
   min-width: 1px;
   height: 1px;
   margin-bottom: -1px;
   /* Makes the outermost animation container element positioned, so that its
      contents are rendered over the main browser window in the Z order.
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
-  --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
-#downloads-indicator-icon {
+#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);
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+%endif
 }
 
-toolbar[brighttext] #downloads-indicator-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[cui-areatype="toolbar"]:not([progress]) > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 0;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 1;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: url("chrome://browser/skin/downloads/download-icon-no-bar.svg");
+}
+%endif
+
+toolbar[brighttext] #downloads-button[cui-areatype="toolbar"]:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   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;
@@ -96,18 +100,16 @@ toolbar[brighttext] #downloads-indicator
   opacity: 0;
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
 }
 
-/*** Progress bar and text ***/
-
 @keyframes downloadsIndicatorNotificationStartRight {
   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
   20%  { opacity: .85; animation-timing-function: ease-out; }
   to   { opacity: 0; transform: translate(0) scale(1); }
 }
 
 @keyframes downloadsIndicatorNotificationStartLeft {
   from { opacity: 0; transform: translate(128px, 128px) scale(8); }

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-bar-animation.svg
@@ -0,0 +1,571 @@
+<!-- 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="816" height="3">
+  <svg width="16" height="3">
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#a)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="16">
+    <defs>
+      <clipPath id="b">
+        <path fill="#fff" d="M2 14v2h.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#b)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="32">
+    <defs>
+      <clipPath id="c">
+        <path fill="#fff" d="M2 14v2h.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#c)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="48">
+    <defs>
+      <clipPath id="d">
+        <path fill="#fff" d="M2 14v2h.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#d)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="64">
+    <defs>
+      <clipPath id="e">
+        <path fill="#fff" d="M2 14v2h.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#e)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="80">
+    <defs>
+      <clipPath id="f">
+        <path fill="#fff" d="M2 14v2h1.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#f)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="96">
+    <defs>
+      <clipPath id="g">
+        <path fill="#fff" d="M2 14v2h1.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#g)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="112">
+    <defs>
+      <clipPath id="h">
+        <path fill="#fff" d="M2 14v2h1.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#h)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="128">
+    <defs>
+      <clipPath id="i">
+        <path fill="#fff" d="M2 14v2h1.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#i)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="144">
+    <defs>
+      <clipPath id="j">
+        <path fill="#fff" d="M2 14v2h2.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#j)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="160">
+    <defs>
+      <clipPath id="k">
+        <path fill="#fff" d="M2 14v2h2.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#k)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="176">
+    <defs>
+      <clipPath id="l">
+        <path fill="#fff" d="M2 14v2h2.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#l)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="192">
+    <defs>
+      <clipPath id="m">
+        <path fill="#fff" d="M2 14v2h2.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#m)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="208">
+    <defs>
+      <clipPath id="n">
+        <path fill="#fff" d="M2 14v2h3.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#n)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="224">
+    <defs>
+      <clipPath id="o">
+        <path fill="#fff" d="M2 14v2h3.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#o)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="240">
+    <defs>
+      <clipPath id="p">
+        <path fill="#fff" d="M2 14v2h3.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#p)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="256">
+    <defs>
+      <clipPath id="q">
+        <path fill="#fff" d="M2 14v2h3.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#q)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="272">
+    <defs>
+      <clipPath id="r">
+        <path fill="#fff" d="M2 14v2h4.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#r)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="288">
+    <defs>
+      <clipPath id="s">
+        <path fill="#fff" d="M2 14v2h4.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#s)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="304">
+    <defs>
+      <clipPath id="t">
+        <path fill="#fff" d="M2 14v2h4.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#t)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="320">
+    <defs>
+      <clipPath id="u">
+        <path fill="#fff" d="M2 14v2h4.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#u)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="336">
+    <defs>
+      <clipPath id="v">
+        <path fill="#fff" d="M2 14v2h5.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#v)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="352">
+    <defs>
+      <clipPath id="w">
+        <path fill="#fff" d="M2 14v2h5.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#w)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="368">
+    <defs>
+      <clipPath id="x">
+        <path fill="#fff" d="M2 14v2h5.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#x)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="384">
+    <defs>
+      <clipPath id="y">
+        <path fill="#fff" d="M2 14v2h5.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#y)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="400">
+    <defs>
+      <clipPath id="z">
+        <path fill="#fff" d="M2 14v2h6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#z)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="416">
+    <defs>
+      <clipPath id="A">
+        <path fill="#fff" d="M2 14v2h6.24v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#A)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="432">
+    <defs>
+      <clipPath id="B">
+        <path fill="#fff" d="M2 14v2h6.48v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#B)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="448">
+    <defs>
+      <clipPath id="C">
+        <path fill="#fff" d="M2 14v2h6.72v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#C)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="464">
+    <defs>
+      <clipPath id="D">
+        <path fill="#fff" d="M2 14v2h6.96v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#D)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="480">
+    <defs>
+      <clipPath id="E">
+        <path fill="#fff" d="M2 14v2h7.2v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#E)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="496">
+    <defs>
+      <clipPath id="F">
+        <path fill="#fff" d="M2 14v2h7.44v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#F)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="512">
+    <defs>
+      <clipPath id="G">
+        <path fill="#fff" d="M2 14v2h7.68v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#G)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="528">
+    <defs>
+      <clipPath id="H">
+        <path fill="#fff" d="M2 14v2h7.92v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#H)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="544">
+    <defs>
+      <clipPath id="I">
+        <path fill="#fff" d="M2 14v2h8.16v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#I)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="560">
+    <defs>
+      <clipPath id="J">
+        <path fill="#fff" d="M2 14v2h8.4v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#J)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="576">
+    <defs>
+      <clipPath id="K">
+        <path fill="#fff" d="M2 14v2h8.64v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#K)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="592">
+    <defs>
+      <clipPath id="L">
+        <path fill="#fff" d="M2 14v2h8.88v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#L)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="608">
+    <defs>
+      <clipPath id="M">
+        <path fill="#fff" d="M2 14v2h9.12v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#M)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="624">
+    <defs>
+      <clipPath id="N">
+        <path fill="#fff" d="M2 14v2h9.36v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#N)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="640">
+    <defs>
+      <clipPath id="O">
+        <path fill="#fff" d="M2 14v2h9.6v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#O)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="656">
+    <defs>
+      <clipPath id="P">
+        <path fill="#fff" d="M2 14v2h9.84v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#P)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="672">
+    <defs>
+      <clipPath id="Q">
+        <path fill="#fff" d="M2 14v2h10.08v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#Q)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="688">
+    <defs>
+      <clipPath id="R">
+        <path fill="#fff" d="M2 14v2h10.32v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#R)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="704">
+    <defs>
+      <clipPath id="S">
+        <path fill="#fff" d="M2 14v2h10.56v-2H2"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z"/>
+    <g clip-path="url(#S)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="720">
+    <defs>
+      <clipPath id="T">
+        <path fill="#fff" d="M2 14v2h10.8v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#T)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="736">
+    <defs>
+      <clipPath id="U">
+        <path fill="#fff" d="M2 14v2h11.04v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#U)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="752">
+    <defs>
+      <clipPath id="V">
+        <path fill="#fff" d="M2 14v2h11.28v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#V)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="768">
+    <defs>
+      <clipPath id="W">
+        <path fill="#fff" d="M2 14v2h11.52v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#W)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="784">
+    <defs>
+      <clipPath id="X">
+        <path fill="#fff" d="M2 14v2h11.76v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#X)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="800">
+    <defs>
+      <clipPath id="Y">
+        <path fill="#fff" d="M2 14v2h12v-2H2"/>
+      </clipPath>
+    </defs>
+    <g clip-path="url(#Y)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+  <svg width="16" height="3" x="816">
+    <defs>
+      <clipPath id="Z">
+        <path fill="#fff" d="M2 14v2s0 0 0 0v-2s0 0 0 0"/>
+      </clipPath>
+    </defs>
+    <path fill="#49494F" fill-opacity=".3" d="M14.318.07h-13a1.35 1.35 0 0 0 0 2.7h13a1.35 1.35 0 0 0 0-2.7z" display="block"/>
+    <g clip-path="url(#Z)" transform="matrix(1.35 0 0 1.35 -2.731 -18.83)">
+      <path fill="context-fill" d="M12.629 14H3a1 1 0 0 0 0 2h9.629a1 1 0 0 0 0-2z"/>
+    </g>
+  </svg>
+</svg>

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-icon-no-bar.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="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M7.293 12.725a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.413L9 9.605V1.019a1 1 0 0 0-2 0v8.586L3.707 6.312a1 1 0 0 0-1.414 1.413l5 5z"/>
+</svg>

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,12 +1,72 @@
 /* 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-anchor {
+  min-width: 16px;
+  min-height: 16px;
+}
+
+#downloads-button {
+%ifdef MOZ_PHOTON_THEME
+  --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
+%else
+  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
+%endif
+}
+
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-indicator-progress-icon {
+  min-width: 800px;
+  height: 3px;
+  margin-top: 14px;
+  background: url("chrome://browser/skin/downloads/download-bar-animation.svg") 0 0 no-repeat;
+  transform: translateX(0px);
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  /* 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: 101s;
+  animation-timing-function: steps(50);
+  animation-name: indicatorProgressBar;
+}
+
+toolbar[brighttext] #downloads-indicator-progress-icon {
+  animation-name: indicatorProgressBarDark;
+}
+
+@keyframes indicatorProgressBar {
+  from  { transform: translateX(0); }
+  to    { transform: translateX(-800px); }
+}
+@keyframes indicatorProgressBarDark {
+  0% {
+    transform: translateX(0);
+    filter: brightness(0.7);
+  }
+  100% {
+    transform: translateX(-800px);
+    filter: brightness(1);
+  }
+}
+
+/* Fill progressbar from right-left for RTL.
+   transform applied to the container as child's transform property is set from JS */
+#downloads-button > #downloads-indicator-anchor > #downloads-indicator-icon:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+%else
+
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image) bottom no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   background-size: 16px;
   margin-top: 16px;
   /* From javascript side we use animation delay from 0s to -100s to show
    * corresponding frames needed for progress.
@@ -39,16 +99,17 @@ toolbar[brighttext] #downloads-indicator
     margin-top: 12px;
     filter: brightness(0.7);
   }
   100% {
     margin-top: 2px;
     filter: brightness(1);
   }
 }
+%endif
 
 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
   animation-name: downloadsIndicatorStartJump;
   /* Upon changing the overall duration below, please keep the delay time of
      setTimeout() identical in indicator.js for this animation. */
   animation-duration: 0.5s;
   animation-delay: 1s;
   animation-iteration-count: 2;

--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -48,16 +48,20 @@
   skin/classic/browser/customizableui/subView-arrow-back-inverted@2x.png  (../shared/customizableui/subView-arrow-back-inverted@2x.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl.png  (../shared/customizableui/subView-arrow-back-inverted-rtl.png)
   skin/classic/browser/customizableui/subView-arrow-back-inverted-rtl@2x.png  (../shared/customizableui/subView-arrow-back-inverted-rtl@2x.png)
   skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
   skin/classic/browser/customizableui/whimsy@2x.png            (../shared/customizableui/whimsy@2x.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
   skin/classic/browser/downloads/download-blocked.svg          (../shared/downloads/download-blocked.svg)
   skin/classic/browser/downloads/download-summary.svg          (../shared/downloads/download-summary.svg)
+#ifdef MOZ_PHOTON_ANIMATIONS
+  skin/classic/browser/downloads/download-bar-animation.svg    (../shared/downloads/download-bar-animation.svg)
+  skin/classic/browser/downloads/download-icon-no-bar.svg      (../shared/downloads/download-icon-no-bar.svg)
+#endif
   skin/classic/browser/drm-icon.svg                            (../shared/drm-icon.svg)
   skin/classic/browser/fullscreen/insecure.svg                 (../shared/fullscreen/insecure.svg)
   skin/classic/browser/fullscreen/secure.svg                   (../shared/fullscreen/secure.svg)
   skin/classic/browser/connection-secure.svg                   (../shared/identity-block/connection-secure.svg)
   skin/classic/browser/connection-mixed-passive-loaded.svg     (../shared/identity-block/connection-mixed-passive-loaded.svg)
   skin/classic/browser/connection-mixed-active-loaded.svg      (../shared/identity-block/connection-mixed-active-loaded.svg)
   skin/classic/browser/identity-icon.svg                       (../shared/identity-block/identity-icon.svg)
   skin/classic/browser/identity-icon-hover.svg                 (../shared/identity-block/identity-icon-hover.svg)

--- a/browser/themes/windows/downloads/indicator.css
+++ b/browser/themes/windows/downloads/indicator.css
@@ -16,33 +16,40 @@
      This is required by the animated event notification. */
   position: relative;
   /* The selected tab may overlap #downloads-indicator-notification */
   z-index: 5;
 }
 
 /*** Main indicator icon ***/
 
-#downloads-button {
-%ifdef MOZ_PHOTON_THEME
-  --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
-%else
-  --downloads-indicator-image: url("chrome://browser/skin/download.svg");
-%endif
-}
-
 #downloads-indicator-icon {
   background: var(--downloads-indicator-image) center no-repeat;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill);
   width: 16px;
   height: 16px;
   background-size: 16px;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  overflow: hidden;
+%endif
 }
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[cui-areatype="toolbar"]:not([progress]) > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 0;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon > #downloads-indicator-progress-icon {
+  opacity: 1;
+}
+#downloads-button[cui-areatype="toolbar"][progress] > #downloads-indicator-anchor > #downloads-indicator-icon {
+  background-image: url("chrome://browser/skin/downloads/download-icon-no-bar.svg");
+}
+%endif
+
 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
   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;