The Iconic logo

Iconic shipped with a quick blue triangle and dot on a dark tile. It filled the slot but said nothing about the app. My brief was one line: black and white, a circle and a square, dotted like they're being edited. That's the moment Iconic lives in, a shape selected and mid-change.

I designed it the same way I built the app: in conversation with Claude. I gave short directions, Claude edited the SVG by hand, checked it in a browser, and shipped each version to the live app.

• check_circleShort calls, fast loops. Directions like "solid circle", "right angles" and "centered" each became a live version within a minute.
• check_circleEvery version is a commit. All fifteen are in the app's history, so the morph above uses the real files.
• check_circleCompare before choosing. For the bigger choices I asked for side-by-sides at real sizes, from 16 to 128px, on light and dark.

The first draft was a dashed square and a dashed circle with selection handles on the corners, exactly as asked. It read as "editing", but too busy. I took it apart one call at a time:

• check_circleSolid circle. One shape finished, one still being edited.
• check_circleNo handles. The dashes alone say "selected".
• check_circleThinner dashes, right-angle corners. Round dots looked soft. Sharp L-shaped corners look like a selection box.
• check_circleCorners lead. Corner arms longer than the dashes between them, so the square holds its shape. That meant drawing each piece by hand, since a repeating dash pattern can't vary lengths.

v1 is about details you feel more than see.

• check_circleReverse on overlap. Where the square passes under the circle, its dashes turn black, so the whole square still reads.
• check_circleOptically equal. A circle looks smaller than a square of the same width, so the circle grew until they matched by eye.
• check_circleNo two-tone dashes. I moved the circle so its edge crosses the square in the middle of a gap, and every dash is all white or all black.
• check_circleSafe on every phone. The mark sits at 86% so Android's circle crop only trims background.

v1 looked right on a home screen and fell apart in a browser tab. At 16px a thin dash is less than a pixel, so it blurs to grey.

• check_circleA separate small icon. A bolder tab icon that fills the tile, with thicker dashes and fewer of them.
• check_circleDrop what can't be seen. The reversed corner was one blurry pixel, so it went.
• check_circleThen drop the dashes. They still read as noise, so the square became solid grey under a white circle. That became v2, at every size.

With the shape settled, I asked whether a shadow or a gradient would make it pop.

• check_circleShadows didn't make it. They only showed at large sizes, and my own site has a no-shadows rule. Flat fits the brand.
• check_circleNo 45° angles. Diagonal gradients and shadows felt dated, so everything runs straight across, like my site header.
• check_circleAll four colors was too much. My header gradient (teal, blue, peach, coral) works because it slides and you only see two at a time. Packed into one icon it got busy.
• check_circleNo animated tab icon. Chrome, Edge and Safari only show the first frame, so it stays still.

The version I loved was a moment from the animated header: dark orange fading to light orange. v3 uses just that, coral to peach, with a faded white square and a white circle. It ties Iconic to my site and documents without the noise of all four colors.

The black-and-white v2 stays as the lo-fi logo, and it's the mark in Iconic's toolbar, where it sits on the dark bar without a tile.

Since v3 launched, the icon set filled out for every platform, and the toolbar mark got a moment of motion.

New features

• new_releasesA one-time logo intro: the toolbar mark sweeps the brand gradient on launch, then settles to mono.

Improvements

• auto_fix_highPNG icons for iPhone and a full-bleed maskable icon for Android.
• auto_fix_highA stronger square in the tab icon so it reads at 16px.

Tried and taken back out

• undoSelection handles on the square's corners.
• undoRound dots and a rounded square.
• undoA black gap ring around the circle, replaced by reversed dashes.
• undoDashes and the reversed corner at small sizes.
• undoDrop shadows, long shadows and 45° gradients.