Hand drawn heart SVG
This hand drawn heart icon is free to download as a still SVG, a transparent PNG or an animated heart icon that draws itself on and keeps wiggling. The universal sign for love, likes and saved favorites.
Download
heart.svg · heart.png (512px, transparent) · animated SVG
Free under the MIT license, for personal and commercial use.
How to use the hand drawn heart icon
Put it on a like button, a wishlist, a Valentine's card or a thank-you slide. Because the heart is a real vector stroke on a 48-unit grid, not a scanned sketch, it stays crisp from a 16-pixel button to a full-slide illustration. It also sits comfortably next to the other doodles in the set: same pen, same stroke weight, same slightly wobbly hand.
Slides and documents
Drop the transparent PNG of the heart into Keynote, PowerPoint, Google Slides, Notion or Docs and it lands without a white box around it. The ink is a dark charcoal, so it reads best on a light background; for a dark slide, recolor the still SVG first.
Websites and apps
Load the still SVG with an <img> tag, or paste the markup inline so CSS can color it. The animated heart SVG carries its own styles and wiggle filter and needs no JavaScript, so it plays wherever a browser shows an SVG. In React, the heart comes from the free npm package.
Social posts and short videos
Open the animated SVG in a browser and screen-record the heart drawing itself on for a story, a reel or a thumbnail. A hand-drawn mark next to a screenshot reads as a person pointing something out, which is usually the point.
npm i @oreo-design/doodle-icons
import { DoodleIcon, BoilFilter } from '@oreo-design/doodle-icons'
<BoilFilter id="boil" />
<DoodleIcon name="heart" boilId="boil" size={32} />Where a hand drawn heart fits
Valentine's cards, weddings and thank-you notes
A hand drawn heart next to a name or a date looks like it was added with a pen at the last minute, which suits cards, place cards and gift tags. For print, use the still SVG so it stays sharp at any size. The 512px PNG covers about 1.7 inches (4.3 cm) at 300 dpi, which is enough for a tag but small for a poster. Recolor the stroke to red or pink in any vector editor before you place it.
Like buttons and favorites
On a like or save button, draw the heart in your text color while it is off and switch the stroke to red when it is on. With the stroke set to currentColor, that is one color change on the button. Set aria-pressed on the button so a screen reader announces the state, and keep the tap area around 44 pixels square even when the heart itself is drawn at 20.
Emails, Notion and social posts
Gmail and Outlook don't display SVG images, so in a newsletter use the PNG and set its width on the image tag, for example 32 pixels. In Notion, upload the PNG as a page icon for a favorites list or a gratitude journal. For a story or a reel, screen-record the animated hand drawn heart drawing itself on and post the clip.
SVG, PNG, animated SVG or React?
Still SVG
Plain strokes, no animation. It scales to any size and every vector editor opens it, so this is the file to recolor, resize or combine with your own artwork.
Transparent PNG
A 512-pixel image of the heart on a transparent background, for slide decks, docs, chat apps and anything else that will not take an SVG.
Animated heart SVG
The animated heart icon draws itself on stroke by stroke, then keeps "boiling": an SVG filter nudges the line between six slightly different frames, the way hand-inked cartoons never redraw a line in quite the same place. Many slide apps and design tools import an SVG as a still drawing, or not at all, and the animated file can come out blank there, so use the still SVG or the PNG in those apps.
React component
Install @oreo-design/doodle-icons and render <DoodleIcon name="heart" />. Mount one <BoilFilter> and pass its id as boilId to get the wiggle; add draw to have the heart draw itself on when it first appears.
Change the color, size and line weight
The heart is drawn as strokes, not fills, on a 48 × 48 viewBox with a stroke width of 3.4. That makes three things easy to change. Color: set the stroke to any color, or to currentColor so the icon follows the text color around it. Size: change the width and height and the line stays sharp. Weight: raise or lower stroke-width for a bolder marker or a finer pen.
<!-- inline the still SVG, then: -->
<svg viewBox="0 0 48 48" width="32" height="32"
fill="none" stroke="currentColor" stroke-width="3.4"
stroke-linecap="round" stroke-linejoin="round">…</svg>
// React: the icon takes the color of its parent
<span style={{ color: 'tomato' }}>
<DoodleIcon name="heart" boilId="boil" size={32} strokeWidth={3} />
</span>Accessibility
If the heart is the only thing inside a button or link, give it a name, for example aria-label="Heart" on the button or alt="Heart" on the image, so a screen reader says what it does. If it sits next to a word that already says the same thing, mark it aria-hidden="true" so it is not read twice.
The animated file plays its draw-on and wiggle every time it loads. For visitors who ask their system for less motion, serve the still SVG instead: wrap the image in a <picture> element with a <source> for the still heart.svg and media="(prefers-reduced-motion: reduce)". This site does the same and shows every icon already drawn.
Hand drawn heart icon FAQ
Yes. The hand drawn heart icon is released under the MIT license, so you can use it in personal and commercial work, including client projects, apps and products you sell. No sign-up is needed to download it.
Usually not: slide and design apps show a still frame, or nothing. Use the still SVG or the transparent PNG there, or screen-record the animation in a browser and insert it as a video.
As big as you like. The SVG is a vector, so it stays sharp at any size. The PNG is 512 × 512 pixels, enough for a slide or a document; for anything larger, export from the SVG.
Yes. Change the stroke color and stroke-width in any vector editor, set stroke to currentColor and color it with CSS, or pass size and strokeWidth to the React component.