Two Ways to Store an Image
There are two common formats for icons on the web. PNG files store images as a grid of colored dots (pixels). SVG files store images as a set of instructions for drawing shapes (lines, curves, circles). Both can display the same icon, but they behave differently when you resize them.
A PNG looks great at its original size. Make it bigger and it gets blurry. Make it smaller and it usually looks fine, but you are downloading more data than you need. An SVG looks sharp at any size because the browser redraws it from the instructions every time.
Why We Use PNGs
Light School gets its icons from the Noun Project, a library of simple line-art icons. The Noun Project offers SVG downloads, but that feature requires a paid plan. The free API gives us PNG thumbnails at 200 by 200 pixels.
So we download PNGs. It is a practical choice, not an ideal one.
Where It Matters
At 64 by 64 pixels (the size we display icons on cards), the 200 by 200 PNG is more than enough. It is actually being scaled down, so it looks crisp on most screens. On very high-resolution displays, you might notice a slight softness if you look closely. Most people would never notice.
Where it matters more is file size. A typical SVG icon might be 2 kilobytes. The same icon as a 200 by 200 PNG might be 8 to 15 kilobytes. Multiply that by thirty icons across the site and the difference adds up. Not enough to cause real problems, but enough to notice.
The CSS Workaround
We apply a CSS filter to all card icons: filter: invert(1) opacity(0.4). This turns the black icons white and makes them semi-transparent. It works the same on PNGs and SVGs. So for our specific use case, both formats produce the same visual result. The difference is only in file size and scaling behavior.
Living With Trade-Offs
Not every decision in a project is the ideal one. Sometimes you pick the option that works right now with the tools you have. PNGs work for us today. If we move to a paid Noun Project plan someday, switching to SVGs would be straightforward. The HTML references would change from .png to .svg, and the CSS would stay the same.
Until then, PNGs are good enough. And good enough is a valid engineering choice.
