HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/EELdevwD2FJ5/amnt.svg" alt="Lightning Bolt" 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="M714 56l-417 409h194l-110 198h110c-10 23-29 47-43 69-34 53-67 108-100 161-8 13-29 39-31 52l351-353h-122c19-30 47-56 71-83 36-39 69-83 108-120-18-5-40-2-58-2-42 0-84 0-125 0z" fill="#fdd602" stroke="#fdd602"/></g><g id="black" data-name="Black"><path d="M567 372c10-24 24-46 35-69 31-58 61-117 92-175 6-13 55-101 54-107-2-8-9-7-14-5-10 4-81 78-94 91-64 60-124 124-188 183-33 30-63 61-93 92-15 15-80 73-86 85-2 4-3 8-4 12l196 1c-22 48-52 93-77 139-11 19-24 38-30 59l106 1c-20 24-35 55-51 81-31 49-62 98-92 147-12 20-24 39-35 58-4 6-17 24-16 30 4 17 21-4 26-8 31-31 62-62 93-93 61-62 123-124 184-185 31-31 62-62 93-92 6-7 36-31 25-39-5-3-16-1-21-1-31 0-61 0-92 0 12-17 27-32 41-47 31-33 61-68 91-102 6-7 39-40 40-45 2-5 1-8-4-10-7-4-30-1-38-1-47 0-94 0-141 0zM714 56l-172 331c41 0 83 0 125 0 18 0 40-3 58 2-39 37-72 81-108 120-24 27-52 53-71 83h122l-351 353c2-13 23-39 31-52 33-53 66-108 100-161 14-22 33-46 43-69h-110l110-198h-194z" fill="#020202" stroke="#020202"/></g></svg>
CSS background-image
.lightning-bolt {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/EELdevwD2FJ5/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.lightning-bolt {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/EELdevwD2FJ5/amnt.svg") center / contain no-repeat;
}
React
import LightningBoltSvg from "./lightning-bolt.jsx"; // from the React tab above
<LightningBoltSvg width={48} height={48} />
