HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IfKRA8EDSjyi/amnt.svg" alt="Pointing Arrow" 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="blue" data-name="Blue"><path d="M852 147c-14 1-56 17-72 22-87 28-173 54-260 81-55 16-111 34-166 51-8 2-39 9-42 16-2 4-1 7 1 11 3 5 73 51 84 59 9 7 59 39 62 45 1 2 2 4 2 7-1 5-43 45-50 52-36 35-73 71-109 107s-73 71-109 107c-12 11-30 22-37 36-3 6-3 11-1 17 4 10 49 51 60 62 9 9 27 32 38 36 7 2 12 2 18-1 9-5 50-48 61-59 36-36 72-72 109-108 36-36 72-72 108-108 31-32 29-32 54 4 15 22 29 43 44 64 6 9 34 53 39 56 5 4 12 4 16-1 5-5 21-63 25-75 17-54 35-109 52-163 17-55 35-111 52-165 6-21 43-125 42-137-1-11-11-16-21-16z" fill="#0174fb" stroke="#0174fb"/></g><g id="grape" data-name="Grape"><path d="M576 594c5 12 84 125 93 132 9 8 22 11 34 8 10-2 19-9 24-17 8-13 11-31 16-46 13-43 27-85 41-127 21-68 44-136 65-205 9-31 52-153 52-174 0-11-5-23-12-31-10-10-23-16-37-15-18 1-37 11-54 16-38 11-76 23-114 35-69 21-138 42-206 63-38 12-76 24-114 35-20 7-45 10-63 21-8 5-14 13-16 21-4 12-1 26 7 36 10 13 88 63 108 77 7 5 16 10 22 17-47 46-93 93-141 138-16 15-31 31-46 46-32 30-64 61-94 92-43 43 14 82 43 111 30 31 65 85 112 44 32-29 63-61 94-92 45-45 90-90 136-135 11-11 38-44 50-50zM852 147c10 0 20 5 21 16 1 12-36 116-42 137-17 54-35 110-52 165-17 54-35 109-52 163-4 12-20 70-25 75-4 5-11 5-16 1-5-3-33-47-39-56-15-21-29-42-44-64-25-36-23-36-54-4-36 36-72 72-108 108-37 36-73 72-109 108-11 11-52 54-61 59-6 3-11 3-18 1-11-4-29-27-38-36-11-11-56-52-60-62-2-6-2-11 1-17 7-14 25-25 37-36 36-36 73-71 109-107s73-72 109-107c7-7 49-47 50-52 0-3-1-5-2-7-3-6-53-38-62-45-11-8-81-54-84-59-2-4-3-7-1-11 3-7 34-14 42-16 55-17 111-35 166-51 87-27 173-53 260-81 16-5 58-21 72-22z" fill="#011b65" stroke="#011b65"/></g></svg>
CSS background-image
.pointing-arrow {
background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IfKRA8EDSjyi/amnt.svg");
background-size: contain;
}
CSS mask-image (takes the text colour)
.pointing-arrow {
width: 1.5em; height: 1.5em;
background-color: currentColor;
mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/IfKRA8EDSjyi/amnt.svg") center / contain no-repeat;
}
React
import PointingArrowSvg from "./pointing-arrow.jsx"; // from the React tab above
<PointingArrowSvg width={48} height={48} />