Compass icon
A free pencil-style compass icon, drawn by code from 1 circle and 1 closed shape. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use compass
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 { Compass } from '@matita/icons/react';
<Compass size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="compass" />JavaScript
import { Compass, toSvg } from '@matita/icons';
toSvg(Compass, { 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-compass" data-sketch="" aria-hidden="true"><path d="M4.87 7.42C5.28 7.03 6.39 5.74 7.31 5.1C8.23 4.47 9.29 3.86 10.38 3.61C11.48 3.35 12.78 3.31 13.87 3.57C14.97 3.82 15.98 4.51 16.95 5.14C17.92 5.77 19.06 6.42 19.7 7.35C20.33 8.28 20.62 9.58 20.74 10.72C20.86 11.85 20.68 13.04 20.42 14.16C20.15 15.28 19.83 16.53 19.15 17.43C18.47 18.34 17.35 19.03 16.32 19.58C15.29 20.14 14.12 20.64 12.97 20.77C11.82 20.9 10.58 20.65 9.44 20.34C8.29 20.04 7.05 19.64 6.12 18.93C5.19 18.22 4.42 17.13 3.87 16.08C3.33 15.03 2.93 13.79 2.86 12.62C2.79 11.46 3.1 10.22 3.47 9.09C3.85 7.96 4.36 6.79 5.11 5.85C5.87 4.91 6.89 3.97 7.99 3.44C9.09 2.9 11.1 2.79 11.72 2.66" stroke-width="1.712"/><path d="M15.32 8.45Q14.26 10.86 13.34 13.33Q10.93 14.21 8.61 15.3Q9.83 13.04 10.72 10.63Q13.05 9.6 15.32 8.45Q15.15 8.97 14.91 9.47" stroke-width="1.456"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Compass } from '@matita/icons/react';
<Compass size={32} pencil />The file is icons/compass.svg in the package (pencil/compass.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for compass
Compass is not stored as a drawing. It is a recipe of 1 circle and 1 closed shape 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 8.5;
Z 15.5 8.5 13.3 13.3 8.5 15.5 10.7 10.7compass as a number: 2753264687
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 compass. Seed 0 is the default.
True pixel sizes.