Create and edit simple SVG icons with path tools, fill/stroke controls, and optimized SVG code export.
This editor makes simple icons as SVG markup: you sketch with path tools on a square canvas, tune fill and stroke settings, and copy a self-contained svg element from the export pane. Because the drawing is stored as path data inside a viewBox, the export scales cleanly at any size, which is the point of icon work. The surprise is that the deliverable is code, not an image: whatever color you chose is written into the markup, so a fixed hex fill will not adapt to dark and light UI unless you export with currentColor.
A concrete input and expected output from the current implementation.
Input
Draw a check mark with the pen tool: click at (6,12), (10,16), (18,8) on a 24x24 canvas, set stroke to currentColor, width 2, round caps and joins, and fill to none.
Expected output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12l4 4l8-8"/></svg>
The three clicks become the path commands M6 12, l4 4 and l8 -8, which end at (10,16) and (18,8), tracing the check mark's two strokes. The wrapper repeats the 24x24 viewBox and the stroke settings you chose; fill none with stroke currentColor is what makes the icon follow the surrounding text color once pasted.
The pen tool records anchor points as you click, and the editor serializes them into a path d attribute using SVG's command syntax: M moves to a point, L draws a line, C draws a curve, Z closes the shape. You edit the outline by moving points on the canvas, and the path string updates to match - the same string that goes into the export.
The export pane emits one svg element: the viewBox that matches the canvas, the path data you drew, and the paint attributes you set. 'Optimized' means the editor's working state - grid, guides, selection, undo history - is excluded, so the markup contains only what a page needs to render the icon. Paste it into HTML directly, or wrap it for CSS usage like a mask image.
Set the stroke or fill to currentColor rather than a hex value. The icon then renders in the CSS color inherited by the svg element, so it adapts to light or dark UI without re-exporting. A hex value is permanent: it will not change when the page theme does, which is why icon sets use currentColor.
Two reasons. Thin strokes dominate: at small sizes a 1-unit stroke is less than a pixel, and fine gaps fill in. And details that were legible at canvas zoom get lost. Redraw with the target size in mind - thicker strokes, round joins, simpler geometry - or preview the export at actual size in the browser before using it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.