grid 0.5
100%
An icon editor for the 24 by 24 stroke icons that sit in interfaces: one and a half 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.
Six tools sit down the left edge, each with a single-letter shortcut printed on its own button. Line, Rect, Circle and Arc each draw a new shape from one drag, so the only difference between them is which one is held. Point adds a point to a line that already exists, and Select is what moves what is there. A drag that never grows past a grid unit draws nothing rather than leaving a shape of no size behind, which would be a path that renders as a dot and cannot be told apart from a broken tool.
Adding a point does not move the drawing. The command under the pointer is replaced by two that draw exactly the same curve, an exact construction rather than an approximation, so a point can be added anywhere without the shape drifting a little each time. On a straight segment the new point snaps to the grid, because every other way of placing a point here snaps. An arc is the one thing this refuses: splitting one exactly means re-deriving the ellipse and both of its flags, and doing it approximately would move the outline.
Every drawing command is its own colour on the canvas.The stroke you are editing is painted a command at a time, with a broken line down the middle of it marking the path the numbers describe — the line every point sits on and every drag moves to. Selecting one outlines it in the ink rather than tinting it, so the part you have hold of is marked by something that is not another colour in a picture that already has one per command. The size strip on the right is where the icon is seen as it really is, in one colour or in the one you chose.
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. Backspace deletes the point the focus is on, down to the two a path needs to draw anything at all.
Click a segment’s coloured band and the curve handles for that command appear, each tethered by a dashed line to the end it governs. Dragging one bends the curve without moving either end — the half of a Bézier its endpoints cannot reach, and until this existed the only way to change it was to type the numbers. A cubic carries two handles and a quadratic one; a smooth curve shows only the handle it really has, because its other control point is a reflection of the command before it and is not a number anyone can drag. Curve handles are drawn for the selected segment alone: a rounded rectangle has sixteen of them, and all at once they cover the icon they are meant to describe.
Icons here are drawn on twenty-four units by default. The Canvas control above the drawing moves one to 16, 20, 32 or 48, and the drawing and its stroke scale with it, so the icon looks identical afterwards and only the coordinate system changes. That is a different operation from Bigger and Smaller, which change what the icon is inside a canvas that stays the same size. Only a whole-number ratio lands back on the grid — twenty-four to forty-eight doubles exactly, twenty-four to thirty-two does not — so the status line counts the points that came off it and names Tidy as the fix rather than pretending the change was free.
The icons you have open are tabs across the top of the studio, and+ makes another. Each one is saved to this browser as you draw, so closing the page and coming back brings your work back rather than starting you over, and a first visit opens on an empty canvas rather than on somebody else's drawing. None of it leaves the machine: the page is served with connect-src 'none', so it structurally cannot send anything anywhere. Browser storage is not a backup, though — clearing site data removes it, and another computer has never seen it — so an icon worth keeping is still one to download.
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.
Drawing a shape a line at a time leaves it as a line's worth of paths each, which look like one shape and are not one. Joinin the Shapes list merges every pair of paths whose ends meet, and turns a path round when that is what makes them meet. It is offered only when it would do something, it changes nothing about what is drawn, and it is one undo. Paths that touch nothing are left exactly as they were, which is what makes it safe to press on a whole icon: the rule is a fact about the geometry rather than a guess at what you meant. A closed path has already joined its own ends, so it is left alone too.
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.
An icon is drawn in the colour of the text around it, which is whatcurrentColor buys and why this family is stroked rather than filled: it follows a dark theme and a hover state without anyone naming a colour. Colour and Gradient give that up in exchange for control, so they are a choice rather than the default, and the check panel says once what the choice costs. A gradient is defined inside the file it belongs to, so what you download is one document that needs nothing else.
The check panel reads the icon against the rules this family is drawn to, and every rule it applies is one you can derive rather than one you have to take on trust. A stroke is centred on its path, so a point closer to the edge than half the stroke width has its ink cut off by the canvas. A segment shorter than half the stroke is swallowed by its own round caps and reads as a dot. An arc with a radius of zero draws as a straight line. Each finding names the coordinate, and pressing it puts focus on that point so the arrow keys can move it.
Some of those rules read the points a path is written from, and some read what it actually draws, which is a different question. A curve can bulge past the edge of the canvas between two perfectly legal points, and only the second kind can see it. The same measurement answers three more: whether the ink keeps the one unit of clearance the dashed guide shows, whether two shapes come closer than one stroke width and so overlap into a single shape, and where the weight of the drawing sits. That last one is always a suggestion and never a problem, because plenty of icons lean to one side on purpose — an arrow pointing right is supposed to.
Name the icon and that name becomes the file you download and the component in every snippet. Open an SVG from disk and it is read the same way a paste is: only the paths and the stroke attributes are taken, everything else is dropped, and opening is one undo step, so opening the wrong file costs nothing. Download the SVG, or a 480-pixel PNG on a transparent background for the places that cannot take a vector.
Three snippet forms sit in the Code panel: the SVG itself, a React component, and the icon as data — a list of paths that drops into any factory that builds icons from one, without this studio having an opinion about which. All three are on the page whether or not scripts run. The data form is the paths alone, so whatever wraps the list decides the stroke width and the colour; the panel says which of your settings will not survive it rather than letting the snippet look right and render wrong.
The pointer’s position in icon units is shown under the drawing, which is what you want while aiming at a coordinate you have already decided on. The edge between the canvas and the panel on the right can be dragged, and moved with the arrow keys, so the drawing surface and the panels can be traded off against each other. The page follows your system’s light or dark setting and the crescent in the bar overrides it; the Dark background button inside the Preview panel is a different thing, changing only the ground the five samples are seen against.
None of those three touch the icon. They cost no undo step and reach no file, which is the line this editor draws everywhere: what you are looking at and what you are making are separate things, and only one of them gets downloaded.
No. The page sets a Content Security Policy of connect-src ‘none’, which means the browser itself refuses to open a network connection from it — not as a promise this code makes, but as a rule the browser enforces against it. Open your network panel and draw: after the page and its fonts have loaded, nothing else is requested. There is no account, no sign-in and no server to save to.
In this browser, and nowhere else. Every icon you open is a tab across the top of the studio, each one saved to your own browser storage as you draw, so a refresh brings back what you were working on rather than starting you over. None of it is sent anywhere: the page sets connect-src none, so it structurally cannot. Storage in a browser is not a backup, though — clearing site data removes it, and another machine has never seen it — so the way to keep an icon is still to download the SVG, which Open reads back exactly as it reads anything pasted into the source panel.
Twenty-four by twenty-four by default, at one and a half units of stroke with round caps and round joins, which is the family most interface icon sets are drawn in. You can move an icon to a 16, 20, 32 or 48 unit canvas from the Canvas control above the drawing, and the drawing and its stroke scale with it, so the icon looks identical and only the coordinate system changes.
Draw one. The Tools rail has Line, Rect, Circle and Arc, which each draw a new shape from a drag, plus Point for adding a point to a line you already have and Select for moving what is there. Every tool has a single-letter shortcut, shown on its own button.
Select the segment by clicking its coloured band, and the curve handles for that command appear, each tethered by a dashed line to the end it governs. Drag one and the curve bends without either end moving. A cubic has two handles, a quadratic one; a smooth curve shows only the handle it actually carries, because its other control point is a reflection of the previous command and is not a number anyone can drag.
Whether the icon follows the rules this family is drawn to, and every one of them is derivable rather than house folklore. Ink cut off by the canvas edge, or closer to it than the one unit of clearance the dashed guide shows. Two shapes whose strokes overlap because their centrelines are closer than one stroke width. Segments too short to read as anything but a dot. Points off the half-unit grid. Stroke settings away from the family’s. Each finding names a coordinate, and pressing one puts keyboard focus on that point.
That check measures where the weight of the ink sits, not where the bounding box is, and it is a suggestion rather than a problem for exactly this reason: plenty of icons are asymmetric on purpose. An arrow pointing right is meant to lean right. Read it as a question rather than an instruction.
Yes. Every point and every curve handle is a real focusable element, so Tab reaches them and the arrow keys move them, with Shift for the quarter-unit step. The tools, the transforms, the canvas size and the panel that resizes the inspector all work from the keyboard. Press ? for the list of shortcuts.
Press Join, above the Shapes list. It merges every pair of paths whose ends meet, turning one of them round where that is what makes them meet, and leaves alone any path that touches nothing — so it is safe to press on a whole icon rather than having to pick pairs by hand. What is drawn does not change, only how it is written, and it is one undo. A closed path has already joined its own ends, so it is skipped.
The SVG exactly as the source panel shows it, named after the icon, or a 480-pixel PNG on a transparent background for the places that cannot take a vector. The PNG is transparent on purpose: an icon sits on whatever is behind it, and a baked-in white square shows as a pale block the first time it meets a dark background.
Because a share link would have to carry the icon in the URL, and a URL is sent to the server and lands in its logs. That would quietly break the one claim this page makes. The file on your disk is the way to move an icon somewhere else.
Part of Jamuny: small, fast, local-first web tools. See also the whiteboard.