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.

Seven buttons rewrite the whole icon: flip it across or down, turn it a quarter at a time, make it bigger or smaller, or tidy every number onto the half unit. A resize that would push a point past the edge of the canvas is refused rather than half applied, because a point out there is one you cannot drag back. Each transform is one undo.

Under the two panels the same icon is drawn at 16, 20, 24, 32 and 48 pixels, and at four stroke widths. A 320-pixel canvas flatters everything; 16 does not, and that is the size that tells you whether a shape is too crowded to read.

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