Case study · Personal product

Iconic

General design tools don't know Material's rules, so I designed and built Iconic, a vector editor made only for Google Material icons. It runs in the browser on PC and phone and exports the single-path format Google ships.

Client

My own icon work

Product

Vector editor (installable web app)

Role

Product design & build

Built with

Claude · Skia (WebAssembly)

Open Iconic View the code The logo story

Iconic in a desktop browser: a dark top toolbar, artboards and layers on the left, a canvas holding sixteen 24 by 24 icons, including file and folder icons with plus, minus, check and download badges, and the Design panel on the right showing the selected badge's gap, corner and style. — **A whole icon set on one canvas.** Six base icons, ten variants, and a plus badge cutting its own 1.5dp gap.

The problem

Material icons have rules general tools don't know

A Material icon is a 24dp square with 2dp padding, drawn to keylines in Outlined, Rounded or Sharp, and shipped as one filled path on a 960-unit grid. Illustrator and Figma can draw that but don't know it, so I fixed exports by hand: strokes, overlaps and white fake holes shifted or filled in elsewhere. I wanted to draw once and get Google's format out, on PC or phone.

Process

Live in an hour, shaped over 28 commits

I built Iconic with Claude in one day: I made the product calls, Claude wrote and tested the code, and each feature shipped to the live app as its own commit.

Ship first. A basic editor was live on GitHub Pages in hour one; I reviewed every build by using it.
Figma panels, Illustrator keys. V, A, P, Ctrl+D and Alt-drag work as expected, so nothing new to learn.
Fast over pure. TypeScript plus Google's Skia in WebAssembly instead of Rust, with that option kept open.
Questions before features. Asking first produced the export plan, Roboto Flex as the UI font and a GPL v3 license.

The first version of Iconic: a dark toolbar of tool, color and export buttons, one large 24 pixel canvas showing a person icon, and a simple layers list. — **First hour.** One canvas, a row of buttons, a list of layers.

The current Iconic with the All icons overview open: a grid of sixteen icon cards, each with its name, size and status chips such as Component and Linked, plus a search field. — **End of the day.** Figma-style panels, artboards and an overview of every icon's status.

Material mode

The specs are built in

Material rules are defaults in Iconic, not things to remember.

24dp artboards, whole-pixel snapping and a keyline template with padding, live area and base shapes.
One choice of Outlined, Rounded or Sharp sets line ends, corners and corner radius.
snake_case names, exported as arrow_back_24dp.svg the way Material Symbols names them.
A Material mode switch hides it all for other icon work: sizes 16 to 64, no dp suffix.

Booleans and badges

Combined shapes stay editable

Combining shapes never destroys them, so one base icon can carry a whole family of badges.

Live booleans. Union, Subtract, Intersect and Exclude stay editable, computed by Skia PathOps, Chrome and Android's path engine.
Components. Any artboard or selection becomes a component; linked copies follow every edit.
Knockout badges. Plus, minus, check, close, alert and arrows cut a shape-matched gap, exact in export.
Make variants. Pick bases and badges to generate every combination, named like file_add.

A file icon zoomed in on a pixel grid. The inner rectangle that cuts out the page is selected inside its Subtract group, with its position and size shown in the Design panel. — **The cut-out is still a shape.** Move or resize it inside its Subtract group and the outline updates live.

Swap the badge, tune the gap. The gap is cut from the file outline, not painted over in white.

Export

What you draw is what Google gets

Export outlines strokes, merges every shape and clips to the artboard, giving one filled path on the 960-unit grid while the working file stays editable.

Pixel check. The working icon and merged path are rendered and compared pixel by pixel before export.
Warnings. Flags extra colors and off-artboard art, and turns white fake holes into a real Subtract.
Merged preview (Ctrl+Y) shows every icon as it will export while you keep editing.
Formats: SVG, Android Vector Drawable, PNG at every Android density, and an OTF/WOFF icon font.

Borrowed from type design

Font tools, pointed at icons

Type designers solved smooth curves and consistent weights long ago, so I picked eight FontLab 8 features and built them for icons.

