DEVOURED
The Best Way to Use Icons in Web UIs
Lea Verou argues that storing icons as CSS custom-property design tokens and rendering them via masked pseudo-elements is the most efficient way to manage web icons.
What: Lea Verou explains a technique where icons are centralized as CSS custom properties rather than embedded as raw SVGs. This approach uses CSS masking to render icons, enabling consistent swapping and easier auditing of UI elements across a project.
Why it matters: By treating icons as design tokens rather than static assets, developers can enforce a single source of truth for their icon system, reducing technical debt and making it trivial to audit icon usage across large codebases.
Takeaway: If you are building a design system, update your iconography pipeline to map icon URLs to CSS variables instead of hard-coding them into your components.
Deep dive
- Icons are stored as design tokens in CSS custom properties.
- Masked pseudo-elements are used for rendering to handle sizing and color inheritence.
- This allows for theme-based icon swapping by just updating the variable value.
- One-off icons can be handled by directly assigning a URL to the property.
- Unregistered icons become visually distinct during code reviews because they lack the central registry structure.
- CSS variables allow for cleaner component code by abstracting the implementation details of the icon's file format or source.
Decoder
- Masking: A CSS property that allows developers to hide portions of an element, useful for applying complex shapes or gradients to SVG icons.
- Pseudo-element: A keyword added to a CSS selector (like ::before or ::after) that lets you style a specific part of the selected element.
Original article
Full article content is not available for inline reading.
Explore all 54 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi