diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 64ed87f59d4..6490b1c0a8f 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -2725,10 +2725,18 @@ EOD;
             $html .= <<<EOD
     <div id="file_info_{$client_id}" class="mdl-left filepicker-filelist" style="position: relative">
     <div class="filepicker-filename">
-        <div class="filepicker-container">$currentfile<div class="dndupload-message">$strdndenabled <br/><div class="dndupload-arrow"></div></div></div>
+        <div class="filepicker-container">$currentfile
+            <div class="dndupload-message">$strdndenabled <br/>
+                <div class="dndupload-arrow d-flex"><i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i></div>
+            </div>
+        </div>
         <div class="dndupload-progressbars"></div>
     </div>
-    <div><div class="dndupload-target">{$strdroptoupload}<br/><div class="dndupload-arrow"></div></div></div>
+    <div>
+        <div class="dndupload-target">{$strdroptoupload}<br/>
+            <div class="dndupload-arrow d-flex"><i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i></div>
+        </div>
+    </div>
     </div>
 EOD;
         }
diff --git a/lib/templates/filemanager_page_generallayout.mustache b/lib/templates/filemanager_page_generallayout.mustache
index dcdc35661a9..b4ed879b614 100644
--- a/lib/templates/filemanager_page_generallayout.mustache
+++ b/lib/templates/filemanager_page_generallayout.mustache
@@ -80,9 +80,17 @@
         <div class="fm-content-wrapper">
             <div class="fp-content"></div>
             <div class="fm-empty-container">
-                <div class="dndupload-message">{{#str}}dndenabled_inbox{{/str}}<br/><div class="dndupload-arrow"></div></div>
+                <div class="dndupload-message">{{#str}}dndenabled_inbox{{/str}}<br/>
+                    <div class="dndupload-arrow d-flex">
+                        <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="dndupload-target">{{#str}}droptoupload{{/str}}<br/>
+                <div class="dndupload-arrow d-flex">
+                    <i class="fa fa-arrow-circle-o-down fa-3x m-auto"></i>
+                </div>
             </div>
-            <div class="dndupload-target">{{#str}}droptoupload{{/str}}<br/><div class="dndupload-arrow"></div></div>
             <div class="dndupload-progressbars"></div>
             <div class="dndupload-uploadinprogress">{{#pix}}i/loading_small{{/pix}}<span class="sr-only">{{#str}}loadinghelp{{/str}}</span></div>
         </div>
diff --git a/theme/boost/scss/moodle/filemanager.scss b/theme/boost/scss/moodle/filemanager.scss
index 6bbad444498..a733a258433 100644
--- a/theme/boost/scss/moodle/filemanager.scss
+++ b/theme/boost/scss/moodle/filemanager.scss
@@ -839,11 +839,11 @@ a.ygtvspacer:hover {
 }
 
 .dndupload-arrow {
-    background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
     width: 100%;
     height: 80px;
     position: absolute;
     top: 5px;
+    color: $gray-500;
 }
 
 .fitem.disabled .filepicker-container,
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 4c6ffdf53fe..df2d7c2afaf 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15025,11 +15025,11 @@ a.ygtvspacer:hover {
   display: block; }
 
 .dndupload-arrow {
-  background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
   width: 100%;
   height: 80px;
   position: absolute;
-  top: 5px; }
+  top: 5px;
+  color: #8f959e; }
 
 .fitem.disabled .filepicker-container,
 .fitem.disabled .fm-empty-container {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 6f32c1addbc..562b0dc0381 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15249,11 +15249,11 @@ a.ygtvspacer:hover {
   display: block; }
 
 .dndupload-arrow {
-  background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
   width: 100%;
   height: 80px;
   position: absolute;
-  top: 5px; }
+  top: 5px;
+  color: #8f959e; }
 
 .fitem.disabled .filepicker-container,
 .fitem.disabled .fm-empty-container {