HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/oYvEVR7wHlrh/amnt.svg" alt="Translate" 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="baby-blue" data-name="Baby Blue"><path d="M130 627c33-10 65-26 96-41 7-3 15-10 23-11 6-1 68 17 84 20 75 10 155-9 215-56 123-95 123-268-3-361-118-88-302-67-393 51-47 61-60 140-31 213 8 19 19 38 32 55 4 6 12 12 15 19 2 4 2 8 1 13-1 7-6 14-8 21-11 25-25 51-31 77zm96-282c16-3 36 0 53 0 45 0 91 0 137 0 31 0 63-1 95 0 37 1 38 41 10 46-17 4-38 1-55 1-45 0-90 0-134 0-32 0-64 1-95 0-38-1-39-41-11-47z" fill="#afe2fb" stroke="#afe2fb"/></g><g id="lemon" data-name="Lemon"><path d="M681 371c1 21-5 43-10 63-31 101-125 178-228 197 5 17 8 35 16 52 29 66 91 114 161 129 60 13 99 4 155-13 4-1 8-2 12-2 13 2 29 14 41 20 24 11 50 19 73 31-6-23-43-88-37-107 4-11 20-25 26-35 32-49 44-107 31-163-25-110-133-172-240-172zm9 183c66-9 81 89 18 99-66 11-81-90-18-99z" fill="#fce67d" stroke="#fce67d"/></g><g id="navy" data-name="Navy"><path d="M681 334c-6-32-13-63-28-92-20-40-52-75-89-101-149-103-375-66-467 97-35 61-43 135-21 202 10 30 25 56 43 81 3 3 6 6 7 10 0 5-26 66-30 76-5 14-16 33-16 47 0 12 11 23 23 23 17 0 82-29 101-37 11-5 42-23 51-23 10 0 28 9 39 11 37 10 74 8 112 9 27 141 150 231 294 218 14-1 29-3 44-7 8-1 32-11 38-11 6 1 14 7 19 9 29 15 60 27 90 38 12 4 27 12 39 11 10-1 18-9 19-19 3-21-35-99-45-124 18-25 35-50 46-80 14-41 17-84 10-127-22-136-150-211-279-211zM130 627c6-26 20-52 31-77 2-7 7-14 8-21 1-5 1-9-1-13-3-7-11-13-15-19-13-17-24-36-32-55-29-73-16-152 31-213 91-118 275-139 393-51 126 93 126 266 3 361-60 47-140 66-215 56-16-3-78-21-84-20-8 1-16 8-23 11-31 15-63 31-96 41zM681 371c107 0 215 62 240 172 13 56 1 114-31 163-6 10-22 24-26 35-6 19 31 84 37 107-23-12-49-20-73-31-12-6-28-18-41-20-4 0-8 1-12 2-56 17-95 26-155 13-70-15-132-63-161-129-8-17-11-35-16-52 103-19 197-96 228-197 5-20 11-42 10-63z" fill="#0a245e" stroke="#0a245e"/><path d="M226 345c-28 6-27 46 11 47 31 1 63 0 95 0 44 0 89 0 134 0 17 0 38 3 55-1 28-5 27-45-10-46-32-1-64 0-95 0-46 0-92 0-137 0-17 0-37-3-53 0z" fill="#0a245e" stroke="#0a245e"/><path d="M690 554c-63 9-48 110 18 99 63-10 48-108-18-99z" fill="#0a245e" stroke="#0a245e"/></g></svg>
CSS background-image
.translate {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/oYvEVR7wHlrh/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.translate {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/oYvEVR7wHlrh/amnt.svg") center / contain no-repeat;
}
React
import TranslateSvg from "./translate.jsx"; // from the React tab above
<TranslateSvg width={48} height={48} />