Beta

Heart Frame SVG element, flat

Free

The hollow heart outline ends in a pointed base. It can surround a couple’s photo on a wedding invitation or a message on a Valentine card.

Sign in to download. Free SVGs are free with any account.

heartframeloveborderframeselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/qJal4cy6jc2v/amnt.svg" alt="Heart Frame" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M100 178 30 108C10 88 11 57 29 40c18-18 47-17 65 1l6 6 6-6c18-18 47-19 65-1 18 17 19 48-1 68Z"/></svg>
CSS background-image
.heart-frame {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/qJal4cy6jc2v/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/qJal4cy6jc2v/amnt.svg") center / contain no-repeat;
}
React
import HeartFrameSvg from "./heart-frame.jsx"; // from the React tab above

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

Made with AMNT

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

Rest of Frames elements, flat

Whole pack

Similar SVGs

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