Iconic

A Material icon is a 24dp square with 2dp of padding, drawn to a set of keylines, in one of three styles: Outlined, Rounded or Sharp. Google delivers each icon as a single filled path on a 960-unit grid. Illustrator and Figma can draw all of that, but they don't know any of it. I kept the specs in my head and fixed the exports by hand.

Exports were the worst part. An icon built from strokes, overlapping shapes and white shapes faking holes looks right on the canvas, then shifts or fills in when it's opened somewhere else. I wanted to draw an icon once and get Google's format out, identical to what I drew.

I also wanted it on my phone. Ideas don't wait until I'm at my desk.

The first version was a plain drawing tool with shapes, layers, a pen and PNG export, and it was live on GitHub Pages within the first hour. Having a real app at a real URL meant every decision after that could be judged by using it, on the PC and on the phone.

Then I set the direction in a few sentences. The interface should feel like Figma, because that's where I design. The keyboard should work like Illustrator, because that's where my hands already know the shortcuts: V, A, P, Ctrl+D to transform again, Alt-drag to duplicate. Nothing new to learn.

• check_circleFast over pure. I asked whether to build it in Rust. The answer was that the quicker path was TypeScript plus Google's own geometry engine, Skia, compiled to WebAssembly. I took the quick way and kept the option open.
• check_circleAsk before changing. When I noticed differences between Iconic's files and what Illustrator and Figma showed, I asked for an explanation before any code changed. That conversation became the export plan below.
• check_circleReview by screenshot. I used each build and sent screenshots of anything off: a cramped size row, missing space above a label, style icons drawn at different weights. Each one was fixed and pushed in minutes.

New artboards are 24dp with whole-pixel snapping. The keyline template shows the padding, live area and circle, square, portrait and landscape shapes. One choice sets Outlined, Rounded or Sharp, and that sets line ends, corners and corner radius across the icon. Names follow Google's snake_case, and files export as arrow_back_24dp.svg, the way Material Symbols names them.

Not every icon I draw is a Material icon, so all of it sits behind one Material mode switch. Turn it off and the Material options and keylines disappear, the size presets change to 16 through 64, and file names drop the dp suffix.

Icons are mostly shapes combined with other shapes. In most tools, merging two shapes is permanent: once the hole is cut, the shape that cut it is gone. Iconic's Union, Subtract, Intersect and Exclude make a live group instead. The shapes inside stay editable, the result redraws as they move, and the operation can be switched or released at any time.

The math runs on Skia PathOps, the path engine inside Chrome and Android, compiled to WebAssembly. Iconic doesn't approximate Google's geometry, it runs Google's code.

The export discrepancies I'd seen came from three things: strokes that each app outlines differently, overlapping shapes that aren't merged, and white shapes pretending to be holes. Iconic's Google-format export removes all three. Strokes are outlined, every shape is merged, and the icon is clipped to its artboard. The result is one filled path on the 960-unit grid. The working file stays fully editable.

I asked whether merging everything into one path could ever change how an icon looks. It can, so Iconic checks. Before a single-path export it renders the working icon and the merged path and compares them pixel by pixel. It also warns about multiple colors and art outside the artboard, and turns white fake holes into a real Subtract in one click.

• check_circleFormats: SVG, Android Vector Drawable, PNG at every Android density (zipped into drawable folders), and an icon font.
• check_circleMerged preview (Ctrl+Y) shows every icon as it will export, while you keep editing the shapes.

A lot of Material icons are one base icon with a small badge in the corner: file plus, file minus, folder check, image close. The idea came from a YouTube video about building modifier icons. Iconic makes them a system instead of a pile of copies.

• check_circleComponents. Any artboard, or any selection of shapes, can become a component. Linked copies follow every edit to the original.
• check_circleBadges with a knockout gap. Plus, minus, check, close, alert, up and down, bare or in a circle, sized for the 24dp grid. Each badge cuts a gap that follows its exact shape out of the icon beneath. The gap is live on the canvas and exact in the single-path export.
• check_circleMake variants. Pick base icons and badges, and Iconic builds every combination as linked artboards with Material names like file_add and folder_remove_circle.

