Day One Icons

One command turns a folder of SVGs into Day One's entire icon system ✳︎ fonts, Swift, Android, CSS, and docs from a single source of truth.

Day One Internal tooling Node.js CLI

Killing the icon bottleneck

Icon management across Day One's platforms was manual work. Every new icon meant hand-prepared assets for each client, with plenty of chances to drift apart along the way. Now adding an icon is dropping a 24px SVG into a folder and opening a pull request. The build flattens and optimizes the sources, generates the font in five formats, and emits a Swift package, Android constants, and CSS classes, so shipping the font means the code to use it already exists on every platform.

Codepoints that never move

The font library deals out fresh unicode codepoints on every build, which silently swaps glyphs in any client still running an older font. It accepts explicit codepoints as input though, so I built a persistence loop around it. Each build writes the full mapping to a JSON file, and the next build reads it back, prunes icons that no longer exist, and locks everything else in place. Only genuinely new icons get new codepoints. The whole icon lifecycle resolves sensibly. Updating an SVG keeps its codepoint, deletions free theirs, and renames are handled gracefully rather than corrupting the map. That stability across versions is what makes an icon font safe to ship at all.

Icons that don't break Figma components

Apple's Figma components use SF Symbols as text layers, since they come bundled with the SF Pro font. Swapping one for a Day One icon used to mean detaching the component, a one-way operation that cuts it off from future library updates. Because Day One Icons is a font too, the fix was a reference page where designers copy an icon as unicode and paste it straight into the text layer, keeping the component connected. A segmented control switches the copy format, unicode for replacing SF Symbols and SVG for everything else, and clicking any icon copies it.

The icon reference page with the download button and copy format control

The single source of truth

The set has grown past 400 icons, so the generated reference became a dedicated page on GitHub Pages, built for browsing at that scale. It checks which version of the font you have installed and prompts you when it's out of date. Releases are semver zips built by the same command that builds everything else. It's become the way icons ship at Day One, for designers and engineers both, and the manual asset pipeline is gone.

The reference page scrolled deep into the icon set