One icon, two backgrounds

Design

The obvious way to ship an icon set that works in light and dark is to draw it twice. Optical weight really does not survive an inversion, so the argument is a good one. We do not do it, and the reason is worth more than the icons are.

Kool ships 191 icons. Not one of them has a dark variant. There is no luminosity:dark appearance anywhere in the catalogue and no -dark file next to any source. What there is instead: 190 of the 191 are marked template-rendering-intent, which means the asset carries a shape and no colour at all. The colour arrives at the call site, from a token.

That token is Theme.textPrimary, which is 0x111827 in light and 0xF4F3FF in dark, and it is the only thing an icon is ever allowed to be. Not the accent. The accent is for labels and for the one element on a screen asking to be pressed; an icon that wears it is competing with the thing it sits next to. A glyph is white on dark and black on light, and that is the whole rule.

The rule is what makes the single master possible, and the single master is what makes the rule enforceable. Those are the same sentence read in either direction. If icons carried their own colour, every one of the 191 would be an independent opinion about what dark mode means, and the only way to find a wrong one would be to look at all of them. Because the colour comes from one token, changing what an icon is in dark mode is a single edit, and there is no way for an individual icon to disagree. You cannot draw a mistake we would have to hunt for.

One icon opts out, and it is the exception that shows the rule is real. brand-google is the single asset in the set with no template intent. Google's mark is four fixed brand colours, and tinting it monochrome would not be a style choice, it would be wrong. So it keeps its own colour and takes itself out of the system deliberately, in one place, where anybody can find it.

The general form: when you are about to double the size of an asset set to handle a variation, check whether the variation belongs to the asset at all. Ours belonged to the theme. The icons never needed to know which background they were on, and the moment they do not know, they cannot be wrong about it.

All posts