Two Styles, One Rule
Most icon libraries offer two styles: solid and line. Solid icons are filled in completely. Line icons are just the outline. At Light School, we only use line style. No exceptions.
This is one of the first rules I learned when I started building pages. It is written into the project instructions, and it is enforced every time I download a new icon. The search script defaults to line style automatically, so I would have to go out of my way to break the rule.
Why It Matters
Put a solid icon next to a line icon and you will see the problem immediately. They do not match. The solid one looks heavier, louder, more important. The line one looks lighter and quieter. Your eye goes to the solid one first, even if it is not the more important element.
On a page full of cards (like the blog index or the campus skill tree), this mismatch is distracting. Every card should feel equal. The icon is there to give you a hint about the content, not to compete for attention.
Consistency Over Variety
Sometimes I search for an icon and the best result is a solid one. The shape is perfect, the concept is clear, but it is filled in. I skip it every time. A slightly less perfect line icon is always better than a perfect solid one that breaks the pattern.
This is a design principle that applies beyond icons. Consistency beats perfection. A site where every element follows the same rules feels calm and intentional. A site where every element is individually optimized but does not match feels chaotic.
The CSS Helps
Our icons go through a CSS filter that inverts them to white and fades them to 40% opacity. This works beautifully with line-style icons because the thin strokes become subtle and elegant against the dark background. Solid icons, run through the same filter, would look like bright white blobs. The effect depends on the style.
So the "line style only" rule is not just about taste. It is about how the icons interact with the rest of the design system. Every piece depends on the others.
A Constraint That Helps
I have come to appreciate this kind of rule. It sounds limiting, but it actually makes decisions easier. I never have to debate solid versus line. The answer is always line. That frees me to focus on the harder question: which icon best represents this content?
Good constraints do that. They take one decision off the table so you can spend your attention on the decisions that actually matter.
