Arrow Divider SVG element, flat

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="navy" data-name="Navy"><path d="M221 451c-9-8-35-40-43-43-12-5-77-1-94-1-9 0-55-2-60 1-3 2-3 6-2 10 1 6 42 48 50 55-3 8-4 23-1 32-7 10-49 51-50 58-1 3 0 7 4 9 7 4 48 1 59 1 17 0 84 4 96-3 9-5 30-33 40-42 7 4 37 4 45 2 4-1 6-4 10-5 15-3 80 0 101 0 54 0 108 0 162 0 68 0 137 0 206 0 17 0 54-3 69 0 4 1 5 4 9 5 10 3 23 1 33 1 0 10-3 28 1 37 1 2 4 4 7 4 4 1 48-26 56-31 11-6 84-45 84-52s-73-45-84-51c-9-5-47-30-54-31-3 0-6 0-8 3-4 5-2 31-2 38-10 0-23-2-32 0-5 2-7 6-12 7-10 2-24-1-35-1-26 0-53-1-80 0-53 2-106-2-158 0-54 2-108 0-161 0-18 1-36-1-53 0-15 1-33 4-47 1-7-1-10-6-17-7-10-2-31-3-39 3zm-79 17c-12 0-46 3-55 0-6-3-37-39-44-47 12 0 43-3 53 0 8 3 37 39 46 47zm75 0c-13 0-45 3-55 0-7-3-37-39-44-47 12 0 43-3 53 0 6 2 38 40 46 47zm653-41l112 63-112 62c-1-42 0-83 0-125zM233 463h24v53h-24zm598 0h24v53h-24zm-558 6h544v41h-545c0-13-3-29 1-41zM84 483h134v14h-134zm56 28c-6 7-37 45-43 47-9 3-42 0-53 0 8-8 35-44 43-47 9-3 41 0 53 0zm76 0c-8 8-38 44-45 47-10 3-41 0-53 0 7-7 38-45 44-47 10-3 41 0 54 0z" fill="#042955" stroke="#042955"/></g><g id="turquoise" data-name="Turquoise"><path d="M273 469c-4 12-1 28-1 41h545v-41z" fill="#12b7aa" stroke="#12b7aa"/><path d="M870 427c0 42-1 83 0 125l112-62z" fill="#12b7aa" stroke="#12b7aa"/><path d="M142 468c-9-8-38-44-46-47-10-3-41 0-53 0 7 8 38 44 44 47 9 3 43 0 55 0z" fill="#12b7aa" stroke="#12b7aa"/><path d="M217 468c-8-7-40-45-46-47-10-3-41 0-53 0 7 8 37 44 44 47 10 3 42 0 55 0z" fill="#12b7aa" stroke="#12b7aa"/><path d="M140 511c-12 0-44-3-53 0-8 3-35 39-43 47 11 0 44 3 53 0 6-2 37-40 43-47z" fill="#12b7aa" stroke="#12b7aa"/><path d="M216 511c-13 0-44-3-54 0-6 2-37 40-44 47 12 0 43 3 53 0 7-3 37-39 45-47z" fill="#12b7aa" stroke="#12b7aa"/></g><g id="yellow" data-name="Yellow"><path d="M84 483v14h134v-14z" fill="#fcce4b" stroke="#fcce4b"/><path d="M233 463v53h24v-53z" fill="#fcce4b" stroke="#fcce4b"/><path d="M831 463v53h24v-53z" fill="#fcce4b" stroke="#fcce4b"/></g></svg>

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

.arrow-divider {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/YfY2TFlMJ2_T/amnt.svg") center / contain no-repeat;
}

import ArrowDividerSvg from "./arrow-divider.jsx"; // from the React tab above

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