How to Build a Themeable Icon System
A themeable icon system separates semantic choice from visual treatment. Components ask for an icon meaning, while the active theme controls colour, weight, and sometimes the style family.
Start with semantic names
Use stable IDs such as ui-search or ui-settings instead of names that describe only one visual drawing. This lets a theme change appearance without changing product intent.
Use currentColor and CSS variables
SVGs that use currentColor inherit the surrounding text colour. Define semantic variables such as --icon-color-muted and --icon-color-action, then update those variables for light, dark, or branded themes.
Keep style selection at the theme boundary
A theme can map the same ID to outline, solid, or coloured output. Moeicons supports this model with shared IDs across style groups, so components remain stable while the visual system evolves.