HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ROcSa7iELX-9/amnt.svg" alt="Picture Frame" 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="black" data-name="Black"><path d="M991 153h-957c-5 24-1 72-1 99 0 81 0 163 0 246 0 116 0 232 0 348 24 5 91 1 120 1 98 0 198 0 297 0 139 0 278 0 417 0 34 0 70 0 105 0 4 0 16 2 19-2 3-3 1-69 1-79-2-69 0-138 0-207 0-135 1-271-1-406zm-10 7c-7 6-22 26-30 29-10 5-52 1-65 1-41 0-82 0-122 0-84 0-169 0-252 0-82 0-165-1-246 0-41 0-82 0-122 0-14 0-61 3-71-1-7-2-24-23-30-29zM39 163c6 7 28 24 30 31 4 10 1 105 1 124 0 60 0 121 0 182 0 60 0 121 0 182 0 18 3 114-1 124-2 7-22 23-28 29-1 0-2-1-2 0zm946 0v674c-6-7-28-24-30-31-4-10-1-105-1-123 0-61 0-122 0-182 0-61 0-122 0-182 0-31 0-61 0-91 0-10-3-24 0-33 3-7 25-25 31-32zm-40 33c-6 5-20 23-26 25-11 4-50 1-63 1-38 0-76 0-114 0-77 0-153 0-229 0s-152 0-228 0c-38 0-77 0-114 0-15 0-55 4-66-1-6-2-20-20-25-25zM76 201c5 5 23 19 25 25 4 9 1 95 1 112 0 53 0 107 0 161s0 108 0 163c0 19 4 99-1 112-2 6-19 20-25 26zm872 0v599c-5-5-23-20-25-25-4-9-1-97-1-113 0-55 0-109 0-163s0-106 0-159c0-17-3-105 1-114 2-6 20-20 25-25zm-32 27c3 8 0 113 1 132 2 46-1 93-1 139-1 91 0 182 0 273-12 4-174 1-200 1-68 0-135 0-202 0-135 0-270 0-405 0-4-31-1-63-1-95 0-59 2-120-1-180-1-25 1-52 1-78 0-25-1-52 0-77 1-38-5-78 1-115zm28 575h-863c4-5 18-21 23-23 9-4 54-1 67-1 37 0 76 0 114 0 75 0 151 0 227 0 75 0 151 0 227 0 38 0 76 0 114 0 13 0 57-3 67 1 5 2 19 18 24 23zM43 840c7-6 24-28 31-30 11-4 48-1 62-1 40 0 80 0 121 0 80 0 161 0 242 0 80 0 161 0 242 0 40 0 80 0 121 0 15 0 77-3 87 0 6 2 12 12 17 16 24 23 9 16-16 16-20 0-40 0-60 0-41 0-81 0-121 0-81 0-162 0-242 0-81 0-162 0-242 0-56 0-112 0-167 0-24 0-51 3-75-1z" fill="#240d03" stroke="#240d03"/></g><g id="brown" data-name="Brown"><path d="M43 840c24 4 51 1 75 1 55 0 111 0 167 0 80 0 161 0 242 0 80 0 161 0 242 0 40 0 80 0 121 0 20 0 40 0 60 0 25 0 40 7 16-16-5-4-11-14-17-16-10-3-72 0-87 0-41 0-81 0-121 0-81 0-162 0-242 0-81 0-162 0-242 0-41 0-81 0-121 0-14 0-51-3-62 1-7 2-24 24-31 30z" fill="#7a4521" stroke="#7a4521"/><path d="M981 160h-938c6 6 23 27 30 29 10 4 57 1 71 1 40 0 81 0 122 0 81-1 164 0 246 0 83 0 168 0 252 0 40 0 81 0 122 0 13 0 55 4 65-1 8-3 23-23 30-29z" fill="#7a4521" stroke="#7a4521"/><path d="M985 163c-6 7-28 25-31 32-3 9 0 23 0 33 0 30 0 60 0 91 0 60 0 121 0 182 0 60 0 121 0 182 0 18-3 113 1 123 2 7 24 24 30 31z" fill="#7a4521" stroke="#7a4521"/><path d="M39 163v672c0-1 1 0 2 0 6-6 26-22 28-29 4-10 1-106 1-124 0-61 0-122 0-182 0-61 0-122 0-182 0-19 3-114-1-124-2-7-24-24-30-31z" fill="#7a4521" stroke="#7a4521"/></g><g id="caramel" data-name="Caramel"><path d="M945 196h-865c5 5 19 23 25 25 11 5 51 1 66 1 37 0 76 0 114 0 76 0 152 0 228 0s152 0 229 0c38 0 76 0 114 0 13 0 52 3 63-1 6-2 20-20 26-25z" fill="#ce965d" stroke="#ce965d"/><path d="M944 803c-5-5-19-21-24-23-10-4-54-1-67-1-38 0-76 0-114 0-76 0-152 0-227 0-76 0-152 0-227 0-38 0-77 0-114 0-13 0-58-3-67 1-5 2-19 18-23 23z" fill="#ce965d" stroke="#ce965d"/><path d="M948 201c-5 5-23 19-25 25-4 9-1 97-1 114 0 53 0 105 0 159s0 108 0 163c0 16-3 104 1 113 2 5 20 20 25 25z" fill="#ce965d" stroke="#ce965d"/><path d="M76 201v599c6-6 23-20 25-26 5-13 1-93 1-112 0-55 0-109 0-163s0-108 0-161c0-17 3-103-1-112-2-6-20-20-25-25z" fill="#ce965d" stroke="#ce965d"/></g></svg>
CSS background-image
.picture-frame {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ROcSa7iELX-9/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.picture-frame {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ROcSa7iELX-9/amnt.svg") center / contain no-repeat;
}
React
import PictureFrameSvg from "./picture-frame.jsx"; // from the React tab above
<PictureFrameSvg width={48} height={48} />