Molecule icon
New Added in v0.5.0
A free pencil-style molecule icon, drawn by code from 4 circles and 3 lines. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use molecule
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 { Molecule } from '@matita/icons/react';
<Molecule size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="molecule" />JavaScript
import { Molecule, toSvg } from '@matita/icons';
toSvg(Molecule, { 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-molecule" data-sketch="" aria-hidden="true"><path d="M9.72 12.91C9.69 12.75 9.49 12.27 9.49 11.94C9.48 11.61 9.58 11.25 9.69 10.94C9.81 10.63 9.97 10.31 10.18 10.07C10.4 9.82 10.67 9.6 10.96 9.45C11.24 9.3 11.58 9.19 11.9 9.16C12.22 9.14 12.55 9.23 12.87 9.32C13.19 9.42 13.56 9.52 13.83 9.73C14.09 9.95 14.32 10.29 14.48 10.61C14.64 10.94 14.75 11.32 14.79 11.69C14.83 12.06 14.81 12.46 14.73 12.83C14.65 13.19 14.5 13.56 14.31 13.89C14.12 14.22 13.88 14.58 13.57 14.8C13.27 15.02 12.87 15.12 12.5 15.19C12.13 15.26 11.72 15.31 11.35 15.24C10.98 15.16 10.62 14.95 10.28 14.74C9.95 14.53 9.56 14.3 9.33 13.97C9.1 13.64 8.97 12.96 8.9 12.76" stroke-width="1.648"/><path d="M4.27 8.6C4.19 8.51 3.89 8.26 3.76 8.05C3.63 7.84 3.56 7.58 3.5 7.33C3.44 7.08 3.39 6.8 3.42 6.54C3.45 6.28 3.54 6 3.68 5.77C3.81 5.54 4.02 5.32 4.24 5.17C4.46 5.01 4.73 4.9 4.99 4.82C5.26 4.75 5.55 4.68 5.82 4.71C6.1 4.73 6.4 4.81 6.65 4.95C6.9 5.08 7.14 5.29 7.32 5.51C7.5 5.74 7.64 6.01 7.74 6.29C7.84 6.57 7.93 6.88 7.93 7.18C7.94 7.48 7.88 7.81 7.75 8.09C7.63 8.37 7.43 8.64 7.2 8.85C6.98 9.06 6.7 9.24 6.42 9.36C6.14 9.49 5.82 9.57 5.5 9.6C5.18 9.62 4.83 9.62 4.52 9.52C4.21 9.42 3.79 9.09 3.65 9.01" stroke-width="1.664"/><path d="M16.78 7.89C16.74 7.77 16.59 7.42 16.56 7.17C16.53 6.92 16.56 6.65 16.6 6.39C16.64 6.13 16.67 5.82 16.81 5.6C16.94 5.38 17.17 5.21 17.39 5.05C17.6 4.89 17.84 4.72 18.09 4.65C18.35 4.58 18.64 4.58 18.91 4.62C19.17 4.66 19.45 4.77 19.69 4.91C19.93 5.06 20.15 5.26 20.33 5.49C20.51 5.71 20.69 5.99 20.78 6.27C20.88 6.55 20.91 6.88 20.9 7.19C20.9 7.5 20.85 7.84 20.75 8.13C20.64 8.43 20.48 8.74 20.27 8.97C20.06 9.21 19.78 9.4 19.5 9.54C19.22 9.69 18.9 9.82 18.58 9.85C18.26 9.88 17.91 9.84 17.6 9.74C17.28 9.65 16.95 9.49 16.69 9.27C16.43 9.05 16.21 8.74 16.04 8.43C15.87 8.12 15.74 7.58 15.68 7.41" stroke-width="1.776"/><path d="M13.59 21.18C13.5 21.28 13.29 21.6 13.09 21.76C12.89 21.91 12.63 22.05 12.39 22.09C12.14 22.14 11.86 22.1 11.61 22.05C11.36 21.99 11.11 21.9 10.88 21.77C10.66 21.64 10.41 21.49 10.24 21.29C10.08 21.09 9.96 20.81 9.89 20.55C9.82 20.3 9.81 20.01 9.83 19.74C9.85 19.46 9.88 19.16 10 18.91C10.11 18.66 10.3 18.41 10.51 18.22C10.72 18.02 10.97 17.85 11.24 17.74C11.51 17.64 11.83 17.6 12.12 17.6C12.41 17.61 12.72 17.68 12.99 17.79C13.26 17.9 13.55 18.07 13.75 18.28C13.96 18.5 14.09 18.79 14.21 19.07C14.34 19.34 14.49 19.64 14.51 19.94C14.53 20.24 14.44 20.58 14.34 20.87C14.24 21.16 13.96 21.55 13.89 21.69" stroke-width="1.76"/><path d="M9.98 10.65Q8.37 9.48 6.95 8.07" stroke-width="1.776"/><path d="M13.58 10.71Q15.26 9.4 16.97 8.13" stroke-width="1.712"/><path d="M11.93 14.31Q11.83 16.29 11.86 18.27" stroke-width="1.408"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { Molecule } from '@matita/icons/react';
<Molecule size={32} pencil />The file is icons/molecule.svg in the package (pencil/molecule.svg for the pencil variant). Matita 0.5.1.
02How it's drawn
The recipe for molecule
Molecule is not stored as a drawing. It is a recipe of 4 circles and 3 lines 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.
C 12 12 2.5;
C 5.5 7 2;
C 18.5 7 2;
C 12 20 2;
L 10 10.5 7.1 8.2;
L 14 10.5 16.9 8.2;
L 12 14.5 12 18molecule as a number: 3831159573
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 molecule. Seed 0 is the default.
molecule from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/molecule.svg.
True pixel sizes.