matita-dev/icons

Freehand pencil icons

Summary

Matita icons is an MIT-licensed set of 173 hand-drawn SVG icons rendered in a freehand pencil style, where strokes overshoot corners and circles overlap like ruled graphite marks. Every glyph is generated deterministically from a name, so the same identifier always produces the same drawing. The library ships as plain SVG files plus React, vanilla JS, and HTML data-attribute integrations.

What it is useful for

This package is useful when an interface should feel sketched or personal rather than geometric: product mockups, design system documentation, indie or handcrafted-brand apps, and prototypes where flat icons feel too sterile. Stroke-based SVGs inherit text color via currentColor and accept custom stroke widths, so a single icon can be reused across light, dark, and themed surfaces without exporting recolored variants. A separate "pencil" variant adds uneven pressure, a faint second pass, and a graphite-grain effect through @matita/icons/pencil.css, useful for marketing pages, empty-state illustrations, or annotation-style UI.

How engineers can use it

The README documents four entry points. Install with npm i @matita/icons.

For React, import specific glyphs or use the generic component:

import { ArrowRight, SketchIcon, SketchIconProvider } from '@matita/icons/react';
<ArrowRight size={20} color="#2748F5" />
<SketchIconProvider size={24} strokeWidth={1.4}>…</SketchIconProvider>

For non-React projects, the package exports toSvg, which converts a glyph module into an SVG string:

import { Ruler, toSvg } from '@matita/icons';
toSvg(Ruler, { size: 24 });

For static pages or CMS output, a CDN script supports <i data-sketch-icon="ruler" data-size="24"></i> plus a one-line call to SketchIcons.replaceIcons(...). Raw assets are also available as SVG files under @matita/icons/icons/, @matita/icons/pencil/, and @matita/icons/sprite.svg, with the names index in @matita/icons/icons.json.

Adding new icons is constrained: glyphs are described with primitives (L, P, Z, R, C, E, A, Q, O) on a 24 grid, must stay inside coordinates 1–23, use 2–5 primitives, and use no fills. After editing src/defs.js, contributors run npm run build && npm test. The site at matita.dev is a separate project in site/ built from the published package.

A practical limitation: the set is intentionally small (173 glyphs) and stylistically opinionated, so teams needing a neutral family for a dense utility bar may want to pair Matita with a broader icon set rather than replace one outright. Browsing, searching, and copying names happens at matita.dev.