Lea Verou proposes treating icons as CSS design tokens: custom properties assign them to pseudo-elements, where SVG masks render them without adding markup. Components can then select or override an icon based on state, theme, or context, while keeping definitions centralized in the design system.
There are trade-offs: masking mainly suits monochrome icons, URLs and registered properties behave inconsistently across browsers, and Safari needs workarounds. The post explains these constraints and introduces @nudeui/icons, a package that brings the system together.
Lea VerouFound via Frontend Focus