Tunni lines. Drag the dashed line between a curve's handles to make it fuller or flatter.
Power Nudge and Smart Corners. Points move without flattening curves; rounded corners stay one point.
Audit. Flags flat curves, missing extremes, tiny segments and off-grid points, each with a Fix button.
Weight masters. Draw a base and bold master, matched point for point, and generate weights 100 to 700.

A person icon zoomed in with the shoulder curve selected: blue anchor points and handles, and dashed pink Tunni lines joining the handle ends on each side. — **Tunni lines** (dashed pink) shape both handles of a curve at once.

The same curve after a careless edit: orange markers on three points and an Audit panel listing three points off the pixel grid, each with a Fix button, plus Fix all. — **Audit** marks problem points and fixes them one at a time or all at once.

Normal handles

Each handle is dragged on its own. The two lengths drift apart and the curve goes lopsided.

Tunni line

One drag on the dashed line moves both handles together, so the curve keeps its balance.

Normal handles vs. a Tunni line on Material icons. The percentages show each handle's length as a share of the distance to the Tunni point (the pink diamond), where the two handle directions meet.

The canvas with a calendar icon at its base weight, its bold 700 master and five generated weights from 100 to 600, next to the Weight panel showing Masters are compatible, a weight preview slider at 500, and weight chips for generating. — **Two masters, five generated weights.** A 2px stroke at 400 and 4px at 700 gave exactly 2.67px at 500.

PC and phone

One app, installed anywhere

Iconic is a Progressive Web App: install it from Chrome or Edge, or add it to an iPhone or Android home screen. It works offline and saves as you go. On a phone the panels fold behind toolbar buttons, and pinch zoom, touch and stylus all work. There's no server or account, and the font library loads only when you export a font.

Iconic on a phone: a compact dark toolbar with tool, layers, design, overview and Export buttons, and the canvas showing person, image, calendar, file and folder icons. — **On a phone,** layers and design panels open from the toolbar when you need them.

Testing

Every feature checked in a real browser

Each feature was tested with scripted mouse and keyboard input and measured results, and the tests caught real bugs.

Smart Corners: a pen-drawn square rounded to R 2 matched a 2px rounded rectangle exactly.
Audit: a deliberately messy path got 10 flags, and Fix all cleared every one.
Icon font: typing file_add drew the plain file, so longer names now match first.
Pixel check: it caught badges exporting in the wrong color; they now take the icon's color.

Revisions

What changed since launch

After the first-hour version, the biggest changes were the Figma-style interface, Material specs, live booleans with Google-format export, badges and the type-design tools.

All 17 changes

New features

Figma-style interface with Illustrator keyboard shortcuts.
Artboards, grid controls and Material keylines, styles, sizes and naming.
Smart guides that snap to edges, centers and anchor points.
Live boolean groups and Google-format single-path export with a pixel check.
A styled color picker with a Material palette and eyedropper.
Components, badges with knockout gaps, and the variant generator.
A Material mode switch for general icon work.
Tunni lines, Power Nudge, Smart Corners, Audit, Overview, Elements, icon font and weight masters.

Improvements

Roboto Flex as the interface font, bundled so it works offline.
The view stays centered on your work when the window resizes.
Style, line-end and corner choices became icons, all at one stroke weight.
Material options sit next to their switch and hide when it's off.
The installed app shows updates right away, not on the next visit.

Fixes

Cramped icon size row and missing space above label rows.
Holes cut with Subtract filled back in when exported.
The Design panel didn't refresh after clicking a switch.
Badges exported in the wrong color; the icon font matched short names first.

What's next

Things to improve

SVG import. Iconic exports cleanly to Figma and Illustrator but can't open their files yet, so import with round-trip tests would let me bring existing sets in.
Fill and optical-size axes. Weight is the only axis today, and the masters system could also cover Material Symbols' fill and optical size.
Cleaner generated weights. In-between weights land on fractional coordinates that Audit flags, so snapping during Generate would save a Fix all step.
More export targets. The font has no WOFF2 and there's no iOS asset export yet, and both would round out the developer handoff.
Real-device testing. Testing used scripted input in a desktop browser, so a pass on an iPhone and an Android tablet with a stylus would show where touch needs work.

Available for work