How these icons are drawn
The set reads as drawn rather than generated because it breaks the rules generated sets follow. These are the rules it follows instead.
The grid & the ink
Every icon lives on a 32×32 grid in a single ink weight (1.55 by default — the slider re-inks the whole set live). Round caps, round joins, no fills except two:
.fill— the soft yellow wash. Exactly one shape per icon. It sits under the strokes like a marker pass under a pen line..ink— solid marks, small only: eyes, seeds, dots. One to three per icon, most have none.
The wobble
The icons sit straight on the grid, but the drawing inside them doesn't: curves are deliberately asymmetric, stroke lengths vary, and nothing is mirrored perfectly. That wobble — not a rotation — is what makes the set read as drawn.
Three styles
Wash is the signature look: ink lines over one soft color pass (pick your own wash color with the swatch). Line drops the wash for a pure single-weight line icon. Filled turns the wash shape into a solid with the interior details knocked out — real transparency, not painted-on white — while outside strokes (rays, wheels, handles) stay inked.
Colour
Strokes inherit currentColor, so the whole set flips to dark mode with no extra work. The yellow is a wash, never a line and never text — #FFD100 on white measures 1.35:1, far below any accessibility floor.
Sizing
The drawings hold from 20px up. Below that the wobble that makes them charming makes them mud — use a simpler mark for favicons. They're happiest at 24–48px.
Using one in code
<svg viewBox="0 0 32 32" width="32" height="32"
fill="none" stroke="currentColor" stroke-width="1.55"
stroke-linecap="round" stroke-linejoin="round">
<!-- paste any icon's paths here -->
</svg>
Copy SVG on any card gives you a standalone file with the wash and ink colours baked in — drop it anywhere. PNG exports at 2× the preview size on a transparent background.
Adding your own
- Draw inside the 32×32 box, coordinates 2–30.
- One stroke weight. One
.fillwash. Keep it sitting straight. - No detail finer than ~1.5px — it renders at 20px.
- If it looks perfect, nudge it until it doesn't.
License
Free for personal and commercial use with the credit line intact. The Figma pack — every icon as organized components, plus the full SVG set — is the paid bundle that supports the series.