HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/txpDPe8gR8vz/amnt.svg" alt="Pill" 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="cream" data-name="Cream"><path d="M629 615c44-44 88-88 132-132 32-33 71-64 94-104 36-64 28-149-25-201-25-24-56-40-90-44-97-12-150 62-211 123-43 43-87 86-130 130z" fill="#fcf3d3" stroke="#fcf3d3"/></g><g id="red" data-name="Red"><path d="M378 407c-17 15-33 33-49 49-40 41-81 82-121 122-67 67-80 166-9 237 24 24 55 40 88 45 97 16 152-56 213-117 35-36 72-71 108-107z" fill="#fc4a44" stroke="#fc4a44"/></g><g id="navy" data-name="Navy"><path d="M702 103c-70 6-111 49-157 95-24 24-48 47-71 71-66 66-132 131-197 197-23 22-45 45-67 67-52 51-89 94-89 171 1 106 99 197 205 188 74-7 115-48 165-97 22-22 44-44 66-66 65-65 131-131 197-196 71-71 154-132 153-241-1-111-94-198-205-189zM629 615l-230-228c43-44 87-87 130-130 61-61 114-135 211-123 34 4 65 20 90 44 53 52 61 137 25 201-23 40-62 71-94 104-44 44-88 88-132 132zM378 407l230 229c-36 36-73 71-108 107-61 61-116 133-213 117-33-5-64-21-88-45-71-71-58-170 9-237 40-40 81-81 121-122 16-16 32-34 49-49z" fill="#011d53" stroke="#011d53"/></g></svg>
CSS background-image
.pill {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/txpDPe8gR8vz/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.pill {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/txpDPe8gR8vz/amnt.svg") center / contain no-repeat;
}
React
import PillSvg from "./pill.jsx"; // from the React tab above
<PillSvg width={48} height={48} />