Iconography

Icon

Always a Material Symbol: Rounded for M3E and Plaza, Sharp for Chrome.

Live preview

Reference specimen. Example copy comes from the Pelote specs and is in French.

ExpressiveRéférence

Accueil

Rechercher

Réglages

Rafraîchir

Supprimer

Scripts

Conteneurs

Repas

SOS

Alertes

Heure

Attention

Repos et sélection

Tailles 18 · 20 · 24 · 40

Material Symbols Rounded, graisse 400, taille optique alignée sur la taille.

UX / UIRègles illustrées

À faire

Rempli pour la sélection, contour au repos.

À éviter

🏠 ⚙️ 🔔

Des emoji à la place des icônes : rendu variable selon le système, illisible en petit.

À éviter

Rounded, Sharp et rempli mélangés sans raison sur le même écran.

À faire

Icône de 18px devant un libellé, même couleur que le texte.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

Plaza garde Rounded : même douceur que la police arrondie.

ChromeY2K

Chrome passe en Sharp : angles vifs, assortis aux coins asymétriques et au métal.

Reference specimen. Example copy comes from the Pelote specs and is in French.

Icons are always Google Material Symbols: Rounded for M3E and Plaza, Sharp for the Chrome variant (Y2K). No other library, no emoji.

Use <span class="ms">icon_name</span>, with aria-hidden="true" when a label accompanies it, otherwise an aria-label on the parent button. .ms.fill for the filled version. In .y2k the same tag switches to Sharp.
Sizes: 18px in a button or chip, 20px in a field, 24px by default, 40px and up in illustrations. FILL 0 at rest, FILL 1 when selected.
One icon style per screen: Rounded or Sharp, never mixed. Never draw an icon.