DEV Community: Matita

Matita 0.4.0: 60 new icons, and one number from sketchy to exact

Matita — Fri, 23 Oct 2026 20:02:25 +0000

Matita is a set of pencil-style icons for the web, drawn by code. Lines run a little past their ends, box corners cross, circles overlap where the pen closes. 0.4.0 is out today: 60 new icons (200 to 260) and a new setting called wobble that goes from the full sketchy hand all the way down to exact shapes.

If you haven't seen it, the first post explains the engine: [LINK to the first dev.to article]. The short version is that every icon is a line of plotted shapes, and a small deterministic engine adds the pencil habits, so the same name always draws the same way. This post is about what changed.

60 new icons, mostly what people asked for

When I posted the set, the most concrete request in the comments was a medical and science set. So that is the biggest group: 22 icons.

stethoscope, syringe, pill, test-tube, microscope, thermometer, heart-pulse, medical-cross, bandage, radiation, x-ray, dna, atom, brain, tooth, bone, ambulance, hospital-bed, mars, venus, face-mask, pipette.

The other 38 fill everyday gaps: people and files (user-check, file-check, folder-plus, mail-open), tools, devices and places (wrench, hammer, plug, keyboard, cpu, store, car, plane), and things you reach for all the time (timer, calculator, receipt, qr-code, trophy, percent, shuffle, repeat).

Every glyph still goes through the same checks: a contact sheet at 96 px and at 24 px, a bounds check with the stroke included, and a lint. That caught real things. A fingerprint read as wifi at 24 px, so it is not in the set. Six of the new icons (brain, x-ray, microscope, pipette, wrench, car) were drawn twice because the first version did not read: the first brain looked like a butterfly, so it is now a top view with two hemispheres; the first car could have been a bus, so it has a sloped roof and bigger windows now.

Not in this release: Greek letters, a lab coat and a surgeon. I couldn't draw them clearly at 24 px yet. If you need them, say which ones.

Wobble: one number, from sketchy to exact

The part I wanted most is the setting. The sketchy default is the point of the set, but there are places where you want the same icon calmer, or exactly straight.

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

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

)

Plain JavaScript works too, and so do your own glyphs:

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

toSvg(drawIcon('calendar', { wobble: 0 }), { size: 24 });

How it works

Every habit of the pencil in the engine already had an amount: how far a line overshoots its end, how much it bows, how much a point jitters, how far a ring overlaps. Wobble multiplies those amounts:

const K = wobble, S = v => K === 1 ? v : v * K;
const j = a => (r() * 2 - 1) * a * K;          // jitter
const e1 = S(ov) * (.45 + r() * .9);           // overshoot

Two things follow from that. First, at wobble = 1 every expression multiplies by nothing, so the default draws exactly what 0.3.0 drew. I checked it with a hash over 200 glyphs at 6 seeds before and after the change: identical. Second, the random numbers come from the same stream whatever the wobble is, so 0.5 is the same drawing as 1, just calmer, not a different one. Sliding the number looks like one icon relaxing instead of flickering between takes.

At wobble = 0 the engine takes a different path: it stops sketching and draws the shapes as they are plotted. True lines, circles and ellipses as two arcs, arcs, curves, and closed shapes with square corners. There is no jitter left, so an exact icon does not depend on the seed.

Exact icons are also small. An average exact SVG is about 0.47 KB raw (0.26 KB gzipped), against about 0.82 KB (0.45 KB) for the sketchy one. There are ready-made files for all 260 at @matita/icons/exact/<name>.svg, so you can use them without running any code. The pencil variant also works over exact shapes.

Try the slider on matita.dev: there is a Wobble slider and a Perfect button next to the seed, and the copy snippets follow.

Also new on the site

matita.dev/changelog/ says when each icon arrived, and the icon browser shows an "Added in" label with a New badge on the latest ones.
matita.dev/roadmap/ is the public list of what is shipped, what is being built and what is next. Targets move.
matita.dev/llms.txt and matita.dev/icons.json list every icon with the version it arrived in, so an assistant (or a script) can check that a name exists instead of guessing.

Using it

npm i @matita/icons

React components, plain SVG files, a script tag, a sprite and the Figma file are all there. It is MIT, free for personal and commercial projects, no signup. The Figma file is at https://www.figma.com/community/file/1688850201209755442 .

What's next

On the roadmap: search by meaning (type "delete", find the bin) targeted for November, and more science glyphs for December depending on requests. If an icon you need is missing, open an icon request. New glyphs are a line of shapes each, so they're quick to add, and 0.4.0 is mostly proof of that: 60 of them came from one list.

Hand-drawn icons that draw the same every time

Matita — Tue, 06 Oct 2026 11:51:43 +0000

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.

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