Heart pulse icon
New Added in v0.4.0
A free pencil-style heart pulse icon, drawn by code from 2 arcs and 2 polylines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use heart-pulse
One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.
React
import { HeartPulse } from '@matita/icons/react';
<HeartPulse size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="heart-pulse" />JavaScript
import { HeartPulse, toSvg } from '@matita/icons';
toSvg(HeartPulse, { size: 24 }); // SVG stringSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-heart-pulse" data-sketch="" aria-hidden="true"><path d="M5.66 12.18C5.47 11.97 4.78 11.4 4.53 10.92C4.29 10.43 4.16 9.81 4.17 9.27C4.17 8.73 4.36 8.19 4.54 7.67C4.72 7.16 4.89 6.56 5.25 6.18C5.61 5.79 6.18 5.56 6.69 5.35C7.2 5.15 7.77 4.93 8.29 4.96C8.81 4.98 9.34 5.28 9.83 5.51C10.32 5.75 10.84 5.98 11.23 6.35C11.61 6.73 11.97 7.26 12.12 7.77C12.27 8.28 12.11 9.16 12.11 9.44" stroke-width="1.584"/><path d="M11.72 9.56C11.76 9.28 11.78 8.4 11.95 7.88C12.13 7.36 12.45 6.88 12.79 6.44C13.13 6.01 13.54 5.52 14.02 5.29C14.51 5.06 15.15 5.05 15.69 5.07C16.24 5.08 16.81 5.19 17.29 5.4C17.78 5.62 18.24 5.96 18.6 6.35C18.97 6.73 19.32 7.21 19.49 7.7C19.67 8.2 19.69 8.78 19.66 9.32C19.62 9.85 19.52 10.43 19.28 10.91C19.04 11.39 18.4 11.97 18.22 12.19" stroke-width="1.392"/><path d="M4.98 11.46Q8.29 15.71 12.18 19.45Q15.69 15.74 18.77 11.66" stroke-width="1.456"/><path d="M8.35 12.48Q9.14 12.68 9.94 12.8Q10.61 11.47 11.43 10.23Q12.18 12.3 12.68 14.45Q13.46 13.52 14.08 12.47Q14.87 12.49 15.65 12.62" stroke-width="1.696"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { HeartPulse } from '@matita/icons/react';
<HeartPulse size={32} pencil />The file is icons/heart-pulse.svg in the package (pencil/heart-pulse.svg for the pencil variant). Matita 0.4.0.
02How it's drawn
The recipe for heart-pulse
Heart pulse is not stored as a drawing. It is a recipe of 2 arcs and 2 polylines on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.
A 8.2 9 4 135 360;
A 15.8 9 4 180 405;
P 5.4 11.8 12 19.5 18.6 11.8;
P 8.6 12.6 10 12.6 11.3 10.4 12.7 14.6 14 12.6 15.4 12.6heart-pulse as a number: 2345751563
Shapes: L line, P polyline, Z closed shape, R rectangle, C circle, E ellipse, A arc, Q curve, O dot. Separate shapes with ;. Edits stay on this page.
03Takes, sizes, pencil
Same icon, every way
Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.
Five seeds of heart-pulse. Seed 0 is the default.
heart-pulse from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/heart-pulse.svg.
True pixel sizes.