HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bDkhy5wyEMVn/amnt.svg" alt="Note" 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="M222 180c-10 2-20 10-23 19-7 15-3 92-3 114 0 52 0 105 0 158 0 75 0 151 0 227 0 23-4 67 1 88 2 11 12 21 23 23 20 6 85 2 110 2 52 0 105 0 158 0 27 0 136 5 154-4 35-15 9-101 23-134 19-50 69-44 114-44 10 0 21 2 31-3 9-3 16-12 18-22 4-22 0-60 0-83 0-75 0-151 0-225 0-26 4-68-1-91-2-9-9-19-18-22-16-8-92-3-114-3-53 0-106 0-158 0-75 0-151 0-225 0-25 0-68-4-90 0zm84 190c13-3 42 0 57 0 58 0 117 0 176 0 39 0 78 0 117 0 18 0 39-2 57 0 17 2 23 27 4 32-14 3-43 0-58 0-59 0-116 0-174 0-39 0-79 0-117 0-19 0-40 3-58 0-17-2-22-27-4-32zm2 133c17-4 44 0 63 0 56 0 114 0 171 0 39 0 78 0 117 0 17 0 40-4 57 1 18 4 17 28-1 32-17 3-44 0-62 0-57 0-114 0-171 0-39 0-78 0-117 0-18 0-41 4-58-1-17-4-16-28 1-32z" fill="#fcf4cd" stroke="#fcf4cd"/></g><g id="black" data-name="Black"><path d="M221 151c-63 8-54 74-54 120 0 57 0 114 0 172 0 79 0 158 0 237 0 33-4 74 0 107 8 61 77 53 121 53 57 0 114 0 172 0 40 0 80 0 120 0 20 0 42 2 62-1 13-2 26-6 37-13 22-13 39-35 58-53 17-17 34-35 51-52 17-16 36-32 50-51 8-10 14-22 17-35 5-27 2-58 2-86 0-79 0-158 0-236 0-35 4-75-1-109-9-62-73-53-119-53-58 0-115 0-172 0-79 0-158 0-236 0-35 0-74-4-108 0zm1 29c22-4 65 0 90 0 74 0 150 0 225 0 52 0 105 0 158 0 22 0 98-5 114 3 9 3 16 13 18 22 5 23 1 65 1 91 0 74 0 150 0 225 0 23 4 61 0 83-2 10-9 19-18 22-10 5-21 3-31 3-45 0-95-6-114 44-14 33 12 119-23 134-18 9-127 4-154 4-53 0-106 0-158 0-25 0-90 4-110-2-11-2-21-12-23-23-5-21-1-65-1-88 0-76 0-152 0-227 0-53 0-106 0-158 0-22-4-99 3-114 3-9 13-17 23-19zM813 655l-124 125c0-27-7-93 12-111 23-22 81-6 112-14z" fill="#292c2d" stroke="#292c2d"/><path d="M308 503c-17 4-18 28-1 32 17 5 40 1 58 1 39 0 78 0 117 0 57 0 114 0 171 0 18 0 45 3 62 0 18-4 19-28 1-32-17-5-40-1-57-1-39 0-78 0-117 0-57 0-115 0-171 0-19 0-46-4-63 0z" fill="#292c2d" stroke="#292c2d"/><path d="M306 370c-18 5-13 30 4 32 18 3 39 0 58 0 38 0 78 0 117 0 58 0 115 0 174 0 15 0 44 3 58 0 19-5 13-30-4-32-18-2-39 0-57 0-39 0-78 0-117 0-59 0-118 0-176 0-15 0-44-3-57 0z" fill="#292c2d" stroke="#292c2d"/></g><g id="lemon" data-name="Lemon"><path d="M813 655c-31 8-89-8-112 14-19 18-12 84-12 111z" fill="#fcde75" stroke="#fcde75"/></g></svg>
CSS background-image
.note {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bDkhy5wyEMVn/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.note {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/bDkhy5wyEMVn/amnt.svg") center / contain no-repeat;
}
React
import NoteSvg from "./note.jsx"; // from the React tab above
<NoteSvg width={48} height={48} />