HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/4XJIYmbaX9D3/amnt.svg" alt="Arrow Bullet" width="48" height="48">
Inline SVG
<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="M681 256v144h-616v179h616c0 26 0 52 0 79 0 7-1 46 3 48 0 0 12-10 14-12 28-23 56-47 85-70 56-47 111-96 169-140z" fill="#017afc" stroke="#017afc"/></g><g id="cobalt" data-name="Cobalt"><path d="M664 209c-2 3-7 6-8 9-3 9 0 137 0 157-76 0-154-3-231 0-26 1-53-2-79-1-74 2-149-2-223 1-19 1-65-5-81 1-4 23-1 49-1 73 0 45-1 92 0 138 0 5-1 11 4 15s72 2 85 2c34 0 70 0 105 0 140 0 281 0 421 0 0 19-3 138 1 146 2 2 6 4 8 4 4-1 70-57 78-64 27-24 55-46 83-69 35-29 70-59 106-88 19-16 42-31 59-49zm17 47l271 228c-58 44-113 93-169 140-29 23-57 47-85 70-2 2-14 12-14 12-4-2-3-41-3-48 0-27 0-53 0-79h-616v-179h616z" fill="#01298a" stroke="#01298a"/></g></svg>
CSS background-image
.arrow-bullet {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/4XJIYmbaX9D3/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.arrow-bullet {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/4XJIYmbaX9D3/amnt.svg") center / contain no-repeat;
}
React
import ArrowBulletSvg from "./arrow-bullet.jsx"; // from the React tab above
<ArrowBulletSvg width={48} height={48} />
