Pizza slice icon

New Added in v0.6.0

A free pencil-style pizza slice icon, drawn by code from 1 polyline, 1 curve, 2 circles and 1 dot. Use it as an SVG, a React component, or by name. MIT licensed.

pizza-slice

01Use it

Use pizza-slice

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 { PizzaSlice } from '@matita/icons/react';

<PizzaSlice size={24} />

// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="pizza-slice" />

JavaScript

import { PizzaSlice, toSvg } from '@matita/icons';

toSvg(PizzaSlice, { size: 24 });   // SVG string

SVG

<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-pizza-slice" data-sketch="" aria-hidden="true"><path d="M3.14 6.39Q7.85 13.71 11.87 21.42Q16.07 14.06 20.58 6.87" stroke-width="1.456"/><path d="M3.49 7.05Q11.84 2.4 20.74 7.41" stroke-width="1.52"/><path d="M8.75 9.36C8.83 9.32 9.09 9.18 9.27 9.12C9.45 9.06 9.64 8.99 9.83 8.98C10.02 8.98 10.23 9.02 10.42 9.09C10.61 9.17 10.8 9.28 10.96 9.42C11.11 9.56 11.25 9.75 11.34 9.94C11.43 10.14 11.5 10.37 11.52 10.59C11.55 10.81 11.55 11.05 11.5 11.28C11.45 11.5 11.37 11.75 11.25 11.94C11.12 12.14 10.93 12.3 10.73 12.44C10.54 12.57 10.32 12.69 10.09 12.75C9.86 12.8 9.61 12.81 9.37 12.78C9.13 12.75 8.88 12.68 8.66 12.57C8.43 12.46 8.19 12.33 8.01 12.14C7.83 11.96 7.68 11.7 7.58 11.45C7.49 11.2 7.44 10.91 7.45 10.64C7.45 10.36 7.52 10.09 7.61 9.82C7.69 9.56 7.8 9.27 7.96 9.05C8.13 8.83 8.5 8.57 8.61 8.48" stroke-width="1.472"/><path d="M15.99 10.38C16.01 10.49 16.11 10.79 16.09 11C16.07 11.2 15.99 11.42 15.89 11.6C15.79 11.78 15.65 11.95 15.49 12.08C15.34 12.22 15.15 12.33 14.96 12.41C14.76 12.49 14.53 12.57 14.32 12.56C14.11 12.56 13.88 12.46 13.68 12.37C13.48 12.27 13.26 12.15 13.11 11.98C12.96 11.81 12.85 11.57 12.77 11.35C12.69 11.13 12.65 10.89 12.64 10.64C12.63 10.4 12.65 10.14 12.72 9.91C12.79 9.67 12.91 9.43 13.07 9.24C13.23 9.05 13.45 8.89 13.68 8.77C13.9 8.65 14.15 8.56 14.41 8.53C14.66 8.5 14.94 8.52 15.19 8.6C15.43 8.69 15.67 8.84 15.88 9.01C16.08 9.18 16.3 9.38 16.44 9.62C16.58 9.85 16.65 10.29 16.69 10.43" stroke-width="1.744"/><path d="M12.17 15.99l.01 0" stroke-width="2.48"/></svg>

Pencil variant

import '@matita/icons/pencil.css';
import { PizzaSlice } from '@matita/icons/react';

<PizzaSlice size={32} pencil />

The file is icons/pizza-slice.svg in the package (pencil/pizza-slice.svg for the pencil variant). Matita 0.6.0.

02How it's drawn

The recipe for pizza-slice

Pizza slice is not stored as a drawing. It is a recipe of 1 polyline, 1 curve, 2 circles and 1 dot 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 · Recipe
P 3.5 7 12 21.5 20.5 7;
Q 3.5 7 12 2.5 20.5 7;
C 9.7 10.7 1.6;
C 14.5 10.7 1.6;
O 12 16
B · Plotted
C · Drawn
How it works

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.

seed 0
seed 1
seed 2
seed 3
seed 4

Five seeds of pizza-slice. Seed 0 is the default.

wobble 0
wobble 0.25
wobble 0.5
wobble 0.75
wobble 1

pizza-slice from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/pizza-slice.svg.

16 px
20 px
24 px
32 px
48 px
96 px

True pixel sizes.

Ink
Pencil