Arrow SVG illustration, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="purple" data-name="Purple"><path d="M699 628l187-190-173-186 6 102 1 21c-26 0-53-2-79-1-113 5-223 32-324 80-53 25-103 58-148 95-30 26-59 54-84 85-11 13-20 30-32 42-17 24 16 87 58 58 8-6 13-13 20-19 17-16 33-32 51-46 51-43 109-78 170-103 72-29 149-45 226-48 42-2 85 1 127 8 3 1 12 1 13 3 3 4-19 86-19 99z" fill="#014ee3" stroke="#014ee3"/></g><g id="grape" data-name="Grape"><path d="M691 549c-5 13-23 96-21 105 4 15 18 12 28 6 34-22 67-46 100-70 51-36 101-72 151-109 14-11 33-21 45-35 3-4 4-6 3-11-2-7-73-61-84-69-31-26-64-50-95-75-32-25-64-50-96-75-9-7-27-16-33 0-5 10 4 92 4 111-20-7-44-4-64-5-121-5-245 25-352 82-94 50-211 152-245 256-25 76 45 143 109 79 42-42 88-81 140-111 105-61 227-91 349-85 20 1 41 1 61 6zm28-195l-6-102v-12l253 199c-18 10-35 25-51 37-29 22-59 43-88 64-29 22-59 43-89 63-13 9-27 17-39 28v-3c0-13 22-95 19-99-1-2-10-2-13-3-42-7-85-10-127-8-77 3-154 19-226 48-61 25-119 60-170 103-18 14-34 30-51 46-7 6-12 13-20 19-42 29-75-34-58-58 3-18 15-37 24-53 51-88 132-157 223-203 101-51 218-79 331-74 20 1 39 2 58 4 10 1 20 4 30 4z" fill="#011d66" stroke="#011d66"/></g><g id="sky" data-name="Sky"><path d="M53 676c12-12 21-29 32-42 25-31 54-59 84-85 45-37 95-70 148-95 101-48 211-75 324-80 26-1 53 1 79 1l-1-21c-10 0-20-3-30-4-19-2-38-3-58-4-113-5-230 23-331 74-91 46-172 115-223 203-9 16-21 35-24 53z" fill="#42b5fb" stroke="#42b5fb"/><path d="M713 252l173 186-187 190v3c12-11 26-19 39-28 30-20 60-41 89-63 29-21 59-42 88-64 16-12 33-27 51-37l-253-199z" fill="#42b5fb" stroke="#42b5fb"/></g></svg>

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

import ArrowSvg from "./arrow.jsx"; // from the React tab above

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