Burger icon
New Added in v0.6.0
A free pencil-style burger icon, drawn by code from 1 arc, 2 lines, 1 polyline and 3 dots. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use burger
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 { Burger } from '@matita/icons/react';
<Burger size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="burger" />JavaScript
import { Burger, toSvg } from '@matita/icons';
toSvg(Burger, { 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-burger" data-sketch="" aria-hidden="true"><path d="M3.45 12.32C3.52 11.72 3.52 9.84 3.86 8.68C4.19 7.53 4.68 6.28 5.45 5.39C6.22 4.49 7.38 3.8 8.47 3.32C9.56 2.85 10.82 2.55 12 2.54C13.18 2.54 14.49 2.79 15.54 3.29C16.6 3.8 17.57 4.66 18.35 5.56C19.13 6.45 19.89 7.54 20.21 8.66C20.53 9.78 20.24 11.68 20.25 12.28" stroke-width="1.456"/><path d="M3.11 11.05Q12.15 11.55 21.2 11.05" stroke-width="1.696"/><path d="M3.37 13.6C3.83 13.87 5.18 15.19 6.15 15.23C7.12 15.28 8.19 13.85 9.18 13.85C10.17 13.86 11.11 15.27 12.1 15.25C13.08 15.23 14.1 13.69 15.07 13.72C16.04 13.76 16.95 15.47 17.92 15.45C18.89 15.43 20.4 13.91 20.89 13.61" stroke-width="1.744"/><path d="M3.78 17.8Q12.16 18.13 20.55 17.7" stroke-width="1.424"/><path d="M3.82 19.46Q4.47 20.48 5 21.56Q12.08 20.93 19.18 21.32Q19.7 20.44 20.12 19.51" stroke-width="1.712"/><path d="M8.88 6.95l.01 0M12.58 5.77l.01 0M15.57 7.76l.01 0" stroke-width="2.48"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Burger } from '@matita/icons/react';
<Burger size={32} pencil />The file is icons/burger.svg in the package (pencil/burger.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for burger
Burger is not stored as a drawing. It is a recipe of 1 arc, 2 lines, 1 polyline and 3 dots 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 12 11 8.5 180 360;
L 3.5 11 20.5 11;
S 3.5 13.8 6 15.3 9 13.8 12 15.3 15 13.8 18 15.3 20.5 13.8;
L 4 17.8 20 17.8;
P 4 20 5 21.5 19 21.5 20 20;
O 9 6.8;
O 12.5 5.8;
O 15.5 7.8burger as a number: 3940979088
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 burger. Seed 0 is the default.
burger from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/burger.svg.
True pixel sizes.