Hand-drawn hearts, and a few things to go with them
Ready today: hearts, heart with an arrow, love letter, heart, rose, ring and 2 more (free) and broken heart, heart pulse, heart handshake, heart in a hand, heart plus, heart minus and 29 more (Pro).
Each heart is stroke-only on a 48 × 48 grid, with a chunky 3.4 stroke and round ends. It's lopsided like a heart drawn with a pen, not built from two circles and a triangle. Because every icon shares that hand, the heart doubles as a regular UI icon: it sits next to a bookmark, a share arrow or a chat bubble from the main library without standing out.
Where a hand drawn heart works
Valentine's cards and notes
A single heart above a handwritten line. For print, use the still SVG or the PNG and set the ink to red or pink.
Likes, favorites and reactions
The heart is a UI icon as much as a decoration. Use the still version in a favorite button, and let it draw itself again when someone taps it (in React, remounting the icon with draw replays the entrance).
Weddings and stationery
Hearts on a save-the-date or an RSVP page. A website version can use the animated SVG so the heart draws itself when the page opens.
Social posts and slides
Social apps don't take SVG, so screen-record the heart drawing itself in a browser for a short clip. On slides, one boiling heart on a "thank you" closer is plenty.
Hand drawn heart PNG, SVG and React
Open the heart above to download it as a still SVG, a transparent 512px PNG or an animated SVG. The animated file draws itself on, then an SVG filter keeps the line boiling through six frames on a loop. It needs no script and plays in modern browsers inline or through an <img> tag.
Many slide apps and design tools import an SVG as a still drawing, or not at all. Because the animated file keeps its strokes hidden until its animation runs, it can come out blank there, so use the still SVG or the PNG in those apps.
In React: npm i @oreo-design/doodle-icons, mount <BoilFilter> once, and use <DoodleIcon name="heart" boilId="boil" />. Add draw for the entrance. Pro icons come as animated SVGs, static SVGs and React components.
Free vs Pro
The basic heart is in the free set: 203 icons, free forever, MIT-licensed for personal and commercial work. Pro adds 1,708 icons today, including the heart variations, and every new batch on the way to 2,000. It's a one-time payment, $39 for the first 100 orders, $69 after that, with a full refund available within 14 days.
Small tips
- Red ink, one edit. In the SVG files from this site the ink (
#2b2a33) is thestrokecolor; change it there. React icons usecurrentColor, socolor: #e0475bon the parent is all it takes. - Hearts in a row, in sequence. In React, stagger
drawDelayacross three hearts and they draw one after another. - Let controls hold still. If the heart is a button, keep the boil on the decoration and the button calm.
Hand-drawn hearts FAQ
Yes, the basic heart is in the free set, MIT-licensed for personal and commercial use. Broken heart, heart pulse, heart handshake, heart in a hand, heart plus, heart minus and 29 more come with Pro.
Yes, for the free ones: each free icon's page has a transparent 512px PNG next to the still and animated SVGs. Pro icons come as animated and static SVG files plus React components.
Yes. The free heart is MIT-licensed, and the Pro license covers client work and unlimited commercial projects; you can recolor and resize the icons. You can't resell or share the icon files on their own, or put them in an icon library, font or template marketplace.
Yes. React icons follow your text color through currentColor. In the SVG files, change the stroke color: the stroke attribute in the still SVG, the <style> block in the animated one.
That's the boil, a loop of six slightly different frames like old hand-drawn cartoons. Turn it down with the Amplitude control on the all icons page before you export the animated SVG.