I wanted icons that look drawn with a pencil: lines that run a little past their ends, box corners that cross, circles that don't quite close where they started. But I also wanted them to behave like a normal icon set: same grid, same stroke, currentColor, tree-shakable, and the exact same drawing on the server and in the browser.
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.
Top comments (0)