Mixing outline and filled icons is misread as hierarchy
Aliases: outline filled mix · selected-state confusion · stroke versus solid
What it is
Park a hollow stroke next to a solid fill in the same navigation row and people routinely read the solid one as "here / on / more important", even when the product never said so. Outline and filled are not two tastes. They are two state grammars. Mixing them switches the grammar without announcing it, and hierarchy is misread.
Why it happens
Several platforms have trained "hollow = idle, solid = current" into a reflex: an empty house is the home entry, a filled house is you are on home. The visual system also logs filled area as higher salience. Together, a filled glyph collects "present tense" for free. In a row of four outlines and one solid, the solid need not glow or recolour to steal the "current" slot. The designer thinks they enriched the drawing; the user thinks they received a state signal. The misread happens before attention is allocated, too early for a label to catch it.
Studying it
Build three versions of the same row: all outline, all filled, mixed. Ask which item is the current location. Under the mix, people point to the solid glyph far more often, even with no selection colour. A second question — which looks like the primary action — uses the same contrast. The dependent is agreement on state, not preference. If the product really does use fill for selection, do not treat a mixed row as a neutral control; it is already a treatment.
Where it stops holding
- Fill-for-selected and outline-for-idle is a legal grammar if the whole set obeys it, and if none of the idle items sits filled all the time.
- A two-colour brand mark dropped into a toolbar often arrives filled; it will be read as current unless placement and size take it out of the state row.
- Uneven weight making one glyph "look bigger" is a different illusion. This failure is being read as state, even when the bounding boxes match.
Applying it
- One navigation, one action group: all outline or all filled. Carry selection with colour, a marker, or a paired filled variant — not with "this one happens to be solid".
- Restyle a solid import to the group's outline or fill before it ships.
- How to check: screenshot the nav, scramble which page is actually current, and ask someone who did not build the page to point at the current item. If they stably pick the solid glyph, the grammar has leaked.