Menu

1 / 6

Why I drew my own icons for a doodle app

DEV Community: frontend·Nikhil Kumar Swain·2 days ago
#y4oVUvgH
#devtofrontend#devto#dev#icons#every
Reading 0:00
15s threshold

I built Zketch for doodling, and doodles don't follow straight lines. Yet every button around its canvas was drawn with a ruler: dead-straight edges, compass-perfect arcs, corners that meet at exact angles. Replacing them took me from a pile of uneven sketches to 143 brush-drawn icons whose small imperfections are the whole point, and then to zicons, a set anyone can use.

Figure 1. A handful of the 143 zicons icons: one pen, one line, a little wobble.

A doodle app with ruler-straight buttons

Zketch is a drawing app that runs in the browser. You open it, pick a brush and scribble. For a long time, the buttons around that scribbling came from Lucide, a popular open-source icon set, plus a few extra SVGs I added in the same style so they'd match. The undo arrow, for example, used the path from Feather, the set Lucide grew out of: a perfect arc with a radius of exactly 9, ending in an arrowhead bent at a right angle. Everything matched, and that was the problem.

There's nothing wrong with Lucide or Feather.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.