Lock icon
A free pencil-style lock icon, drawn by code from 1 rectangle, 2 polylines, 1 arc and 1 dot. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use lock
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 { Lock } from '@matita/icons/react';
<Lock size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="lock" />JavaScript
import { Lock, toSvg } from '@matita/icons';
toSvg(Lock, { 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-lock" data-sketch="" aria-hidden="true"><path d="M4.03 10.92Q11.95 11.51 19.88 10.86M18.95 10.49Q18.93 16.15 19.06 21.81M19.77 20.64Q12.03 20.15 4.28 20.52M4.92 21.6Q4.72 15.72 4.84 9.84" stroke-width="1.744"/><path d="M8.16 11.32Q8.16 9.4 8.02 7.48" stroke-width="1.76"/><path d="M7.95 8.21C8.02 7.94 8.15 7.12 8.33 6.6C8.5 6.07 8.63 5.46 8.98 5.07C9.33 4.69 9.93 4.48 10.43 4.27C10.94 4.07 11.47 3.87 12 3.86C12.53 3.84 13.13 3.95 13.61 4.18C14.09 4.4 14.49 4.82 14.85 5.22C15.21 5.62 15.59 6.07 15.77 6.57C15.95 7.06 15.9 7.93 15.93 8.2" stroke-width="1.536"/><path d="M15.86 7.48Q15.97 9.33 16.12 11.18" stroke-width="1.712"/><path d="M12.12 15.87l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Lock } from '@matita/icons/react';
<Lock size={32} pencil />The file is icons/lock.svg in the package (pencil/lock.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for lock
Lock is not stored as a drawing. It is a recipe of 1 rectangle, 2 polylines, 1 arc and 1 dot 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.
R 5 11 14 9.5;
P 8 11 8 7.8;
A 12 7.8 4 180 360;
P 16 7.8 16 11;
O 12 15.8lock as a number: 4010637378
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 lock. Seed 0 is the default.
True pixel sizes.