Drafting compass icon

A free pencil-style drafting compass icon, drawn by code from 1 circle and 3 lines. Use it as an SVG, a React component, or by name. MIT licensed.

drafting-compass

01Use it

Use drafting-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 { DraftingCompass } from '@matita/icons/react';

<DraftingCompass size={24} />

// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="drafting-compass" />

JavaScript

import { DraftingCompass, toSvg } from '@matita/icons';

toSvg(DraftingCompass, { size: 24 });   // SVG string

SVG

<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-drafting-compass" data-sketch="" aria-hidden="true"><path d="M12.6 6.33C12.49 6.36 12.17 6.48 11.94 6.5C11.71 6.52 11.45 6.52 11.23 6.44C11.01 6.36 10.79 6.2 10.62 6.03C10.45 5.86 10.3 5.65 10.2 5.43C10.11 5.21 10.04 4.94 10.04 4.7C10.05 4.45 10.12 4.19 10.23 3.96C10.33 3.73 10.49 3.5 10.67 3.33C10.86 3.15 11.1 2.98 11.34 2.88C11.59 2.79 11.88 2.74 12.16 2.74C12.43 2.74 12.74 2.78 13 2.89C13.25 3 13.5 3.2 13.69 3.41C13.87 3.62 14.01 3.89 14.11 4.16C14.21 4.42 14.3 4.73 14.28 5.01C14.27 5.3 14.15 5.6 14.01 5.86C13.87 6.12 13.68 6.37 13.46 6.58C13.24 6.78 12.97 6.99 12.68 7.1C12.39 7.2 12.03 7.25 11.71 7.22C11.4 7.19 10.94 6.96 10.79 6.9" stroke-width="1.472"/><path d="M11.19 5.84Q7.9 13.15 5.48 20.81" stroke-width="1.376"/><path d="M12.53 5.76Q15.92 13.17 18.55 20.89" stroke-width="1.68"/><path d="M7.72 13.81Q12.06 13.68 16.4 14.2" stroke-width="1.712"/></svg>

Pencil variant

import '@matita/icons/pencil.css';
import { DraftingCompass } from '@matita/icons/react';

<DraftingCompass size={32} pencil />

The file is icons/drafting-compass.svg in the package (pencil/drafting-compass.svg for the pencil variant). Matita 0.2.1.

02How it's drawn

The recipe for drafting-compass

Drafting compass is not stored as a drawing. It is a recipe of 1 circle and 3 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.

A · Recipe
C 12 4.8 1.7;
L 11.2 6.4 5.5 20.5;
L 12.8 6.4 18.5 20.5;
L 8 14 16 14
B · Plotted
C · Drawn
How it works

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.

seed 0
seed 1
seed 2
seed 3
seed 4

Five seeds of drafting-compass. Seed 0 is the default.

16 px
20 px
24 px
32 px
48 px
96 px

True pixel sizes.

Ink
Pencil