60 new icons

The most concrete request last time was a medical and science set, so that is the biggest group: 22 icons, including stethoscope, syringe, microscope, dna, x-ray, brain, tooth and ambulance. The other 38 fill everyday gaps: timer, calculator, trophy, wrench, car, plane, file-check, user-check and more.

Each glyph is checked at 96 px and at 24 px before it goes in. Some did not pass: a fingerprint read as wifi, so it is out, and six icons (including the brain and the car) were drawn twice. Greek letters, a lab coat and a surgeon did not make it either; I couldn't draw them clearly at 24 px yet.

Wobble: one number, sketchy to exact

<SketchIcon name="wrench" />              // the full hand (default)
<SketchIcon name="wrench" wobble={0.4} /> // a calm hand
<SketchIcon name="wrench" wobble={0} />   // exact shapes


Every habit of the pencil in the engine already had an amount (overshoot, bow, jitter, how far a ring overlaps). Wobble multiplies them. At 1 it multiplies by nothing, so the default draws exactly what 0.3.0 drew. At 0 the engine skips the sketching and draws the plotted shapes as they are: true lines, closed circles, square corners. The random numbers do not depend on the wobble, so 0.5 is the same drawing as 1, only calmer.

Exact icons are small, too: about 0.47 KB per SVG against about 0.82 KB for the sketchy one, and there are ready-made files for all 260 at @matita/icons/exact/<name>.svg.

Try it

npm i @matita/icons

React components, plain SVG, a script tag, a sprite and a Figma file. MIT, free, no signup. Play with the Wobble slider on matita.dev, see what changed in the changelog, and what is next on the roadmap. If an icon is missing, open an issue and I'll draw it.

The full write-up, with how the wobble works inside the engine: [LINK to the dev.to article].

The result is Matita (Italian for pencil): 173 icons, MIT, on npm as @matita/icons. This post is about the small engine that draws them.

Glyphs are plotted, not drawn

Nobody draws the icons by hand. Each glyph is a line of drafting primitives on a 24 × 24 grid, the kind of thing you'd plot with a ruler and compass:

calendar: 'R 4 5.5 16 15; L 4 10 20 10; L 8.5 3.5 8.5 7; L 15.5 3.5 15.5 7',
search:   'C 10.5 10.5 6.2; L 15.2 15.2 20 20',
clock:    'C 12 12 8.5; P 12 7 12 12 15.5 14',

There are nine primitives: L line, P open polyline, Z closed polyline, R rect, C circle, E ellipse, A arc, Q quadratic curve and O dot. Most glyphs use two to five of them. That keeps the source tiny and makes the set consistent: every icon is built from the same handful of shapes, and the engine applies the same habits to all of them.

Same name, same drawing

The randomness is seeded by the icon's name. A 32-bit FNV-1a hash of "calendar" seeds a small PRNG (a few lines of integer mixing), and every random choice the engine makes for that glyph comes from that stream, in a fixed order:

const hash = s => { let h = 2166136261; for (const c of s) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); } return h >>> 0; };
const random = prng(hash(name) + seed * 7919);

So calendar is drawn the same way on every machine, in every build, forever, unless its source changes. That matters more than it sounds:

• No hydration mismatch. The server-rendered SVG and the client-rendered SVG are byte-identical.

• No flicker. Nothing re-rolls on re-render.

• Snapshot tests stay green.

• No drawing at runtime. The whole set is drawn once at build time and the package ships the finished path data; the engine only runs if you ask for another seed or your own glyph. One icon adds about 1 kB gzipped to a bundle, renderer included; ten add about 4 kB.

If you don't like a particular drawing, pass a seed and get another hand for the same glyph:

The habits of a pencil

The engine is about 90 lines. Each primitive gets a few habits, all small, all bounded. Units below are grid units, and at 24 px one unit is one pixel.

Lines overshoot. Both ends of a line are pushed out along its direction by 0.2 to 0.5, and each endpoint moves by up to ±0.2. The line is then drawn as a quadratic curve whose control point sits a little off the midpoint, so it bows slightly, by at most 0.7 or 4.5 % of its length, whichever is smaller. A ruled pencil line is never perfectly straight and rarely stops exactly where you aimed.

Boxes cross at the corners. A rect isn't a closed path. It's four separate lines with a bigger overshoot (0.5 to 1.5), so every corner is a small cross, like a box drawn edge by edge.

Circles overlap where the pen closes. A circle starts at a random angle and sweeps 388° to 418°, so the pen runs 28° to 58° past where it started. Over the sweep the radius drifts outward by 0.55 to 1, so the closing pass sits just outside the opening one instead of on top of it. Each point gets ±2.8 % radius noise, the whole ring is squashed by up to 4.5 %, and the points are joined with smooth cubic Béziers.

Polylines keep sharp joints. Every vertex moves by up to ±0.2 and every segment bows on its own, but the joints stay sharp: a check mark still has a point at the bottom. Open polylines overshoot at both ends; closed ones run past their starting point along the first edge, the way you'd close a shape without lifting the pencil.

Pressure varies per stroke. Every primitive gets its own stroke width, between 0.86 and 1.14 times the base 1.6.

Dots are taps. A dot is a near-zero-length segment with a round cap, 1.55 times as heavy as a line.

None of this is noise for its own sake. Each rule is something your hand does when it draws with a ruler, and each one has a cap so the icon still reads at 16 px.

Small sizes are the real test

A hand-drawn style is easy at 96 px and hard at 16 px. Too much wobble and a 16 px icon turns to mush. The caps above are what keep it usable: at 24 px a line bows by less than a pixel and an endpoint moves by a fifth of one, and the stroke never goes below 1.38. At UI sizes the set reads like a regular line icon set; the pencil character shows from about 32 px up.

The pencil variant

Every icon also has a pencil version. The engine draws the glyph a second time with a different seed and lays that pass under the first, thinner (0.55×) and faint (32 % opacity). The main strokes drop to 80–95 % opacity, and a CSS mask built from two feTurbulence layers adds paper grain. It's all still SVG and CSS, no images.

<SketchIcon name="ruler" pencil />

Using it

npm i @matita/icons

import { ArrowRight, SketchIcon, SketchIconProvider } from '@matita/icons/react';

<ArrowRight size={20} />
<SketchIcon name="calendar" seed={2} />
<SketchIconProvider size={24} strokeWidth={1.4}>…</SketchIconProvider>

Without React, toSvg(icon) returns a string, there's a script-tag build that swaps <i data-sketch-icon="…"> for SVGs, and plain .svg files and a sprite ship in the package.

The engine is public too, so you can draw your own glyphs in the same hand:

import { drawIcon } from '@matita/icons/engine';
import { createSketchIcon } from '@matita/icons/react';

const Kite = createSketchIcon(drawIcon('kite', {
  defs: { kite: 'Z 12 3 18 10 12 21 6 10; L 6 10 18 10; L 12 3 12 21' },
}));

What's next

Vue and Svelte packages. The whole set is already in Figma as a free Community file, every icon a component. If an icon you need is missing, open an icon request; new glyphs are a line of primitives each, so they're quick to add.

• Site and icon browser: https://matita.dev

• Code: https://github.com/matita-dev/icons

• npm: https://www.npmjs.com/package/@matita/icons

• Figma: https://www.figma.com/community/file/1688850201209755442/matita-icons-freehand-pencil-icon-set