Every useful mark can wobble

Oddshape Icons

A growing cabinet of candid, hand-drawn symbols for designers who want the interface to feel made. Copy the CSS, remix the stroke, keep the imperfection.

Useful oddities

Signal
Spark
Jolt
Window
Home
Pause
Swap
§
Clause
Token
Card
Command
Gem
Delta
Focus
Orbit
Dusk
Dawn
Hill
Drift
Wave
Bright
Cloud
Target
Current

Circles & slashes

Orbit 01
Orbit 02
Orbit 03
Orbit 04
Orbit 05
Orbit 06
Cut 01
Cut 02
Cut 03
Cut 04
Cut 05
Cut 06
Ring 01
Ring 02
Ring 03
Ring 04
Ring 05
Ring 06

Lines, loosely

Thread 01
Thread 02
Thread 03
Thread 04
Thread 05
Thread 06
Wiggle 01
Wiggle 02
Wiggle 03
Wiggle 04
Wiggle 05
Wiggle 06
Rope 01
Rope 02
Rope 03
Rope 04
Rope 05
Rope 06
Trace 01
Trace 02
Trace 03
Trace 04
Trace 05
Trace 06

Arrows with intent

Down 01
Down 02
Down 03
Down 04
Down 05
Down 06
Turn 01
Turn 02
Turn 03
Turn 04
Turn 05
Turn 06
Drop 01
Drop 02
Drop 03
Drop 04
Drop 05
Drop 06

Corners, not quite square

Corner 01
Corner 02
Corner 03
Corner 04
Corner 05
Corner 06
Corner 07
Corner 08
Corner 09
Corner 10
Corner 11
Corner 12

How to use

In your code

Copy any mark’s class into your project, then tune the custom properties to match your own stroke and color.

<span class="oddshape oddshape-orbit" aria-hidden="true"></span>

In your mockups

Use the set as a compositional prompt: repeat a line, rotate an orbit, or give an important action one imperfect edge.

Terms

Personal and commercial work are welcome. Attribution is appreciated. Reselling the raw library is not.