Download Progress SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/EBADjx6lAjcE/amnt.svg" alt="Download Progress" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M587 407c0-62 0-124 0-185 0-19 3-85-2-98-2-6-8-10-15-12-18-3-40 0-58 0-19 0-40-3-58 0-8 2-15 9-16 17-5 19-1 71-1 94 0 61 0 122 0 184-16 0-82-4-91 2-8 5-6 12-2 18 16 23 38 44 56 66s36 44 55 66c9 10 47 62 57 62 11 0 49-53 58-63 19-22 37-44 55-66 12-13 49-54 56-66 4-7 4-16-6-18-13-4-70-1-88-1z" fill="#0173fc" stroke="#0173fc"/><path d="M512 846v-140c-81 0-162 0-243 0-22 0-44 0-65 0-17 0-36-2-52 1-33 6-59 35-59 69 0 31 21 59 52 68 24 6 94 2 123 2 81 0 162 0 244 0z" fill="#0173fc" stroke="#0173fc"/></g><g id="mist" data-name="Mist"><path d="M512 846c82 0 163 0 245 0 21 0 43 0 65 0 15 0 31 1 46 0 36-4 63-35 63-70s-26-63-60-69c-16-3-34-1-50-1-22 0-44 0-65 0-82 0-163 0-244 0z" fill="#d4d7dc" stroke="#d4d7dc"/></g><g id="midnight" data-name="Midnight"><path d="M156 684c-77 7-113 99-60 156 10 11 24 19 39 24 30 9 159 4 200 4 120 0 241 0 362 0 38 0 78 0 117 0 18 0 36 1 54 0 78-6 113-99 60-155-12-14-30-23-48-27-23-4-47-2-70-2-40 0-80 0-120 0-121 0-241 0-361 0-39 0-77 0-115 0-20 0-39-1-58 0zm356 22c81 0 162 0 244 0 21 0 43 0 65 0 16 0 34-2 50 1 34 6 60 34 60 69s-27 66-63 70c-15 1-31 0-46 0-22 0-44 0-65 0-82 0-163 0-245 0s-163 0-244 0c-29 0-99 4-123-2-31-9-52-37-52-68 0-34 26-63 59-69 16-3 35-1 52-1 21 0 43 0 65 0 81 0 162 0 243 0z" fill="#25292e" stroke="#25292e"/><path d="M609 385c0-66 0-132 0-197 0-98 2-99-97-99-100 0-97 4-97 101 0 65 0 130 0 195-22 0-48-4-70 1-9 2-17 7-22 15-5 9-6 20-3 29 6 16 46 57 59 73 25 30 51 61 77 92 11 13 22 30 36 41 6 5 13 7 21 7 7 0 15-3 21-8 14-11 24-28 35-41 26-31 51-62 77-92 13-16 52-55 58-72 4-11 2-23-6-32-5-6-11-10-18-12-20-5-50-1-71-1zm-22 22c18 0 75-3 88 1 10 2 10 11 6 18-7 12-44 53-56 66-18 22-36 44-55 66-9 10-47 63-58 63-10 0-48-52-57-62-19-22-37-44-55-66s-40-43-56-66c-4-6-6-13 2-18 9-6 75-2 91-2 0-62 0-123 0-184 0-23-4-75 1-94 1-8 8-15 16-17 18-3 39 0 58 0 18 0 40-3 58 0 7 2 13 6 15 12 5 13 2 79 2 98 0 61 0 123 0 185z" fill="#25292e" stroke="#25292e"/></g></svg>

.download-progress {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/EBADjx6lAjcE/amnt.svg");
  background-size: contain;
}

.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/EBADjx6lAjcE/amnt.svg") center / contain no-repeat;
}

import DownloadProgressSvg from "./download-progress.jsx"; // from the React tab above

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