Anchor icon
New Added in v0.6.0
A free pencil-style anchor icon, drawn by code from 1 circle, 2 lines, 1 arc and 2 polylines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use anchor
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 { Anchor } from '@matita/icons/react';
<Anchor size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="anchor" />JavaScript
import { Anchor, toSvg } from '@matita/icons';
toSvg(Anchor, { 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-anchor" data-sketch="" aria-hidden="true"><path d="M10.34 6.09C10.29 5.95 10.09 5.55 10.05 5.27C10.01 4.99 10.05 4.68 10.11 4.39C10.18 4.11 10.27 3.79 10.43 3.56C10.6 3.32 10.85 3.12 11.1 2.98C11.34 2.84 11.64 2.74 11.93 2.71C12.22 2.68 12.54 2.69 12.83 2.79C13.11 2.89 13.4 3.08 13.62 3.31C13.85 3.53 14.05 3.83 14.17 4.13C14.3 4.44 14.37 4.82 14.36 5.15C14.34 5.49 14.23 5.84 14.09 6.16C13.95 6.47 13.77 6.79 13.53 7.03C13.29 7.27 12.97 7.49 12.65 7.59C12.33 7.69 11.95 7.68 11.61 7.63C11.27 7.58 10.91 7.49 10.61 7.31C10.3 7.13 10 6.85 9.79 6.55C9.59 6.24 9.44 5.85 9.36 5.47C9.28 5.09 9.33 4.48 9.33 4.28" stroke-width="1.584"/><path d="M11.9 6.63Q12.03 13.82 11.97 21.02" stroke-width="1.424"/><path d="M8.6 10.4Q12.05 10.67 15.5 10.69" stroke-width="1.696"/><path d="M19.86 12.07C19.82 12.63 19.95 14.37 19.63 15.4C19.3 16.43 18.65 17.46 17.91 18.26C17.18 19.05 16.2 19.71 15.22 20.17C14.23 20.63 13.08 21.01 12 21.03C10.92 21.05 9.74 20.73 8.73 20.29C7.71 19.86 6.65 19.23 5.91 18.42C5.16 17.61 4.55 16.5 4.25 15.44C3.95 14.38 4.12 12.63 4.09 12.07" stroke-width="1.648"/><path d="M2.87 15.24Q3.54 13.55 4.17 11.85Q4.87 13.45 5.63 15.02" stroke-width="1.504"/><path d="M21.08 15.22Q20.75 13.58 20.19 12.01Q19.07 13.26 18.17 14.67" stroke-width="1.632"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Anchor } from '@matita/icons/react';
<Anchor size={32} pencil />The file is icons/anchor.svg in the package (pencil/anchor.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for anchor
Anchor is not stored as a drawing. It is a recipe of 1 circle, 2 lines, 1 arc 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.
C 12 5 2;
L 12 7 12 21;
L 9 10.5 15 10.5;
A 12 13 8 0 180;
P 3 15 4 12 5.5 14.5;
P 21 15 20 12 18.5 14.5anchor as a number: 1122880180
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 anchor. Seed 0 is the default.
anchor from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/anchor.svg.
True pixel sizes.