Type designers have spent decades on the same problems icon designers have: smooth curves, clean points and a family that holds together across weights. I asked which FontLab 8 features would help with icons, picked eight from the list, and built them all.

• check_circleTunni lines. A dashed line joins each curve's two handles. Drag it to make the curve fuller or flatter, or double-click to even out the handles.
• check_circlePower Nudge. Moving a point keeps the neighboring curves in proportion instead of flattening them.
• check_circleSmart Corners. Round any sharp corner of any path, and it stays one editable point.
• check_circleAudit. Flags nearly straight curves, missing extreme points, tiny segments, points off the pixel grid and points that do nothing, each with a Fix button.
• check_circleIcon font export. OTF and WOFF files where typing an icon's name, like home, shows the icon.

Material Symbols come in weights from 100 to 700. Drawing each one by hand is slow, and the weights drift apart. Variable fonts solve this with masters: draw the icon at two weights and generate everything in between.

Iconic does the same. Add a bold master, make the copy bolder, and Iconic checks that the two match point for point. If one has an extra point, it names the shape and the counts. A slider previews any weight, and Generate weights creates the in-between artboards with names like calendar_today_wght300.

Iconic is a Progressive Web App. Open it in a browser and install it from Chrome or Edge, or add it to the home screen on an iPhone or Android phone. It runs like a native app, works offline, and saves as you go.

On a phone the panels fold away behind toolbar buttons, the canvas takes the screen, and pinch zoom, touch and stylus all work. It's light, too: no server and no account, and the font library only loads when you export a font.

Each feature was tested in a real browser with scripted mouse and keyboard input and measured results, not just a look at the screen.

• check_circleSmart Corners: a pen-drawn square rounded to R 2 matched a 2px rounded rectangle exactly.
• check_circleAudit: a deliberately messy path got 10 flags, and Fix all cleared every one.
• check_circleIcon font: the generated WOFF loaded in the browser and drew every icon by name, holes included.

Testing also caught the bugs. Typing file_add drew the plain file icon because the shorter name matched first, so the font now matches longer names first. The pixel check found badges exporting in the wrong color, so badges now take the icon's color.

I built Iconic with Claude in one long session. I made the product calls: who it's for, what it should feel like, which features earn a place and what each one must and mustn't do. Claude wrote the code, ran it in a browser and pushed each feature to the live app as its own commit, so I was always reviewing the real thing.

The most useful habit was asking questions before asking for features. What makes a good interface font? (Iconic now uses Roboto Flex.) Is it still open source? What does a license actually cover? (It's now GPL v3.) Is it resource heavy? Will it work on an iPhone? The answers shaped the product as much as the feature requests did.

The first version went live within an hour. Everything below shipped to the same URL afterward.

New features

• new_releasesFigma-style interface with Illustrator keyboard shortcuts.
• new_releasesArtboards, grid controls and the Material specialization: keylines, styles, sizes and naming.
• new_releasesSmart guides that snap to edges, centers and anchor points.
• new_releasesLive boolean groups and Google-format single-path export with a pixel check.
• new_releasesA styled color picker with a Material palette and eyedropper.
• new_releasesComponents, badges with knockout gaps, and the variant generator.
• new_releasesA Material mode switch for general icon work.
• new_releasesType-design tools: Tunni lines, Power Nudge, Smart Corners, Audit, Overview, Elements, icon font export and weight masters.

Improvements

• auto_fix_highRoboto Flex as the interface font, bundled so it works offline.
• auto_fix_highThe view stays centered on what you're working on when the window resizes, instead of cropping.
• auto_fix_highStyle, line-end and corner choices became icons, with every style icon at the same stroke weight.
• auto_fix_highMaterial options move next to their switch and hide when Material mode is off.
• auto_fix_highThe installed app shows updates right away instead of waiting for the next visit.

Fixes

• buildThe icon size row was cramped, and label rows were missing space above them.
• buildHoles cut with Subtract filled back in when exported.
• buildThe Design panel didn't refresh after clicking a switch.
• buildBadges exported in the wrong color, and the icon font matched short names before longer ones.