HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHrOUFPn50OD/amnt.svg" alt="Loading Wheel" 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="grape" data-name="Grape"><path d="M506 352c-155 5-207 210-80 293 27 18 60 28 92 26 156-8 208-213 77-295-27-17-58-25-89-24z" fill="#01114e" stroke="#01114e"/><path d="M781 164c-10 1-20 6-28 12-19 13-36 34-52 51-14 16-31 31-46 47-13 12-28 24-35 40-20 43 14 92 61 86 7-1 14-3 20-6 20-11 85-83 106-103 22-23 45-42 40-77-4-31-35-53-66-50zm3 17c29-3 51 24 46 52-4 22-29 40-45 56-20 20-40 40-60 60-9 9-17 19-27 26-6 5-13 8-20 8-29 3-51-23-46-51 4-23 29-40 45-56 20-20 40-40 60-60 8-9 16-19 26-26 6-5 14-8 21-9z" fill="#01114e" stroke="#01114e"/><path d="M230 164c-33 3-56 33-54 64s29 50 49 70c19 19 80 86 98 96 10 5 22 7 33 7 32-3 56-32 54-64-2-31-28-50-48-70-21-21-78-86-99-96-10-6-22-8-33-7zm2 17c9-1 18 2 25 6 18 11 67 66 86 84 24 24 69 56 42 95-7 10-19 16-31 17-8 1-17-1-24-5-18-11-68-67-86-84-24-24-70-57-43-95 7-9 19-17 31-18z" fill="#01114e" stroke="#01114e"/><path d="M503 48c-25 3-47 26-50 51-1 13 0 27 0 41 0 20 0 40 0 61 0 39-11 97 27 122 12 8 26 11 41 9 50-7 50-50 50-90 0-21 0-41 0-61 0-26 4-64-1-88-7-31-37-48-67-45zm3 17c63-8 48 81 48 119 0 18 0 37 0 56 0 28 4 70-36 75-22 3-45-12-48-36-1-11 0-22 0-33 0-17 0-33 0-49 0-20 0-38 0-57 0-30-4-69 36-75z" fill="#01114e" stroke="#01114e"/><path d="M504 691c-25 3-48 24-51 50-2 13 0 27 0 41 0 19 0 39 0 59 0 27-3 56 0 82 4 32 35 55 66 51 52-6 52-49 52-90 0-20 0-40 0-59 0-41 12-106-31-127-11-6-24-8-36-7zm3 17c62-6 47 80 47 119 0 18 0 36 0 55 0 29 4 70-37 75-62 7-47-80-47-118 0-19 0-38 0-56 0-31-4-70 37-75z" fill="#01114e" stroke="#01114e"/><path d="M115 450c-59 5-79 83-26 112 7 4 15 6 23 7 25 2 51 0 77 0 30 0 61 2 91 0 60-4 79-83 26-111-7-4-16-7-24-8-25-2-51 0-76 0-30 0-61-2-91 0zm-5 18c16-2 35 0 52 0 37 0 74 0 112 0 57 1 62 74 11 83-20 4-42 1-62 1-34 0-68 1-101 0-58-2-61-76-12-84z" fill="#01114e" stroke="#01114e"/><path d="M743 450c-59 6-78 84-24 112 7 3 14 6 22 7 25 2 51 0 77 0 30 0 61 2 91 0 59-4 77-85 24-112-7-3-15-6-23-7-26-2-54 0-80 0-29 0-59-2-87 0zm-5 18c15-2 34 0 50 0 37 0 76 0 114 0 57 1 63 74 12 83-21 4-44 1-64 1-33 0-67 1-99 0-58-2-62-75-13-84z" fill="#01114e" stroke="#01114e"/><path d="M342 619c-9 1-18 5-25 10-12 8-22 21-33 32-22 22-45 45-67 67-14 13-31 26-37 44-16 43 20 86 64 81 10-1 20-6 28-12 11-9 21-20 31-30 22-23 44-45 67-67 12-13 29-25 35-42 18-43-18-88-63-83zm2 17c28-4 53 22 48 50-3 23-29 40-44 56-24 24-61 66-86 85-6 5-13 8-20 9-28 3-53-21-48-50 3-23 29-40 44-55 21-21 41-42 62-62 9-8 17-18 26-25 5-4 12-7 18-8z" fill="#01114e" stroke="#01114e"/><path d="M665 619c-32 4-54 35-51 66 3 30 30 49 50 68 19 19 75 81 93 92 12 7 26 9 40 8 32-4 54-35 51-66-3-29-30-49-49-68-21-20-74-79-95-92-12-7-26-9-39-8zm2 17c10-1 22 1 30 7 10 7 18 18 27 26 18 18 37 36 55 55 23 23 70 55 45 92-6 10-17 18-29 20-9 1-19 0-27-5-16-8-68-66-85-82-23-24-69-55-46-92 6-10 18-19 30-21z" fill="#01114e" stroke="#01114e"/></g><g id="periwinkle" data-name="Periwinkle"><path d="M784 181c-7 1-15 4-21 9-10 7-18 17-26 26-20 20-40 40-60 60-16 16-41 33-45 56-5 28 17 54 46 51 7 0 14-3 20-8 10-7 18-17 27-26 20-20 40-40 60-60 16-16 41-34 45-56 5-28-17-55-46-52z" fill="#01aefb" stroke="#01aefb"/><path d="M232 181c-12 1-24 9-31 18-27 38 19 71 43 95 18 17 68 73 86 84 7 4 16 6 24 5 12-1 24-7 31-17 27-39-18-71-42-95-19-18-68-73-86-84-7-4-16-7-25-6z" fill="#01aefb" stroke="#01aefb"/><path d="M344 636c-6 1-13 4-18 8-9 7-17 17-26 25-21 20-41 41-62 62-15 15-41 32-44 55-5 29 20 53 48 50 7-1 14-4 20-9 25-19 62-61 86-85 15-16 41-33 44-56 5-28-20-54-48-50z" fill="#01aefb" stroke="#01aefb"/><path d="M667 636c-12 2-24 11-30 21-23 37 23 68 46 92 17 16 69 74 85 82 8 5 18 6 27 5 12-2 23-10 29-20 25-37-22-69-45-92-18-19-37-37-55-55-9-8-17-19-27-26-8-6-20-8-30-7z" fill="#01aefb" stroke="#01aefb"/><path d="M506 65c-40 6-36 45-36 75 0 19 0 37 0 57 0 16 0 32 0 49 0 11-1 22 0 33 3 24 26 39 48 36 40-5 36-47 36-75 0-19 0-38 0-56 0-38 15-127-48-119z" fill="#01aefb" stroke="#01aefb"/><path d="M507 708c-41 5-37 44-37 75 0 18 0 37 0 56 0 38-15 125 47 118 41-5 3
…
CSS background-image
.loading-wheel {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHrOUFPn50OD/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.loading-wheel {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ZHrOUFPn50OD/amnt.svg") center / contain no-repeat;
}
React
import LoadingWheelSvg from "./loading-wheel.jsx"; // from the React tab above
<LoadingWheelSvg width={48} height={48} />