Face mask icon
New Added in v0.4.0
A free pencil-style face mask icon, drawn by code from 1 closed shape, 2 lines and 2 curves. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use face-mask
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 { FaceMask } from '@matita/icons/react';
<FaceMask size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="face-mask" />JavaScript
import { FaceMask, toSvg } from '@matita/icons';
toSvg(FaceMask, { 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-face-mask" data-sketch="" aria-hidden="true"><path d="M5.62 7.62Q11.97 7.97 18.32 7.62Q17.84 11.34 17.83 15.08Q14.77 16.33 11.93 18.01Q9.02 16.36 6.01 14.9Q6.14 11.25 5.62 7.62Q6.32 7.61 7.01 7.62" stroke-width="1.808"/><path d="M8.06 10.37Q11.86 10.38 15.67 10.55" stroke-width="1.792"/><path d="M8.27 13.04Q12.11 13.25 15.95 12.97" stroke-width="1.424"/><path d="M5.59 8.39Q1.46 11.45 6.47 14.58" stroke-width="1.776"/><path d="M18.05 8.37Q22.44 11.49 17.91 14.4" stroke-width="1.648"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { FaceMask } from '@matita/icons/react';
<FaceMask size={32} pencil />The file is icons/face-mask.svg in the package (pencil/face-mask.svg for the pencil variant). Matita 0.4.0.
02How it's drawn
The recipe for face-mask
Face mask is not stored as a drawing. It is a recipe of 1 closed shape, 2 lines and 2 curves 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.
Z 5.5 7.5 18.5 7.5 18 15 12 18 6 15;
L 8.5 10.5 15.5 10.5;
L 8.5 13 15.5 13;
Q 5.5 8.5 1.5 11.5 6 14.5;
Q 18.5 8.5 22.5 11.5 18 14.5face-mask as a number: 436034615
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 face-mask. Seed 0 is the default.
face-mask from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/face-mask.svg.
True pixel sizes.