--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -78,16 +78,24 @@
 }
 
 %ifndef MOZ_PHOTON_ANIMATIONS
 toolbar[brighttext] #downloads-indicator-progress-inner {
   animation-name: indicatorArrowProgressDark;
 }
 %endif
 
+%ifdef MOZ_PHOTON_ANIMATIONS
+#downloads-indicator-progress-inner:-moz-locale-dir(rtl) {
+  animation-name: indicatorArrowProgressRTL;
+  margin-left: 16px;
+  margin-right: 0;
+}
+%endif
+
 @keyframes indicatorArrowProgress {
   0% {
 %ifdef MOZ_PHOTON_ANIMATIONS
     margin-right: 14px;
 %else
     margin-top: 12px;
     filter: brightness(1.2);
 %endif
@@ -97,17 +105,26 @@ toolbar[brighttext] #downloads-indicator
     margin-right: 2px;
 %else
     margin-top: 2px;
     filter: brightness(1);
 %endif
   }
 }
 
-%ifndef MOZ_PHOTON_ANIMATIONS
+%ifdef MOZ_PHOTON_ANIMATIONS
+@keyframes indicatorArrowProgressRTL {
+  0% {
+    margin-left: 14px;
+  }
+  100% {
+    margin-left: 2px;
+  }
+}
+%else
 @keyframes indicatorArrowProgressDark {
   0% {
     margin-top: 12px;
     filter: brightness(0.7);
   }
   100% {
     margin-top: 2px;
     filter: brightness(1);
@@ -241,16 +258,18 @@ toolbar[brighttext] #downloads-indicator
 #downloads-notification-anchor {
   width: 42px;
   /* Height is equal to height of each frame in the SVG animation
      Use of min/max-height instead of height is to avoid an
      assertion for `inline-size less than zero..` (bug 1379332). */
   min-height: 98px;
   max-height: 98px;
   overflow: hidden;
+  /* animation is not directional and shouldn't be reversed in RTL */
+  direction: ltr;
 }
 %endif
 
 #downloads-indicator-notification {
   opacity: 0;
 %ifdef MOZ_PHOTON_ANIMATIONS
   min-width: 1344px;
   height: 98px; /* Height is equal to height of each frame in the SVG animation */