Wrench icon
New Added in v0.4.0
A free pencil-style wrench icon, drawn by code from 3 arcs, 1 polyline and 2 lines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use wrench
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 { Wrench } from '@matita/icons/react';
<Wrench size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="wrench" />JavaScript
import { Wrench, toSvg } from '@matita/icons';
toSvg(Wrench, { 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-wrench" data-sketch="" aria-hidden="true"><path d="M20.64 5.33C20.78 5.65 21.4 6.61 21.44 7.28C21.49 7.94 21.2 8.7 20.92 9.33C20.63 9.95 20.24 10.59 19.74 11.04C19.24 11.48 18.57 11.82 17.92 12.02C17.28 12.22 16.55 12.31 15.87 12.25C15.18 12.2 14.17 11.76 13.83 11.67" stroke-width="1.648"/><path d="M12.55 9.99C12.42 9.68 11.89 8.76 11.8 8.11C11.71 7.45 11.81 6.72 12 6.07C12.19 5.43 12.47 4.71 12.92 4.22C13.37 3.74 14.07 3.41 14.69 3.16C15.32 2.9 16.03 2.69 16.7 2.7C17.36 2.72 18.36 3.16 18.69 3.25" stroke-width="1.376"/><path d="M21.54 5.38Q20.34 6.7 18.95 7.8Q17.71 6.24 16.24 4.9Q17.34 3.87 18.33 2.74" stroke-width="1.52"/><path d="M14.96 11.78Q11.56 15.65 7.66 19.02" stroke-width="1.68"/><path d="M12.43 9.04Q9.1 13.08 5.18 16.51" stroke-width="1.68"/><path d="M8 18.51C7.91 18.59 7.65 18.9 7.43 18.99C7.21 19.08 6.93 19.05 6.7 19.03C6.46 19.02 6.27 18.94 6.04 18.88C5.81 18.83 5.48 18.83 5.32 18.68C5.15 18.53 5.13 18.21 5.06 17.98C5 17.75 4.9 17.53 4.91 17.3C4.91 17.07 4.98 16.81 5.1 16.62C5.22 16.43 5.54 16.24 5.62 16.16" stroke-width="1.648"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Wrench } from '@matita/icons/react';
<Wrench size={32} pencil />The file is icons/wrench.svg in the package (pencil/wrench.svg for the pencil variant). Matita 0.4.0.
02How it's drawn
The recipe for wrench
Wrench is not stored as a drawing. It is a recipe of 3 arcs, 1 polyline and 2 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 16.5 7.5 4.8 -19 114;
A 16.5 7.5 4.8 156 289;
P 21.04 5.94 19.06 7.92 16.08 4.94 18.06 2.96;
L 14.52 11.88 7.8 18.6;
L 12.12 9.48 5.4 16.2;
A 6.6 17.4 1.7 45 225wrench as a number: 2723680500
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 wrench. Seed 0 is the default.
wrench from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/wrench.svg.
True pixel sizes.