A working indicator as a chip — glyph, label, elapsed time — and the three ways to make the glyph move: the mask class as one shape, the icon's own layers read from the installed source, and a glyph drawn for the motion the set never had.
Six states a working agent might report. Each glyph is one of the three techniques below, and every clock is a real one — the leaf that ticks is the only thing that re-renders.
Exactly how the rest of the app renders an icon: icon-[solar--…] is a CSS mask. Put a transform or an opacity loop on the element and any of the set's icons moves — zero source, zero parsing. The limit is the same fact: a mask is one shape, so nothing inside it can move on its own.
refresh-linear · spin
settings-linear · steps(8) — a gear that clicks
snowflake-linear · scale + rotate
radar-2-linear · opacity
bell-linear · rotate, damped
The source is already here: @iconify-json/solar/icons.json. Read on the server, the icon becomes one <path> per layer, and one layer can carry an animation while the others hold. The bold-duotone style is the seam that makes this reliable — it is literally two sheets at different opacities. The linear style is not: its stroke was converted to a filled outline, so refresh-linear is one path of 19 fragments, and splitting them gives geometry rather than parts.
settings-bold-duotone · gear body (l0, .5) spins, centre dot holds
same glyph · gear steps in detents
radar-2-bold-duotone · dish (l0, .5) pulses, arcs hold
layers-bold-duotone · four sheets lift in sequence
snowflake-bold-duotone · outer arms (l1, .5) breathe, core holds
When the motion IS the meaning — a needle sweeping, arrows arriving, a head running round a ring — no static icon contains it, and no amount of source helps. Author the glyph on the same 24-unit grid, in currentColor, with the accent on --primary, and it sits beside Solar without looking imported.
Scanning · needle sweeps, ring pings outward
Retrieving · three heads arrive, the dot catches
Arranging · one bright head runs the ring
Prioritizing · the highlight walks the stack
Pick by what has to move, not by how good the result should look — all three run at 60fps on the compositor.
| What moves | Use | Costs |
|---|---|---|
| The whole glyph — spin, pulse, breathe, wobble | A · the mask class you already write | Nothing. Any of the 7,000 icons, one class. |
| One part of the icon, the rest still | B · inline from icons.json, bold-duotone only | A server read and ~300 bytes of path per icon. Duotone gives two seams; other styles give none. |
| Motion the icon never had — a sweep, an arrival, a sequence | C · author a 24-unit SVG | Design time. Draw in currentColor on the Solar grid so it does not read as foreign. |