HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-RPn28Tpc9CQ/amnt.svg" alt="Restaurant Menu" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7C9 5.5 5.5 5.5 2 6.5v12c3.5-1 7-1 10 1 3-2 6.5-2 10-1v-12c-3.5-1-7-1-10 .5Z"/><path d="M12 7v12.5"/><path d="M5 9v2a2 2 0 0 0 4 0V9M7 9v7"/><circle cx="17" cy="12.5" r="2.5"/></svg>
CSS background-image
.restaurant-menu {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-RPn28Tpc9CQ/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.restaurant-menu {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-RPn28Tpc9CQ/amnt.svg") center / contain no-repeat;
}
React
import RestaurantMenuSvg from "./restaurant-menu.jsx"; // from the React tab above
<RestaurantMenuSvg width={48} height={48} />