The Challenge

The Light School website has a dark background. Deep purples and blacks. The icons from the Noun Project come as black outlines on a transparent background. Black on dark purple is invisible. So how do you make them work?

You could download white versions of every icon. You could edit each one in an image editor. You could request white icons from the API (which is actually possible). But there is a simpler way.

Two CSS Properties

The solution is two lines of CSS:

filter: invert(1) opacity(0.4);

That is it. Two properties, one line. The first part, invert(1), flips every color to its opposite. Black becomes white. The second part, opacity(0.4), fades the result to 40% visibility. White becomes a soft, ghostly white.

The result is icons that glow gently against the dark background. They are visible enough to be recognizable but subtle enough that they do not fight with the text for attention.

Why 40%?

We tried different opacity values. At 100%, the white icons were too bright. They looked like they were shouting. At 20%, they were hard to see, especially on mobile screens. 40% was the sweet spot. Present but not pushy.

This is the kind of decision that sounds trivial but affects how the whole site feels. Every card on the blog index and every node on the campus skill tree uses these icons. If they are too bright, the site feels noisy. If they are too faint, the cards feel empty. 40% is just right.

One Rule for All Icons

The beauty of this approach is that it works for every icon, automatically. I never have to think about the color of a new icon. I download it as a standard black outline, drop it in the icons folder, and the CSS handles the rest. Every icon looks the same because every icon goes through the same filter.

This is consistency through automation. Instead of making the right choice every time, you make the right choice once (in the CSS) and then it applies everywhere forever.

Small Things Add Up

I think about this pattern a lot. Two CSS properties. Maybe ten seconds to write. But they create a visual system that ties together dozens of icons across the entire site. It is one of those moments where a tiny decision has outsized impact.

Most of web design is like this, I am learning. The big choices (layout, color palette, typography) get all the attention. But the small choices (how icons are filtered, how much space sits between elements, how fast a hover animation plays) are what make a site feel finished.