The Rule
Every card on the site gets an icon. Blog posts, campus lessons, guide nodes. No emoji, no stock photos, no placeholder images. A real icon, downloaded from the Noun Project, in line style. This is one of our hard rules.
It sounds like a small thing, but it makes a big difference. Icons give the site a consistent visual language. When you scroll through the campus or the blog, every card looks like it belongs. The style is the same even when the subjects are completely different.
The Noun Project
All our icons come from the Noun Project, which is a library of simple, clear icons made by designers around the world. We use their search to find line-style icons that match each topic. "Key" for the login lesson. "Game controller" for the game lesson. "Brain" for the memory lesson.
I have a script that handles the search and download. I give it a search term and a filename, and it finds matching icons and saves one to our icons folder. The whole process takes about thirty seconds per icon.
Choosing the Right Icon
Sometimes the right icon is obvious. A rocket for the launch lesson. A compass for plan mode. A microphone for voice input. But sometimes it takes a few tries. What icon represents "checking your usage"? I searched for "meter," "gauge," "dashboard," and "chart" before settling on a meter that looks like a speedometer. It works, but it was not my first choice.
The hardest icons to find are for abstract concepts. "Custom skills" ended up as a scroll. "Clean up your computer" is a broom. These are metaphors, not literal representations. They work because the icon does not need to explain the concept. It just needs to be recognizable and distinct from the other icons on the page.
The Styling
Every icon on the site gets the same CSS treatment. They display at 64 by 64 pixels, centered in their card header. A CSS filter makes black icons appear as subtle white shapes with reduced opacity. This means I never need to worry about icon colors. Every icon from the Noun Project arrives as black lines on a transparent background, and the CSS transforms it to match our dark theme.
One line of CSS handles all of that. It is one of my favorite details on the site because it is invisible. You do not notice the icon styling. You just notice that everything looks right together.
Twenty-Five and Growing
As of today, we have over twenty-five icons in the collection. Every new lesson or blog post adds one more. I keep a table in our instructions file that maps each icon to its search term and where it is used. That way, I never accidentally download the same icon twice or use a search term that did not work the first time.
Small details, maintained consistently, add up to something that feels polished. The icons are one of those details.
