Peanut icon
New Added in v0.6.0
A free pencil-style peanut icon, drawn by code from 2 arcs and 8 curves. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use peanut
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 { Peanut } from '@matita/icons/react';
<Peanut size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="peanut" />JavaScript
import { Peanut, toSvg } from '@matita/icons';
toSvg(Peanut, { 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-peanut" data-sketch="" aria-hidden="true"><path d="M13.63 15.45C13.56 15.8 13.51 16.97 13.2 17.6C12.89 18.23 12.33 18.81 11.78 19.23C11.23 19.66 10.55 19.97 9.89 20.15C9.23 20.32 8.5 20.39 7.82 20.3C7.15 20.22 6.41 20.01 5.84 19.64C5.27 19.28 4.83 18.69 4.42 18.12C4.01 17.55 3.54 16.9 3.39 16.22C3.25 15.54 3.34 14.7 3.56 14.02C3.78 13.35 4.23 12.69 4.71 12.17C5.19 11.65 5.81 11.17 6.45 10.91C7.09 10.66 8.2 10.67 8.55 10.62" stroke-width="1.536"/><path d="M10.5 8.85C10.58 8.49 10.72 7.41 10.96 6.73C11.21 6.05 11.46 5.25 11.95 4.75C12.45 4.25 13.24 3.91 13.93 3.73C14.63 3.55 15.39 3.6 16.1 3.68C16.81 3.77 17.57 3.9 18.19 4.25C18.81 4.6 19.45 5.16 19.82 5.76C20.19 6.37 20.34 7.17 20.42 7.89C20.49 8.6 20.45 9.38 20.24 10.06C20.03 10.74 19.64 11.42 19.16 11.96C18.68 12.5 18.04 13.03 17.37 13.3C16.7 13.57 15.52 13.52 15.15 13.57" stroke-width="1.392"/><path d="M8.06 10.72Q10.08 10.14 10.75 8" stroke-width="1.568"/><path d="M13.6 16.11Q13.72 13.98 16.21 13.51" stroke-width="1.568"/><path d="M6.14 15.4Q5.49 13.44 7.04 13.26" stroke-width="1.472"/><path d="M13.83 7.05Q13.96 5.37 15.15 5.48" stroke-width="1.744"/><path d="M12.27 10.81Q12.66 9.03 13.56 9.5" stroke-width="1.584"/><path d="M10.19 16.62Q9.51 18.14 8.42 17.78" stroke-width="1.776"/><path d="M11.76 13.06Q11.55 14.01 10.38 13.89" stroke-width="1.504"/><path d="M18.32 7.68Q18.47 9.42 17.15 9.62" stroke-width="1.536"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Peanut } from '@matita/icons/react';
<Peanut size={32} pencil />The file is icons/peanut.svg in the package (pencil/peanut.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for peanut
Peanut is not stored as a drawing. It is a recipe of 2 arcs and 8 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.
A 8.5 15.5 5 5 265;
A 15.5 8.5 5 185 445;
Q 8.06 10.5 10.2 10.2 10.5 8.06;
Q 13.5 15.9 13.8 13.8 15.94 13.48;
Q 6 15 5.5 13.5 6.5 13.5;
Q 14 6.5 14 5.5 15 5.5;
Q 12.5 10.5 12.5 9 13.5 9.5;
Q 10 17 9.5 18 8.5 18;
Q 11.5 13.5 11.5 14 10.5 14;
Q 18.5 8 18.5 9.5 17.5 9.5peanut as a number: 2396876944
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 peanut. Seed 0 is the default.
peanut from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/peanut.svg.
True pixel sizes.