--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -519,17 +519,17 @@ const DownloadsIndicatorView = {
     if (widget.overflowed) {
       return widget.anchor;
     }
     return document.getElementById("downloads-indicator-anchor");
   },
 
   get _progressIcon() {
     return this.__progressIcon ||
-      (this.__progressIcon = document.getElementById("downloads-indicator-progress-icon"));
+      (this.__progressIcon = document.getElementById("downloads-indicator-progress-inner"));
   },
 
   get notifier() {
     return this._notifier ||
       (this._notifier = document.getElementById("downloads-notification-anchor"));
   },
 
   _onCustomizedAway() {

--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -20,14 +20,17 @@
        downloads-button. -->
   <toolbarbutton id="downloads-button" indicator="true">
     <!-- The panel's anchor area is smaller than the outer button, but must
          always be visible and must not move or resize when the indicator
          state changes, otherwise the panel could change its position or lose
          its arrow unexpectedly. -->
     <stack id="downloads-indicator-anchor"
            consumeanchor="downloads-button">
-      <stack id="downloads-indicator-icon">
-        <vbox id="downloads-indicator-progress-icon"/>
+#ifdef MOZ_PHOTON_ANIMATIONS
+      <box id="downloads-indicator-icon"/>
+#endif
+      <stack id="downloads-indicator-progress-outer">
+        <box id="downloads-indicator-progress-inner"/>
       </stack>
     </stack>
   </toolbarbutton>
 </overlay>

--- a/browser/components/downloads/jar.mn
+++ b/browser/components/downloads/jar.mn
@@ -3,14 +3,14 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
 *       content/browser/downloads/download.xml           (content/download.xml)
         content/browser/downloads/downloads.css          (content/downloads.css)
         content/browser/downloads/downloads.js           (content/downloads.js)
 *       content/browser/downloads/downloadsOverlay.xul   (content/downloadsOverlay.xul)
         content/browser/downloads/indicator.js           (content/indicator.js)
-        content/browser/downloads/indicatorOverlay.xul   (content/indicatorOverlay.xul)
+*       content/browser/downloads/indicatorOverlay.xul   (content/indicatorOverlay.xul)
 *       content/browser/downloads/allDownloadsViewOverlay.xul (content/allDownloadsViewOverlay.xul)
         content/browser/downloads/allDownloadsViewOverlay.js  (content/allDownloadsViewOverlay.js)
 *       content/browser/downloads/contentAreaDownloadsView.xul (content/contentAreaDownloadsView.xul)
         content/browser/downloads/contentAreaDownloadsView.js  (content/contentAreaDownloadsView.js)
         content/browser/downloads/contentAreaDownloadsView.css (content/contentAreaDownloadsView.css)

new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/downloads/download-icons.svg
@@ -0,0 +1,24 @@
+<!-- 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">
+  <style>
+    :root > use:not(:target),
+    :root > g:not(:target) {
+      display: none;
+    }
+  </style>
+  <defs>
+    <path id="arrow-icon" 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"/>
+    <path id="short-bar-icon" d="m 13,14 a 1,1 0 1 1 0,2 h -10 a 1,1 0 1 1 0,-2 z"/>
+    <path id="long-bar-icon" d="m 14,14 a 1,1 0 1 1 0,2 h -12 a 1,1 0 1 1 0,-2"/>
+  </defs>
+  <use id="arrow" fill="context-fill" href="#arrow-icon"/>
+  <g id="arrow-with-bar" fill="context-fill">
+    <use href="#arrow-icon"/>
+    <use href="#short-bar-icon"/>
+  </g>
+  <use id="default-bar" fill="context-fill" href="#short-bar-icon"/>
+  <use id="progress-bar-bg" fill="context-fill" fill-opacity="0.2" href="#long-bar-icon"/>
+  <use id="progress-bar-fg" fill="context-fill" href="#long-bar-icon"/>
+</svg>

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,91 +1,132 @@
 /* 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/. */
 
 /*** Status and progress indicator ***/
 
 #downloads-button {
 %ifdef MOZ_PHOTON_THEME
-  --downloads-indicator-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
+  --downloads-indicator-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
 %else
   --downloads-indicator-image: url("chrome://browser/skin/download.svg");
 %endif
 }
 
 #downloads-indicator-anchor {
   min-width: 16px;
   min-height: 16px;
 }
 
