Loading…
Loading sprite…
10 glyphs · static
Premiumshapes · line · static · light
Scribbles & Arrows
Ten hand-drawn marks: single and double underlines, a circled ring, curved, straight and looping arrows, a zigzag, a cross-out, a translucent highlighter sweep and a squiggle. Each path has a little jitter baked in so it reads as marker, not geometry.
The grid
Strokes at 3 units on a 100×100 box, round caps; control points are jittered by ±1.5 units and smoothed, so every mark is wobbly but deliberate. `stroke` for the body, `accent` for the marks that emphasise (underline, circle, arrow heads, cross-out, highlighter).
How to use it
From sprite to icons in your project.
- 01Look at the grid
Every glyph of the pack, drawn to one grid in one style. Hover one to see its animation when the pack has one.
- 02Recolour it
The colour roles are CSS variables the sprite reads. Swatches and pickers set them live; the prompt carries your values.
- 03Pick your stack
A snippet with the sprite inline, or a typed icon component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt, or one glyph
The prompt ships the whole sprite verbatim with the mounting rules. Click a glyph to copy it as a standalone SVG.
- 05Download the sprite
One .svg file, every glyph a <symbol>. Inline it once, reference by id.
