Key icon
A free pencil-style key icon, drawn by code from 1 circle and 3 lines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use key
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 { Key } from '@matita/icons/react';
<Key size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="key" />JavaScript
import { Key, toSvg } from '@matita/icons';
toSvg(Key, { 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-key" data-sketch="" aria-hidden="true"><path d="M11.44 14.82C11.45 15.09 11.61 15.92 11.51 16.45C11.41 16.97 11.15 17.53 10.82 17.97C10.5 18.41 10.05 18.82 9.57 19.1C9.09 19.38 8.5 19.61 7.95 19.67C7.39 19.72 6.79 19.58 6.25 19.41C5.71 19.25 5.16 19.02 4.7 18.68C4.25 18.34 3.76 17.88 3.51 17.38C3.26 16.87 3.22 16.22 3.21 15.65C3.2 15.08 3.25 14.46 3.46 13.93C3.66 13.4 4.01 12.88 4.41 12.46C4.81 12.04 5.31 11.61 5.85 11.39C6.39 11.16 7.05 11.11 7.65 11.11C8.26 11.11 8.94 11.15 9.48 11.39C10.02 11.64 10.5 12.12 10.9 12.58C11.3 13.03 11.68 13.56 11.89 14.13C12.11 14.69 12.26 15.38 12.21 15.98C12.15 16.59 11.67 17.47 11.57 17.77" stroke-width="1.408"/><path d="M10.08 12.71Q15.06 7.65 20.16 2.72" stroke-width="1.696"/><path d="M16.04 6.2Q17.78 7.71 19.52 9.21" stroke-width="1.552"/><path d="M13.77 8.93Q15.14 10.08 16.34 11.4" stroke-width="1.376"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Key } from '@matita/icons/react';
<Key size={32} pencil />The file is icons/key.svg in the package (pencil/key.svg for the pencil variant). Matita 0.2.1.
02How it's drawn
The recipe for key
Key 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.
C 7.5 15.5 4;
L 10.4 12.6 20 3;
L 16.5 6.5 19 9;
L 14 9 16 11key as a number: 1746258028
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 key. Seed 0 is the default.
True pixel sizes.