This started as a quick documentation chore. I wanted every icon on this site collected in a Figma file, so I finally had one place to see the whole set. Then I started counting.

Six x’s, three command symbols, two suns, two moons, two search magnifiers, two hearts, etc. None of this happened on purpose. It happened the way it always happens: moving fast and neglecting to properly reuse code.

Every icon on this site now belongs to one of three families: social marks, hand-drawn gear marks, or utility icons imported straight from lucide-react. Nothing is redrawn, nothing is inlined, and the docs are generated from the same components that ship.

Three families

The reset was driven by one rule: an icon must belong to one of the three families.

Social

Gear marks

Utility

Social marks¹ are the brand glyphs in the footer and on the About page. They are the services’ canonical shapes, optically balanced as a set, and they stay hand-tuned because brand marks are not interchangeable with stroke icons.

Gear marks are the category illustrations on the Gear page. I drew these by hand with house rules: a 64 unit grid, geometry only, and red appears exactly once per mark on a key portion of the object or scene.

Utility icons are everything else: search, close, chevrons, like, etc. Every one of them is now a lucide component, imported and rendered at whatever size its context needs.

What actually changed

The interesting part is how many “custom” icons turned out to be near-copies of lucide with drift. For example, my close buttons were lucide’s x at three sizes and two stroke widths. Once you see it the choice is easy: either the icon is genuinely custom and earns its place in a family, or it converges back to the library it was imitating.

Every way this site said “close”

LightboxMobile table of contentsCollection “sold”Mobile menu closeSearch paletteNewly perfected

Custom icons overlaid on lucide icons

Header searchTheme sun

One ⌘ path across three files

KeycapDesign systemDesign details

A few swaps are visible if you know where to look. My favorite tasteful update is on the Collection page. The “wanted” status was a ring of twelve dots I drew, and now it is lucide’s dashed circle.

One item earned an exception: the hamburger button is an animation, not an icon. Two horizontal bars rotate into an x, so the same elements morph between states. A static x cannot accomplish this, so it remains custom and gets documented as a component instead.

Documentation that cannot lie

The part I care most about: the two places on this site that describe the icon system now render from the same source. The Design System page shows its specimens from the same lucide imports the product uses, and the demo above uses live components. The Figma file is an upcoming hurdle because keeping it up to date is currently a manual task. Ideally it is driven by code.

Lastly, I now know exactly how many icons this site has: 38. Trust me. I counted.

Footnotes

1. The naming split is deliberate. A mark is something drawn to represent a thing: a brand, a category, an identity. An icon is functional vocabulary: it closes, it searches, it pages. Marks earn hand-tuning because they carry meaning that an existing library cannot supply. Icons earn a library because consistency is the whole job. Whenever I caught myself hand-drawing an icon, that was the tell it belonged to lucide all along. ↩