HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7qbWvdPJNb38/amnt.svg" alt="Heart" 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="red" data-name="Red"><path d="M512 292c-8-9-12-21-19-31-19-32-44-60-75-81-48-32-110-40-164-21-109 37-158 157-129 265 27 97 108 166 182 230 50 42 101 84 145 132 15 15 29 31 41 48 7 8 12 18 19 26 19-25 36-50 58-73 45-49 96-92 147-135 73-63 156-132 182-230 29-107-19-227-130-264-55-18-114-9-163 22-32 21-56 50-76 82-6 9-10 22-18 30z" fill="#fc0202" stroke="#fc0202"/></g><g id="black" data-name="Black"><path d="M512 248c-18-23-33-46-54-65-64-59-158-73-236-35-108 51-151 180-116 291 31 102 117 172 194 238 39 33 78 66 115 102 17 18 35 37 51 57 6 7 44 61 46 61s41-56 47-63c15-20 33-38 51-56 36-37 75-70 114-103 77-66 162-137 194-238 34-111-9-239-117-290-78-37-170-23-234 35-14 12-27 27-38 42-6 8-11 17-17 24zm0 44c8-8 12-21 18-30 20-32 44-61 76-82 49-31 108-40 163-22 111 37 159 157 130 264-26 98-109 167-182 230-51 43-102 86-147 135-22 23-39 48-58 73-7-8-12-18-19-26-12-17-26-33-41-48-44-48-95-90-145-132-74-64-155-133-182-230-29-108 20-228 129-265 54-19 116-11 164 21 31 21 56 49 75 81 7 10 11 22 19 31z" fill="#020202" stroke="#020202"/></g></svg>
CSS background-image
.heart {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7qbWvdPJNb38/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.heart {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/7qbWvdPJNb38/amnt.svg") center / contain no-repeat;
}
React
import HeartSvg from "./heart.jsx"; // from the React tab above
<HeartSvg width={48} height={48} />
