Performance

• One module per icon. Packages are side-effect free, so bundlers remove unimported icons.
• Pre-rendered markup. The rest pose ships as a string; nothing is computed before first paint, on the server or in the browser.
• Motion on demand. The runtime runs only during animation and stops when the icon settles. A moving icon is painted on its own layer, so adjacent icons are not repainted.
• Shared code. All icons import one small runtime and geometry kit, cached once by CDNs and browsers.
• CSS colours. Recolouring a page of icons is a single CSS change, without re-rendering.

Large icon sets

Each icon uses SVG filters for its shadow and highlight. For hundreds of icons, only the visible rows should be rendered, or the static SVG files used as <img>, which the browser rasterises once.

Dev servers