Matita icon
New Added in v0.6.0
A free pencil-style matita icon, drawn by code from 7 lines, 1 closed shape and 1 curve. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use matita
One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.
React
import { Matita } from '@matita/icons/react';
<Matita size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="matita" />JavaScript
import { Matita, toSvg } from '@matita/icons';
toSvg(Matita, { size: 24 }); // SVG stringSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-matita" data-sketch="" aria-hidden="true"><path d="M12.79 6.55Q15.39 8.86 17.78 11.38" stroke-width="1.68"/><path d="M13.88 5.28Q16.35 7.76 19.03 10.03" stroke-width="1.616"/><path d="M15.27 4.12Q17.72 6.55 20.34 8.81" stroke-width="1.744"/><path d="M4.06 18.29Q4.7 19.11 5.25 19.99" stroke-width="1.824"/><path d="M4.6 15.01Q10.02 9.1 15.98 3.76" stroke-width="1.68"/><path d="M6.86 17.06Q10.85 13.07 14.74 8.97" stroke-width="1.488"/><path d="M9.09 19.62Q14.73 13.97 20.45 8.39" stroke-width="1.664"/><path d="M3.47 20.35Q3.96 17.48 4.83 14.69Q7.09 16.86 9.27 19.1Q6.41 19.92 3.47 20.35Q3.66 19.63 3.82 18.9" stroke-width="1.392"/><path d="M15.97 3.9Q20.17 4.14 20.4 8.38" stroke-width="1.44"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Matita } from '@matita/icons/react';
<Matita size={32} pencil />The file is icons/matita.svg in the package (pencil/matita.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for matita
Matita is not stored as a drawing. It is a recipe of 7 lines, 1 closed shape and 1 curve on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.
L 13 6.75 17.5 11.25;
L 14.25 5.5 18.75 10;
L 15.5 4.25 20 8.75;
L 4.25 18.5 5.25 19.75;
L 4.75 14.75 15.5 4.25;
L 7.25 16.75 14.75 9.25;
L 9.25 19.25 20 8.75;
Z 3.5 20.5 4.75 14.75 9.25 19.25;
Q 16.25 4 20 4 20.25 8matita as a number: 1162710907
Shapes: L line, P polyline, Z closed shape, R rectangle, C circle, E ellipse, A arc, Q curve, O dot. Separate shapes with ;. Edits stay on this page.
03Takes, sizes, pencil
Same icon, every way
Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.
Five seeds of matita. Seed 0 is the default.
matita from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/matita.svg.
True pixel sizes.