Beta

Download Progress SVG element, flat

Free

A downward arrow appears above a horizontal progress track filled to its midpoint. It belongs in a file download panel or an offline map download screen.

Sign in to download. Free SVGs are free with any account.

downloadprogresstransferloaderselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DOoBkS3yTLHA/amnt.svg" alt="Download Progress" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true"><path d="M22 5a2 2 0 0 1 4 0v17.17l5.59-5.58a2 2 0 0 1 2.82 2.82l-9 9a2 2 0 0 1-2.82 0l-9-9a2 2 0 0 1 2.82-2.82L22 22.17V5Z"/><path d="M7 35h34a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3Zm0 3v3h17v-3H7Zm20 0v3h14v-3H27Z"/></svg>
CSS background-image
.download-progress {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DOoBkS3yTLHA/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.download-progress {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DOoBkS3yTLHA/amnt.svg") center / contain no-repeat;
}
React
import DownloadProgressSvg from "./download-progress.jsx"; // from the React tab above

<DownloadProgressSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Download Progress: Downward arrow above a horizontal progress track with its left half filled. as part of the pack Loaders elements, flat. Want one like it? Make your own in the SVG studio.

Rest of Loaders elements, flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence