HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pHepJ3JOKt-N/amnt.svg" alt="Volume" 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="orange" data-name="Orange"><path d="M626 147c-16 2-132 87-155 102-26 17-51 35-77 52-10 7-49 29-51 38-3 8-1 25-1 35-1 26 1 54 1 81 0 56-1 113-1 170 0 7-2 18 1 25 4 6 52 35 61 41 26 17 51 35 77 52 21 14 123 87 138 91 8 2 16 2 24-2 7-3 13-10 16-18 5-19 1-64 2-87 1-40 0-81 0-121 0-84 0-166 0-249 0-26 2-177-3-190-4-13-19-21-32-20z" fill="#fc8916" stroke="#fc8916"/><path d="M798 308c-7 1-14 5-17 11-5 7-5 15-2 22 2 7 31 36 38 48 21 33 31 73 31 112 0 37-13 76-34 108-12 18-51 46-31 68 5 6 13 9 21 8 11-2 18-11 25-18 44-45 69-112 67-174-2-60-22-116-62-161-10-10-20-25-36-24z" fill="#fc8916" stroke="#fc8916"/></g><g id="midnight" data-name="Midnight"><path d="M619 114c-26 4-171 110-204 132-12 9-82 59-90 61-5 1-11 0-16 0-43 0-118-8-154 13-48 28-45 75-45 124 0 34 0 69 0 104 0 19-2 41 2 60 20 88 112 71 180 71 10 0 22-2 32 0 11 3 23 15 32 21 67 44 134 89 200 134 36 25 76 54 117 18 32-28 22-104 22-144 0-112 0-224 0-335 0-40 0-79 0-118 0-43 12-105-30-131-14-9-30-12-46-10zm7 33c13-1 28 7 32 20 5 13 3 164 3 190 0 83 0 165 0 249 0 40 1 81 0 121-1 23 3 68-2 87-3 8-9 15-16 18-8 4-16 4-24 2-15-4-117-77-138-91-26-17-51-35-77-52-9-6-57-35-61-41-3-7-1-18-1-25 0-57 1-114 1-170 0-27-2-55-1-81 0-10-2-27 1-35 2-9 41-31 51-38 26-17 51-35 77-52 23-15 139-100 155-102zM313 341v305c-29 0-100 4-124-1-9-2-16-6-23-11-9-8-16-18-20-29-6-21-2-84-2-110 0-30-4-77 0-105 2-14 11-27 21-36 8-6 19-12 30-13 31-4 84 0 118 0z" fill="#181f2a" stroke="#181f2a"/><path d="M790 281c-33 5-49 42-37 71 4 12 15 20 23 30 31 33 45 81 43 126-3 46-24 84-54 116-36 38-6 98 46 88 16-4 27-15 39-26 51-51 78-128 75-200-2-28-7-57-16-83-16-44-64-130-119-122zm8 27c16-1 26 14 36 24 40 45 60 101 62 161 2 62-23 129-67 174-7 7-14 16-25 18-8 1-16-2-21-8-20-22 19-50 31-68 21-32 34-71 34-108 0-39-10-79-31-112-7-12-36-41-38-48-3-7-3-15 2-22 3-6 10-10 17-11z" fill="#181f2a" stroke="#181f2a"/></g><g id="navy" data-name="Navy"><path d="M313 341c-34 0-87-4-118 0-11 1-22 7-30 13-10 9-19 22-21 36-4 28 0 75 0 105 0 26-4 89 2 110 4 11 11 21 20 29 7 5 14 9 23 11 24 5 95 1 124 1z" fill="#052e62" stroke="#052e62"/></g></svg>
CSS background-image
.volume {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pHepJ3JOKt-N/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.volume {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/pHepJ3JOKt-N/amnt.svg") center / contain no-repeat;
}
React
import VolumeSvg from "./volume.jsx"; // from the React tab above
<VolumeSvg width={48} height={48} />