Percent icon
New Added in v0.4.0
A free pencil-style percent icon, drawn by code from 1 line and 2 circles. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use percent
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 { Percent } from '@matita/icons/react';
<Percent size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="percent" />JavaScript
import { Percent, toSvg } from '@matita/icons';
toSvg(Percent, { 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-percent" data-sketch="" aria-hidden="true"><path d="M19.25 4.43Q11.81 11.79 4.67 19.43" stroke-width="1.696"/><path d="M7.19 9.44C7.03 9.42 6.51 9.44 6.2 9.35C5.89 9.25 5.62 9.06 5.35 8.88C5.08 8.7 4.77 8.52 4.59 8.26C4.42 8.01 4.36 7.67 4.29 7.36C4.23 7.05 4.15 6.7 4.21 6.4C4.28 6.09 4.49 5.79 4.69 5.53C4.89 5.26 5.14 5.01 5.42 4.82C5.7 4.63 6.04 4.48 6.38 4.4C6.72 4.33 7.11 4.32 7.46 4.37C7.81 4.41 8.16 4.52 8.49 4.67C8.82 4.82 9.2 4.99 9.43 5.25C9.66 5.5 9.76 5.88 9.88 6.21C9.99 6.55 10.12 6.9 10.11 7.25C10.11 7.6 10.01 7.99 9.85 8.32C9.69 8.65 9.45 8.98 9.16 9.22C8.87 9.47 8.48 9.64 8.11 9.76C7.75 9.88 7.14 9.92 6.95 9.95" stroke-width="1.776"/><path d="M16.23 14.57C16.37 14.53 16.79 14.35 17.08 14.34C17.37 14.34 17.68 14.43 17.95 14.55C18.22 14.67 18.47 14.86 18.69 15.08C18.91 15.29 19.1 15.55 19.25 15.83C19.39 16.12 19.51 16.44 19.55 16.76C19.6 17.08 19.58 17.44 19.51 17.77C19.45 18.09 19.34 18.45 19.15 18.72C18.97 18.99 18.68 19.18 18.41 19.37C18.15 19.57 17.87 19.8 17.56 19.89C17.25 19.98 16.89 19.97 16.57 19.92C16.25 19.86 15.93 19.71 15.64 19.54C15.35 19.38 15.03 19.19 14.81 18.92C14.58 18.66 14.39 18.32 14.29 17.98C14.18 17.64 14.15 17.24 14.17 16.88C14.18 16.52 14.26 16.15 14.38 15.81C14.51 15.48 14.69 15.14 14.92 14.88C15.15 14.61 15.45 14.39 15.76 14.22C16.07 14.06 16.6 13.95 16.76 13.9" stroke-width="1.648"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Percent } from '@matita/icons/react';
<Percent size={32} pencil />The file is icons/percent.svg in the package (pencil/percent.svg for the pencil variant). Matita 0.4.0.
02How it's drawn
The recipe for percent
Percent is not stored as a drawing. It is a recipe of 1 line and 2 circles 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 19 5 5 19;
C 7 7 2.5;
C 17 17 2.5percent as a number: 1979316826
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 percent. Seed 0 is the default.
percent from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/percent.svg.
True pixel sizes.