# CSS : gérer les icônes comme des tokens de design

Source canonique : [CSS : gérer les icônes comme des tokens de design](<https://sebastien.rigaux.be/veille/liens/css-gerer-les-icones-comme-des-tokens-de-design>)

Lea Verou propose de traiter les icônes comme des **design tokens CSS** : des propriétés personnalisées les associent aux pseudo-éléments, et des masques SVG les affichent sans ajouter de balisage. Les composants peuvent ainsi choisir ou remplacer une icône selon l’état, le thème ou le contexte, tout en centralisant les définitions dans le design system.

La technique a ses limites : le masquage convient surtout aux icônes monochromes, les URL et propriétés enregistrées ne se comportent pas de façon uniforme selon les navigateurs, et Safari nécessite des contournements. L’article détaille ces compromis et présente le package `@nudeui/icons` qui rassemble le système.

- Sélectionné le : 2026-10-22

- Publication de la ressource : 2026-10-11

- Mise à jour de la fiche : 2026-11-07T20:32:37+0000

- Format : Article

- Langue de la source : EN

- Crédit : Lea Verou

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

Ressource originale : [CSS : gérer les icônes comme des tokens de design](<https://lea.verou.me/blog/2026/icons/>)

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

Versions disponibles : [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>)

[Retour à la veille](<https://sebastien.rigaux.be/veille>)
