Menu

Beta
Sign in
Beta
Heart Frame SVG element, flat

Heart Frame SVG element, flat

The hollow centre of this heart outline ends in a pointed base. It can surround a photo on an anniversary card or highlight a message in a scrapbook.

Free · from Frames elements, flat · Set 2

Similar SVGs

More from Frames elements, flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/J6XYJa4kz222/amnt.svg" alt="Heart 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="red" data-name="Red"><path d="M512 178c-14-20-28-38-47-55-43-39-100-62-158-63-196-5-306 186-247 363 37 113 129 192 214 270 61 56 206 176 236 249 27-68 178-198 237-250 85-74 179-157 216-267 44-128 3-267-117-335-88-50-208-37-284 31-20 17-34 37-50 57zm-2 665c-21-30-46-56-71-81-94-94-264-219-306-344-84-250 235-390 379-161 62-88 162-147 272-104 108 43 144 160 105 264-64 170-277 279-379 426z" fill="#fb1e45" stroke="#fb1e45"/></g><g id="black" data-name="Black"><path d="M512 157c-10-18-29-35-45-48-85-72-211-81-306-23-119 73-155 219-110 348 40 113 134 197 222 274 67 60 140 120 195 192 16 21 27 44 42 65 15-22 27-46 44-68 55-71 127-131 195-190 88-76 182-160 224-273 111-302-252-533-461-277zm0 21c16-20 30-40 50-57 76-68 196-81 284-31 120 68 161 207 117 335-37 110-131 193-216 267-59 52-210 182-237 250-30-73-175-193-236-249-85-78-177-157-214-270-59-177 51-368 247-363 58 1 115 24 158 63 19 17 33 35 47 55z" fill="#020102" stroke="#020102"/><path d="M510 843c102-147 315-256 379-426 39-104 3-221-105-264-110-43-210 16-272 104-144-229-463-89-379 161 42 125 212 250 306 344 25 25 50 51 71 81zm0-22c-7-6-12-14-19-21-19-22-40-44-62-64-38-36-78-71-115-107-66-64-142-128-171-219-67-204 168-346 320-194 18 18 38 40 49 64 57-88 144-154 254-121s149 148 113 250c-31 89-105 156-172 218-48 44-97 87-142 133-18 18-39 46-55 61z" fill="#020102" stroke="#020102"/></g></svg>
CSS background-image
.heart-frame {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/J6XYJa4kz222/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.heart-frame {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/J6XYJa4kz222/amnt.svg") center / contain no-repeat;
}
React
import HeartFrameSvg from "./heart-frame.jsx"; // from the React tab above

<HeartFrameSvg width={48} height={48} />

Tags

heartframeloveborderframeselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Heart Frame: Heart-shaped outline with a hollow centre and pointed base. A flat element. as part of the pack Frames elements, flat · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings