Crosshair icon
A free pencil-style crosshair icon, drawn by code from 1 circle and 4 lines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use crosshair
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 { Crosshair } from '@matita/icons/react';
<Crosshair size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="crosshair" />JavaScript
import { Crosshair, toSvg } from '@matita/icons';
toSvg(Crosshair, { 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-crosshair" data-sketch="" aria-hidden="true"><path d="M9.51 4.87C9.98 4.76 11.4 4.19 12.34 4.21C13.28 4.23 14.3 4.56 15.16 5C16.02 5.44 16.85 6.11 17.52 6.86C18.18 7.62 18.83 8.56 19.16 9.54C19.48 10.52 19.59 11.71 19.49 12.75C19.39 13.8 19.03 14.9 18.56 15.82C18.09 16.74 17.41 17.62 16.65 18.3C15.89 18.98 14.95 19.62 14 19.92C13.04 20.22 11.93 20.24 10.92 20.11C9.91 19.98 8.81 19.69 7.95 19.13C7.08 18.58 6.35 17.67 5.73 16.79C5.11 15.9 4.47 14.87 4.24 13.82C4.02 12.76 4.16 11.53 4.37 10.45C4.58 9.36 4.92 8.23 5.48 7.31C6.04 6.4 6.87 5.58 7.73 4.94C8.59 4.31 9.61 3.76 10.64 3.5C11.68 3.25 12.91 3.13 13.94 3.4C14.97 3.67 16.33 4.85 16.8 5.14" stroke-width="1.472"/><path d="M12.06 2.17Q12.1 4.81 12.09 7.46" stroke-width="1.712"/><path d="M11.88 16.89Q11.69 19.42 11.86 21.94" stroke-width="1.584"/><path d="M2.22 12.18Q4.77 12.05 7.32 12.09" stroke-width="1.792"/><path d="M16.65 11.85Q19.26 12.09 21.87 12.09" stroke-width="1.696"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Crosshair } from '@matita/icons/react';
<Crosshair size={32} pencil />The file is icons/crosshair.svg in the package (pencil/crosshair.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for crosshair
Crosshair is not stored as a drawing. It is a recipe of 1 circle and 4 lines 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.
C 12 12 7.5;
L 12 2.5 12 7;
L 12 17 12 21.5;
L 2.5 12 7 12;
L 17 12 21.5 12crosshair as a number: 3490291555
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 crosshair. Seed 0 is the default.
True pixel sizes.