Writing
Notes on icons, search and retrieval.
What we measured while drawing 3006 icons to one contract and making them findable from plain prose.
Inline, sprite or component: how to ship SVG icons
Four ways to deliver an SVG icon set, and the one property that decides between them. Includes what each costs in bytes, caching and colour control.
· 3 minShould icon search use embeddings or keywords?
Keywords answer fast and offline but fail on unfamiliar words. Embeddings catch meaning but cost a request. Run words first and vectors second.
· 3 minWhen an icon needs a label, and when it must not have one
An icon beside a word needs no name. An icon alone needs one. Getting this backwards makes a screen reader repeat itself, or leaves a button silent.
· 3 minMake an SVG icon follow your text colour with currentColor
One keyword removes the need for colour variants, dark mode icons and inline fill overrides. Here is how currentColor works and the three places it breaks.
· 4 minHow many keywords does an icon need?
Four keywords per icon makes a set searchable by synonym. Fifteen makes it searchable by sentence. Here is what to write, what to leave out, and how to measure it.
· 3 minWhat the 24 by 24 icon grid is actually for
The 24 unit grid is not a size. It is a shared coordinate space that makes stroke width, gaps and optical weight consistent across a whole icon set.
· 4 minCharge for the stage that costs you money
An icon API has four ways to answer a request and only one of them calls a model. Metering the request instead of the model call overcharges almost everybody.
· 3 minIcon naming conventions that survive a redesign
Name an icon for what it draws, not for where you first used it. Here is the rule, the three name types to avoid, and how to keep names stable as a product changes.
· 4 minWhy icon search returns the wrong icon
One icon with a long tag list can shadow every other icon in the set. Here are the four scoring faults that cause it, and the structural fix.
· 4 minThe stroke width that keeps an SVG icon legible at 16px
A 24px icon drawn with a 2 unit stroke stays readable down to 16px. Here is why that ratio works, and the four geometry rules that matter more than the number.
· 3 minHow to find an icon without knowing its name
Most icon libraries make you guess a file name. Prose search matches what you mean instead. Here is how it works and what to check before you adopt a set.