HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DzwKBTz4F_mP/amnt.svg" alt="Help" 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="purple" data-name="Purple"><path d="M486 53c-255 13-447 233-436 485 12 255 238 443 488 432 253-11 447-233 435-484-12-254-236-445-487-433zm14 104c113-6 231 52 239 176 3 53-20 99-59 133-28 24-59 41-89 63-57 40-30 71-56 97-28 27-88 20-102-19s6-85 31-114c43-50 154-89 136-165-14-63-104-67-151-41-18 10-30 24-41 42-7 12-13 27-25 36-11 9-26 13-40 13-70 0-67-67-40-112 41-67 120-105 197-109zM489 677c110-5 118 162 9 168-111 5-118-163-9-168z" fill="#0d62fb" stroke="#0d62fb"/></g><g id="white" data-name="White"><path d="M500 157c-77 4-156 42-197 109-27 45-30 112 40 112 14 0 29-4 40-13 12-9 18-24 25-36 11-18 23-32 41-42 47-26 137-22 151 41 18 76-93 115-136 165-25 29-45 75-31 114s74 46 102 19c26-26-1-57 56-97 30-22 61-39 89-63 39-34 62-80 59-133-8-124-126-182-239-176z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M489 677c-109 5-102 173 9 168 109-6 101-173-9-168z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="grape" data-name="Grape"><path d="M487 21c-271 12-481 245-469 515 12 271 249 477 518 465 272-12 482-242 470-514-12-273-250-477-519-466zm-1 32c251-12 475 179 487 433 12 251-182 473-435 484-250 11-476-177-488-432-11-252 181-472 436-485z" fill="#011d5e" stroke="#011d5e"/></g></svg>
CSS background-image
.help {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DzwKBTz4F_mP/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.help {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/DzwKBTz4F_mP/amnt.svg") center / contain no-repeat;
}
React
import HelpSvg from "./help.jsx"; // from the React tab above
<HelpSvg width={48} height={48} />
