HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/o2TcspA8CDrP/amnt.svg" alt="Key" 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="amber" data-name="Amber"><path d="M239 343c171-16 195 237 27 258-24 3-49-2-71-13-113-57-84-233 44-245zM970 455c-9-7-124-4-144-4-50 0-100 0-150 0-51 0-101 0-151 0-10 0-65 2-69-1-3-2-10-24-12-29-4-8-9-17-14-25-42-67-123-107-202-96-59 8-114 40-147 90-9 13-14 29-23 40-8 33-5 69 6 102 51 155 262 186 353 49 8-13 15-27 21-41 3-8 3-21 8-28 2-3 5-5 9-6 14-3 43 0 59 0 54 0 110-1 165 1 14 1 27-2 42-1 42 2 86 0 129 0 21 0 42 1 63 0 7 0 14 1 21 0 27-4 36-28 36-51z" fill="#fdbc02" stroke="#fdbc02"/><path d="M713 562c-7-5-68-5-75 0v86h75z" fill="#fdbc02" stroke="#fdbc02"/><path d="M857 562c-7-5-46-5-53 0v56h53z" fill="#fdbc02" stroke="#fdbc02"/></g><g id="navy" data-name="Navy"><path d="M878 528c42 0 90 7 110-41 15-38-11-83-52-88-31-4-64-1-94-1-68 0-136 0-204 0-50 0-100 0-150 0-7 0-20 3-26-1-3-2-16-35-20-42-7-12-16-24-26-35-54-60-139-86-218-65-161 42-223 249-103 369 121 120 323 69 369-96h152c0 33-1 66 0 99 2 50 10 42 57 42 16 0 55 8 61-15 2-8 0-17 0-25 0-34 0-68 0-101h49c0 22-3 78 0 96 1 5 4 9 7 11 11 8 29 5 42 5 12 0 30 4 40-6s6-88 6-106zm92-73c0 23-9 47-36 51-7 1-14 0-21 0-21 1-42 0-63 0-43 0-87 2-129 0-15-1-28 2-42 1-55-2-111-1-165-1-16 0-45-3-59 0-4 1-7 3-9 6-5 7-5 20-8 28-6 14-13 28-21 41-91 137-302 106-353-49-11-33-14-69-6-102 5-31 21-62 40-86 88-108 259-98 327 26 5 9 16 41 20 45 7 8 74 4 89 4 52 0 105 0 158 0 52 0 104 0 157 0 17 0 34 0 52 0 32 0 58-1 69 36zM713 562v86h-75v-86-34h75zm144 0v56h-53v-56-34h53z" fill="#062355" stroke="#062355"/><path d="M239 343c-128 12-157 188-44 245 22 11 47 16 71 13 168-21 144-274-27-258zm10 21c22-1 44 6 62 17 88 57 49 195-54 199-141 5-151-209-8-216z" fill="#062355" stroke="#062355"/></g><g id="yellow" data-name="Yellow"><path d="M58 430c9-11 14-27 23-40 33-50 88-82 147-90 79-11 160 29 202 96 5 8 10 17 14 25 2 5 9 27 12 29 4 3 59 1 69 1 50 0 100 0 151 0 50 0 100 0 150 0 20 0 135-3 144 4-11-37-37-36-69-36-18 0-35 0-52 0-53 0-105 0-157 0-53 0-106 0-158 0-15 0-82 4-89-4-4-4-15-36-20-45-68-124-239-134-327-26-19 24-35 55-40 86z" fill="#fde25c" stroke="#fde25c"/><path d="M638 562c7-5 68-5 75 0v-34h-75z" fill="#fde25c" stroke="#fde25c"/><path d="M804 562c7-5 46-5 53 0v-34h-53z" fill="#fde25c" stroke="#fde25c"/></g></svg>
CSS background-image
.key {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/o2TcspA8CDrP/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.key {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/o2TcspA8CDrP/amnt.svg") center / contain no-repeat;
}
React
import KeySvg from "./key.jsx"; // from the React tab above
<KeySvg width={48} height={48} />