Cell icon

New Added in v0.5.0

A free pencil-style cell icon, drawn by code from 2 circles, 1 arc and 4 dots. Use it as an SVG, a React component, or by name. MIT licensed.

cell

01Use it

Use cell

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

<Cell size={24} />

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

JavaScript

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

toSvg(Cell, { 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-cell" data-sketch="" aria-hidden="true"><path d="M15.82 3.87C16.33 4.2 18.13 4.96 18.91 5.85C19.7 6.75 20.18 8.05 20.53 9.23C20.88 10.42 21.13 11.73 21.03 12.95C20.92 14.17 20.5 15.48 19.9 16.54C19.3 17.6 18.38 18.53 17.43 19.3C16.49 20.07 15.38 20.88 14.23 21.17C13.08 21.46 11.75 21.25 10.55 21.04C9.36 20.83 8.07 20.55 7.05 19.91C6.04 19.27 5.15 18.23 4.47 17.2C3.79 16.17 3.22 14.94 2.97 13.73C2.71 12.51 2.71 11.12 2.95 9.88C3.19 8.65 3.72 7.37 4.42 6.3C5.12 5.24 6.06 4.16 7.13 3.48C8.19 2.8 9.56 2.4 10.82 2.23C12.09 2.06 13.49 2.11 14.72 2.46C15.96 2.8 17.26 3.46 18.22 4.31C19.18 5.16 20.12 7.03 20.5 7.57" stroke-width="1.696"/><path d="M13.11 15.14C12.89 15.17 12.24 15.36 11.8 15.35C11.36 15.34 10.9 15.23 10.49 15.08C10.07 14.92 9.64 14.71 9.29 14.42C8.95 14.13 8.62 13.74 8.43 13.34C8.25 12.93 8.18 12.45 8.17 11.99C8.16 11.54 8.18 11.03 8.36 10.62C8.55 10.21 8.93 9.86 9.27 9.55C9.61 9.23 9.98 8.94 10.4 8.72C10.82 8.49 11.31 8.23 11.79 8.19C12.26 8.14 12.8 8.31 13.26 8.47C13.72 8.63 14.18 8.85 14.56 9.14C14.94 9.44 15.27 9.82 15.52 10.23C15.77 10.63 15.98 11.11 16.06 11.58C16.13 12.05 16.1 12.59 15.97 13.05C15.83 13.51 15.56 13.97 15.25 14.35C14.94 14.74 14.54 15.06 14.11 15.34C13.68 15.62 12.93 15.89 12.69 16.01" stroke-width="1.584"/><path d="M18.19 13.4C18.05 13.77 17.76 14.98 17.33 15.63C16.9 16.28 16.26 16.86 15.61 17.3C14.96 17.74 13.78 18.1 13.41 18.26" stroke-width="1.52"/><path d="M6.7 8.62l.01 0M16.9 15.35l.01 0M16.5 7.31l.01 0M7.84 16.55l.01 0" stroke-width="2.48"/></svg>

Pencil variant

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

<Cell size={32} pencil />

The file is icons/cell.svg in the package (pencil/cell.svg for the pencil variant). Matita 0.5.1.

02How it's drawn

The recipe for cell

Cell is not stored as a drawing. It is a recipe of 2 circles, 1 arc and 4 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 · Recipe
C 12 12 9;
C 12 12 3.5;
A 12 12 6.5 20 70;
O 6.8 8.5;
O 17 15.5;
O 16.5 7.5;
O 8 16.5
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 cell. Seed 0 is the default.

wobble 0
wobble 0.25
wobble 0.5
wobble 0.75
wobble 1

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

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

True pixel sizes.

Ink
Pencil