A pencil icon on graph paper usually means someone took a stock set and ran it through a sketch filter. Matita works the other way round. Two hundred glyphs are drawn by code from a short list of drafting primitives, so every line overshoots its end the way a real pencil does, and a given name draws the same way on every machine.
What Matita does
Matita is an icon library with 200 glyphs on a 24 unit grid. Strokes sit at 1.6 and take their color from currentColor, so an icon inherits the text color of whatever sits around it. One npm package carries five delivery formats, and the list further down shows which one fits your project.
Names are plain kebab-case: arrow-right, trash-2, circle-check. You guess the name, you get the icon. That matters more than it sounds once you have scrolled a gallery hunting for a shape you could describe in two words.
Installation is one command, and the React entry point asks for React 17 or newer as a peer:
npm i @matita/iconsimport { ArrowRight } from "@matita/icons/react"<ArrowRight size={20} />
The code lives on GitHub under an MIT license. The browsable gallery with search sits at matita.dev, where you can filter the set and copy a glyph before you install anything.
Why hand-drawn beats a sketch filter
The specimen labels the three details that carry the whole style. Box corners cross and leave short tails. A horizontal rule runs past the frame on both sides. Even a short tick for a calendar binding overshoots at both ends.
A sketch filter takes a clean vector and adds wobble on top. The result reads as drawn, yet the original geometry stays underneath, so a set assembled from three sources still carries three different line systems. The filter roughs up the edges and leaves the mismatch in place.
Matita starts from the stroke. Every glyph is a short program over drafting primitives: a line, a polyline, a closed shape, a rect, a circle, an ellipse, an arc, a curve and a dot. The looseness lives in those primitives rather than in a filter painted on afterwards, which is why two icons from opposite ends of the set still feel drawn by one hand.
☞ The drawing is computed from those numbers, so the same name yields the same shape on every build. The matita.dev tool exposes a seed with a Redraw button: change it and the glyph comes back in a different hand, while the definition and the name stay put.
What ships in the package
The browser tool at matita.dev does the searching for you. Type a concept and the grid filters as you go. Size and stroke width sit on sliders above the grid. The right panel switches between React, JavaScript and plain SVG and shows the import path with a snippet you copy in one click.
The same set is shipped in five shapes, for whatever your project already consumes:
- ❶ React components from
@matita/icons/react, one module per glyph, so a bundler drops what you do not import - ❷ Raw SVG at
@matita/icons/icons/<name>.svg, for Figma, Vue, Svelte or plain HTML - ❸ One sprite sheet for projects that reference icons by
<use> - ❹ A UMD build on jsDelivr with
data-sketch-iconattributes for pages with no build step - ❺
icons.json, which lists every name, plus atoSvghelper that returns an SVG string
There are helper exports too: SketchIcon renders any glyph by name, and SketchIconProvider sets a default size and stroke width once for the whole tree instead of repeating it on every icon.
How deterministic drawing works
Every glyph is described in one file, src/defs.js, as a list of primitives on a 24 unit grid. A build step turns that list into every format from the list above. Nobody edits a finished path by hand, so the whole set can be regenerated from the definitions at any time.
The contribution rules are tight on purpose. Two to five primitives per glyph, everything inside the 1 to 23 range, no fills, short descriptive names. The cap keeps every glyph sparse, which pays off at toolbar sizes where an extra line turns into noise.
☛ Determinism is the quiet feature here. A hand-edited SVG set drifts the moment three people add icons in three sessions. This one is much harder to break, because the drawing is computed from definitions and the test suite checks the output.
The pencil variant and its paper grain
Every glyph ships twice. The standard version is a clean stroke with a pencil cadence. The pencil version draws each stroke as two or three loose pencil lines and adds paper grain, so it looks like a sketch on a notepad rather than a vector outline.
You switch by adding one prop. SketchIcon accepts pencil, and the raw files sit in @matita/icons/pencil/<name>.svg. When you reference those files yourself, import @matita/icons/pencil.css so the grain lands properly.
Grain is texture, and texture costs markup. Save the pencil variant for empty states and onboarding screens, where the icon sits above 32px and the double stroke is visible. Keep the standard variant for toolbars and dense tables, where a 16px icon has no room to show a second line.
Getting icons into Figma and code
Designers get a community file on Figma plus the raw SVGs, so a glyph can be dropped onto an artboard and resized without a plugin. Engineers get the matching React component or the same SVG path. One name works on both sides, which removes the usual review comment about a shipped icon that differs from the file.
Styling stays yours. Size comes from a prop or plain width and height. Color follows currentColor, and the provider sets stroke width for the whole tree. Nothing is locked to a theme, so the set follows your tokens instead of asking you to match its own.
For accessibility, inline SVG needs a decision per icon. A decorative glyph next to a label should carry aria-hidden, while a lone icon button needs an accessible name. The W3C images tutorial spells out the cases, and it applies to the labels you wrap around these icons too.
Frequently asked questions
Can I use Matita in commercial work?
Yes. The set is MIT licensed, so you can ship it in paid products and modify the glyphs freely. The license asks you to keep its notice in the source code, and nothing has to appear in your interface.
Does it work without React?
It does. The SVG files render anywhere, and the sprite works with a plain <use> tag. On a static page the UMD build from jsDelivr replaces data-sketch-icon placeholders. The toSvg helper covers server side rendering and build scripts.
What is the difference between the two variants?
The standard glyph is one clean stroke with pencil character. The pencil glyph draws each stroke as two or three loose lines and adds paper grain. Use the pencil variant above 32px and the standard one in dense UI.
Can I add my own icon to the set?
Yes. Add a definition in src/defs.js, keep it to two to five primitives inside the 1 to 23 grid with no fills, then run npm run build and npm test. The build regenerates every output format, so your glyph gets the React component and the SVG file automatically.
Why it belongs in your stack
Most interfaces need an icon set long before they need a design system, and the usual choice is between a huge library that looks like every other product and a folder of mismatched downloads. Matita sits in the middle. It has 200 glyphs drawn by one engine, with a look that reads as sketched without turning your toolbar into a cartoon.
For a designer, the pencil style is a fast way to make a product feel human, especially on an empty state or a landing block. For a builder shipping with an AI assistant, the set is plain SVG and typed React with guessable names, so the model can write the import from the icon name alone.
It pairs with the rest of the reading here. The RuneIcons set covers the clean line school when you need neutral shapes, and the guide to design systems for business covers how icons fit into a component library. If you want a full open source base around them, LiftKit for Figma and React is a good place to start.
To see where a sketched icon earns its place, browse real screens in the AI inspiration gallery. When the screens around those icons need to hold up too, the other free resources and design and code kits are built for the same fast, solo workflow.
.webp)