-#downloads-indicator-icon {
-  background: var(--downloads-indicator-image) center no-repeat;
-  -moz-context-properties: fill;
-  fill: var(--toolbarbutton-icon-fill);
+#downloads-indicator-progress-outer {
   width: 16px;
   height: 16px;
   background-size: 16px;
+  fill: var(--toolbarbutton-icon-fill);
+  -moz-context-properties: fill;
+%ifdef MOZ_PHOTON_ANIMATIONS
+  background: url("chrome://browser/skin/downloads/download-icons.svg#default-bar") center no-repeat;
+%else
+  background: var(--downloads-indicator-image) center no-repeat;
+%endif
 }
 
-toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon,
+%endif
+toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
   fill: var(--toolbarbutton-icon-fill-inverted);
 }
 
-#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
+%endif
+#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
   fill: var(--toolbarbutton-icon-fill-attention);
 }
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
+  background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-bg") center no-repeat;
+}
+%endif
 
 #downloads-button[attention="success"] {
   list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
   -moz-image-region: auto;
 }
 
-#downloads-indicator-progress-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-indicator-icon {
+  -moz-context-properties: fill;
+  background-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow");
+  width: 16px;
+  height: 16px;
+}
+%endif
+
+#downloads-indicator-progress-inner {
+%ifdef MOZ_PHOTON_ANIMATIONS
+  background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-fg") left no-repeat;
+  margin-right: 16px;
+%else
   background: var(--downloads-indicator-image) bottom no-repeat;
+  margin-top: 16px;
+%endif
   -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.
    * 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 {
+%ifndef MOZ_PHOTON_ANIMATIONS
+toolbar[brighttext] #downloads-indicator-progress-inner {
   animation-name: indicatorArrowProgressDark;
 }
+%endif
 
 @keyframes indicatorArrowProgress {
   0% {
+%ifdef MOZ_PHOTON_ANIMATIONS
+    margin-right: 14px;
+%else
     margin-top: 12px;
     filter: brightness(1.2);
+%endif
   }
   100% {
+%ifdef MOZ_PHOTON_ANIMATIONS
+    margin-right: 2px;
+%else
     margin-top: 2px;
     filter: brightness(1);
+%endif
   }
 }
 
+%ifndef MOZ_PHOTON_ANIMATIONS
 @keyframes indicatorArrowProgressDark {
   0% {
     margin-top: 12px;
     filter: brightness(0.7);
   }
   100% {
     margin-top: 2px;
     filter: brightness(1);
   }
 }
+%endif
 
 /*** Status badges ***/
 
 #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;
@@ -109,20 +150,24 @@ toolbar[brighttext] #downloads-indicator
   background: #FFBF00;
 }
 
 #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;
 }
 
-
 /*** Download notifications ***/
 
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon
+%else
+#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer
+%endif
+{
   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;
 }
 

deleted file mode 100644
--- a/browser/themes/shared/icons/download-arrow-with-bar.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="context-fill" d="M13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2zm-5.707-1.275a1 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/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -48,16 +48,19 @@
   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_THEME
+  skin/classic/browser/downloads/download-icons.svg            (../shared/downloads/download-icons.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)
@@ -117,19 +120,17 @@
   skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
   skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
   skin/classic/browser/check.svg                      (../shared/icons/check.svg)
   skin/classic/browser/containers.svg                 (../shared/icons/containers.svg)
   skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
   skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
   skin/classic/browser/device-mobile.svg              (../shared/icons/device-mobile.svg)
   skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
-#ifdef MOZ_PHOTON_THEME
-  skin/classic/browser/download-arrow-with-bar.svg    (../shared/icons/download-arrow-with-bar.svg)
-#else
+#ifndef MOZ_PHOTON_THEME
   skin/classic/browser/download.svg                   (../shared/icons/download.svg)
 #endif
   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/email-link.svg                 (../shared/icons/email-link.svg)
   skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
   skin/classic/browser/find.svg                       (../shared/icons/find.svg)

--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -75,17 +75,17 @@ toolbar:not([brighttext]) #bookmarks-men
 %endif
 
 #history-panelmenu[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/history.svg");
 }
 
 #downloads-button[cui-areatype="toolbar"] {
 %ifdef MOZ_PHOTON_THEME
-  list-style-image: url("chrome://browser/skin/download-arrow-with-bar.svg");
+  list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
 %else
   list-style-image: url("chrome://browser/skin/download.svg");
 %endif
 }
 
 #add-ons-button[cui-areatype="toolbar"] {
   list-style-image: url("chrome://browser/skin/addons.svg");
 }