Iconographie

Epaisseurs de trait, tailles de grille et conventions de nommage.

Sources d'icônes

Le design system consomme deux bibliothèques open-source (ADR-022). Chaque surface utilise exactement une bibliothèque primaire ; drapeaux et marques multicolores sont des classes de separate.

Phosphor — Admin-UI

242 icônes canoniques (233 Figma Admin-UI + 9 EXTRAS selon ADR-022-amend-01, dont 25 alias Figma). Installez @phosphor-icons/react, importez par icône, enveloppez avec le composant PhosphorIcon.

Vuesax — Storefront

660 noms canoniques (748 calques Figma ; 88 marques/crypto exclus en attente d’ADR). Importez les SVG depuis vuesax-icons et enveloppez avec le composant VuesaxIcon.

Drapeaux — region-flags

Les drapeaux sont des symboles nationaux, pas des icônes UI. Source unique : le package npm region-flags (google/region-flags). Rendez avec le composant FlagIcon et un code pays ISO 3166-1 alpha-2.

Marques

Marques multicolores (Google, Apple, Facebook, etc.) avec des fills fixes selon les guidelines de marque. Rendues via le composant unifié BrandIcon — Google est juste une marque de l'ensemble, pas une bibliothèque séparée.

Tailles d'icônes

Sept tailles canoniques en pixels (ADR-021). Choisissez la taille adaptée à votre contexte.

Cliquez sur un jeton pour le copier.

Exceptions documentées (ADR-021)

Trois catégories sortent intentionnellement du contrat taille/trait par défaut.

Exception B — trait de glyphe interne 2.5/3

Les coches et croix dans les boîtes de contrôle de 12–16px (Checkbox, Listbox, Stepper) utilisent des traits plus épais pour la visibilité. Les icônes d’interface restent à 1.5/2.

Exception C — LARGE_GRAPHIC 40–64px

Les illustrations hero, stats et empty-state sont des graphiques décoratifs, pas des icônes UI. Elles sortent de la convention de taille.

Exception D — couleur de marque sur icône

Le teal de marque sur un trait d'icône n'est valide que lorsque l'icône EST la marque sur une surface non teintée. Jamais dans des bannières teintées ni en concurrence avec le texte.

Catalogue d'icônes

Échantillons en direct de chaque source. Les registres complets sont des unions typées — PhosphorIconName (242 : 233 Figma + 9 EXTRAS selon ADR-022-amend-01) et VuesaxIconName (660) — exportés depuis le barrel du design system.

Échantillons Phosphor (Admin-UI)

Échantillons Vuesax (noms Storefront)

Drapeaux de pays

Le package npm region-flags (google/region-flags) couvre ~250 pays ISO 3166-1 ET les 13 provinces/territoires canadiens (ISO 3166-2:CA) — une seule bibliothèque pour tous les drapeaux (ADR-025).

ca

us

gb

fr

de

es

Provinces et territoires canadiens

Les 13 provinces et territoires canadiens (ISO 3166-2:CA) proviennent du même package region-flags que les drapeaux de pays (ADR-025) — rendez avec FlagIcon country="qc". Les codes provinciaux prévalent sur les codes pays identiques (nl = Terre-Neuve, pas les Pays-Bas).

ab

bc

mb

nb

nl

ns

nt

nu

on

pe

qc

sk

yt

Marques

Toutes les marques vivent dans le même registre (BrandIcon name=... pour les Originals multi-couleurs vendorés, BrandIcon icon=... pour les mono via react-icons). Google est juste une marque de plus — pas une bibliothèque séparée. Apple Pay multi-couleurs, Apple Wallet et Add to Apple Wallet suivent le chemin vendor.

google (4 fills)

apple (mono)

facebook (mono)

googlepay (mono)

paypal (mono)

Paiement et portefeuille — chemin vendor

Apple Pay, Google Pay (multicolore), Google Wallet et le badge Add to Apple Wallet ne sont pas redessinés ici. Google Pay multicolore est le wordmark G Pay standard avec le G 4-couleurs — utiliser GoogleOriginal composé avec le lockup mono Pay des ressources Google Brand. Apple Pay et Apple Wallet sont des assets Apple restreints — téléchargez depuis Apple Marketing Resources et utilisez tels quels.

Google Pay (multi-color): the brand registry's 'google' original composited with the official mono "Pay" lockup — vendor from Google Brand resources.
Apple Pay + Apple Wallet + "Add to Apple Wallet": gated Apple badge assets — download from Apple Marketing Resources, render as-is (no recolor, no redraw).

Utilisation

Les icônes sont des wrappers : importez le glyphe par icône (tree-shakeable), passez-le au wrapper, gardez les tailles dans l’ensemble ADR-021.

Phosphor (Admin-UI)

import { SealCheck } from '@phosphor-icons/react'
<PhosphorIcon icon={SealCheck} size={20} />

Vuesax (Storefront)

import walletAdd from 'vuesax-icons/linear/wallet-add.svg'
<VuesaxIcon name="wallet-add" src={walletAdd} size={20} />

Drapeau<FlagIcon country="fr" size={16} aria-label="Français" />

Import

import { PhosphorIcon, VuesaxIcon, FlagIcon, BrandIcon } from '@epasslive/design-system'
<BrandIcon name="google" size={18} />
<BrandIcon icon={SiApple} size={20} />

Accessibilite

Les controles a icone seule doivent etre accessibles aux lecteurs d'ecran et utilisables sur ecrans tactiles.

IconButton requiert ariaLabel (string) — l'icone est decorative, le label est le nom accessible.
IconButton applique une zone tactile minimale de 44x44px via la variable CSS --ep-tap-min (WCAG 2.5.5).
Les icones decoratives dans les boutons ou liens doivent avoir aria-hidden="true" sur le span de l'icone.
La couleur du trait de l'icone doit respecter le ratio de contraste WCAG 1.4.3 (4.5:1 pour les icones taille corps, 3:1 pour les grandes icones).

Feuille de route

88 marques + cryptomonnaies du fichier Figma Storefront sont exclues en attente d’ADR. 26 noms se chevauchent entre les bibliothèques Admin-UI et Storefront.