Map pin icon
A free pencil-style map pin icon, drawn by code from 1 arc, 2 curves and 1 circle. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use map-pin
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 { MapPin } from '@matita/icons/react';
<MapPin size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="map-pin" />JavaScript
import { MapPin, toSvg } from '@matita/icons';
toSvg(MapPin, { 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-map-pin" data-sketch="" aria-hidden="true"><path d="M6.24 12.8C6.11 12.34 5.46 10.94 5.47 10.02C5.47 9.1 5.88 8.12 6.28 7.26C6.68 6.4 7.16 5.45 7.87 4.83C8.58 4.22 9.6 3.76 10.53 3.56C11.46 3.36 12.52 3.44 13.45 3.65C14.39 3.86 15.4 4.23 16.15 4.81C16.9 5.39 17.55 6.27 17.97 7.14C18.38 8.01 18.64 9.06 18.64 10.02C18.64 10.98 18.08 12.42 17.97 12.9" stroke-width="1.68"/><path d="M5.89 11.7Q7.38 16.37 12.17 21.07" stroke-width="1.728"/><path d="M18.47 11.9Q16.4 16.35 11.66 21.29" stroke-width="1.488"/><path d="M9.67 10.42C9.67 10.27 9.62 9.8 9.68 9.5C9.73 9.2 9.83 8.87 10 8.62C10.17 8.37 10.45 8.17 10.72 7.99C10.98 7.8 11.27 7.59 11.59 7.51C11.91 7.43 12.28 7.46 12.61 7.53C12.94 7.6 13.3 7.72 13.57 7.92C13.84 8.11 14.07 8.4 14.25 8.69C14.44 8.97 14.61 9.29 14.69 9.63C14.77 9.97 14.82 10.38 14.74 10.71C14.66 11.05 14.42 11.38 14.2 11.67C13.97 11.95 13.7 12.23 13.39 12.42C13.08 12.62 12.71 12.77 12.34 12.83C11.97 12.89 11.56 12.86 11.18 12.78C10.81 12.7 10.4 12.56 10.08 12.34C9.75 12.12 9.44 11.8 9.24 11.46C9.04 11.12 8.92 10.69 8.88 10.29C8.85 9.9 8.92 9.47 9.03 9.09C9.15 8.7 9.48 8.17 9.57 7.98" stroke-width="1.392"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { MapPin } from '@matita/icons/react';
<MapPin size={32} pencil />The file is icons/map-pin.svg in the package (pencil/map-pin.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for map-pin
Map pin is not stored as a drawing. It is a recipe of 1 arc, 2 curves and 1 circle 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 12 10 6.5 160 380;
Q 5.9 12.2 7.5 16.5 12 21;
Q 18.1 12.2 16.5 16.5 12 21;
C 12 10 2.3map-pin as a number: 280087587
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 map-pin. Seed 0 is the default.
True pixel sizes.