I Built a Docs & Playground Site for Switch Icons — Here's Why an Icon Library Isn't Done Until It Has One
When I shipped Switch Icons v0.2.0, the library itself was in good shape — 65 icons, a clean React API, published as @ihemehowell/switch-icons.
But something kept bugging me.
Nobody wants to npm install a package just to find out what's inside it.
If a developer has to open the GitHub repo, scroll through a folder of SVGs, or guess an icon's export name from a filename, you've already lost them. They'll reach for Lucide or Heroicons instead — not because those libraries are better, but because they're easier to browse.
So the next problem to solve wasn't more icons. It was discoverability.
The Real Product Is the Search Bar
An icon library's actual interface isn't the code — it's the moment a developer types "arrow" or "calendar" into a search box and instantly sees what's available.
That's what the new switch-icons-site is built around: a Vite + React playground where every icon is visible, searchable, and copy-pasteable in seconds.
The workflow I designed for:
Search or scroll to find the icon
Click to preview it at different sizes and colors
Copy the exact import statement
Paste it straight into your project
No digging through docs. No guessing prop names. No context-switching to a GitHub README.
Why a Playground Beats a README
A static list of icon names in a README technically documents the library. It just doesn't sell it.
A playground does three things a README can't:
Visual proof — you see the icon before you commit to using it
Live customization — tweak size/stroke/color and watch it update in real time
Copy-ready code — zero translation between "what I saw" and "what I paste"
This is the same lesson that shows up everywhere in dev tooling: the quality of the underlying thing matters less than how easy it is to evaluate the thing. Tailwind won partly because of the docs site. Radix won partly because of the interactive primitives page. An icon library lives or dies on how fast someone can answer "does this have the icon I need?"
What's Next
The site is close to done — polishing responsiveness and adding a few quality-of-life touches (keyboard navigation for search, one-click SVG export alongside the React component copy).
Once it's live, the plan is to fold it into the main Switch Icons docs so the package and the playground feel like one product instead of two separate things a developer has to piece together.
If you maintain a component or icon library and it doesn't have a place where people can see what they're installing before they install it — that's probably the highest-leverage thing to build next, more than the next 20 icons or components.
Building Switch Icons and a few other things in public. Feedback on the playground once it's live is very welcome.
