# CSS icons as design tokens, without extra markup

Canonical source : [CSS icons as design tokens, without extra markup](<https://sebastien.rigaux.be/en/tech-watch/links/css-icons-as-design-tokens-without-extra-markup>)

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.

- Selected on : 2026-10-22

- Resource publication : 2026-10-11

- Entry updated : 2026-11-07T20:32:37+0000

- Format : Article

- Source language : EN

- Credit : Lea Verou

- Found via : [Frontend Focus](<https://frontendfoc.us/>)

Original resource : [CSS icons as design tokens, without extra markup](<https://lea.verou.me/blog/2026/icons/>)

Tags : [CSS](<https://sebastien.rigaux.be/en/tech-watch/tags/css>) · [Design tokens](<https://sebastien.rigaux.be/en/tech-watch/tags/design-tokens>) · [Design Systems](<https://sebastien.rigaux.be/en/tech-watch/tags/design-systems>) · [SVG](<https://sebastien.rigaux.be/en/tech-watch/tags/svg>)

Available versions : [Français](<https://sebastien.rigaux.be/veille/liens/css-gerer-les-icones-comme-des-tokens-de-design>) · [English](<https://sebastien.rigaux.be/en/tech-watch/links/css-icons-as-design-tokens-without-extra-markup>)

[Back to tech watch](<https://sebastien.rigaux.be/en/tech-watch>)