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 <!-- publish the Figma update to 260 icons before posting -->.
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.
