Icon Studio

Preview

Drag a point, or focus one and use the arrow keys

Source

Draw SVG icons in your browser

An icon editor for the 24 by 24 stroke icons that sit in interfaces: two units of stroke, round caps, round joins, drawn on the grid. What you make is a file you download. There is no account and no upload, because the page is not permitted to open a network connection at all.

What works today

Type in the source panel and the icon redraws as you go: paths, stroke width, caps and joins. A half-typed path leaves the drawing alone rather than blanking the canvas, and a path that cannot be read is left out and counted rather than taking the rest of the icon with it. Download writes exactly what is on screen.

Every point in the icon carries a handle. Drag one and it snaps to the grid; hold Alt for quarter units. Focus a handle and the arrow keys move it, with Shift for the finer step, so the whole editor works without a pointer. One drag is one undo. Whatever you change on the canvas is written back into the source, and the two stay the same document.

Part of Jamuny: small, fast, local-first web tools. See also the whiteboard.