The Pencil Icons · hand-authored wobble, no live filter, still fully CSS-recolorable and CSS-scalable
Foundations
The editorial companion to living-styleguide-icons-app.html. Same mechanism — currentColor for color, a bare viewBox for size — but drawn in the register of the hand-drawn illustration system instead of the app set's ruler-straight geometry. The wobble is baked into the coordinates, not a live SVG filter — the illustration system's pencilJit filter can't take currentColor, so a reusable, recolorable icon needed a different way to look hand-drawn.
The illustration system's wobble is a live SVG filter, and a live filter operates on rendered pixels after color is already fixed — it can't take currentColor, so it can't be recolored by CSS at all. It also doesn't scale identically across every browser. The fix: bake one deliberately bowed curve into each icon's own path data instead. Same organic feel, permanently vector, fully recolorable.
the short leg of this check is a Q curve, not a straight line
The technique
One bowed curve per icon
A quadratic Bezier control point offset ~1.5-2 units from the straight-line path.
Applied once per icon, always the same segment type (never every line) — a hand-drawn wobble on everything reads as broken, not organic.
Same shield, five sizes, one CSS property. No filter means nothing here behaves any differently at scale than plain vector math — the same guarantee the app set has.
14px
20px
28px
40px
64px
Scale
14px to 64px, one source
Identical guarantee to the app set — this is a vector path, not a filter effect.
The stroke weight (2.2) and the padding rules in job 05 do the work of staying legible small — the CSS just asks for a size.
02
Color, live
Pencil-gray is the working default, but nothing locks the set to it. Same star, no source edits, recolored purely through CSS.
pencil
stamp
teal
coral
Recolor
Pencil-gray is a default, not a lock
The narrow illustration palette still governs full compositions (stamp, stickmen); a single reused icon has more freedom.
03
The ten icons — drag to resize
Chosen for what a marketing or lead page actually needs: proof (check), a call to action (arrow), contact (mail), social proof (chat, star), trust (shield), results (chart), ideas (bulb), and announcements (spark).
check
28px
arrow
28px
mail
28px
chat
28px
calendar
28px
shield
28px
chart
28px
star
28px
bulb
28px
spark
28px
04
On a lead page
Same ten symbols as job 03 — only the surrounding CSS differs. Buttons here use Fraunces, not Inter, and stamp-red as the primary CTA color, matching this system's editorial register rather than the app set's UI register.
Trusted by 400+ teamsNew this week
05
Construction rules — for the next icon
Same 24-unit grid as the app set on purpose — the two families align when they sit near each other on a page.
01
24x24 viewBox, shared with the app set.Not a separate grid — the two families should line up when they appear together.
02
Stroke-width 2.2, a hair heavier than the app set's 2.Pencil reads slightly softer and thicker; still crisp enough to hold at 14px.
03
One bowed (Q) segment per icon is the default, not a hard cap.A wobble on every line usually reads as a rendering error rather than a hand — but chart is a deliberate exception, curved on every segment on purpose for a more visibly sketched trend line.
04
No live SVG filters, ever, in this set.See job 00 — a filter can't take currentColor and doesn't scale predictably.
05
No hardcoded fill colors, including paper.The illustration system's paper-punched circles only work anchored to one fixed background. A portable icon can't assume what it's sitting on.
Where this set stops: a foundation for lead-page work, not a full marketing icon library. Add an eleventh icon only when a real page needs one it doesn't already have among these ten or the app set's ten.
Created for you, with ❤️ by Robert Evans· The AI Design Architect