Pelote
EN
Iconographie

Icon

Toujours un Material Symbol : Rounded pour M3E et Plaza, Sharp pour Chrome.

Catégorie: IconographieOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

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
Aujourd’huiRéglages
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.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Les icônes sont toujours des Material Symbols de Google : Rounded pour M3E et Plaza, Sharp pour la variante Chrome (Y2K). Jamais d'autre bibliothèque, jamais d'emoji.

Ce que fournit le consommateur

<span class="ms">nom_de_l_icone</span> (ligature de la police) avec aria-hidden="true" si un libellé l'accompagne, sinon un aria-label sur le bouton parent. .ms.fill pour la version remplie. Dans .y2k, la même balise passe automatiquement en Sharp.

Réglages

  • Graisse 400, grade 0, taille optique égale à la taille d'affichage (opsz 20 à 48).
  • Tailles : 18px dans un bouton ou une chip, 20px dans un champ, 24px par défaut (icon-button, navigation), 40px et plus en illustration.
  • FILL 0 au repos, FILL 1 pour l'état sélectionné (navigation, favori actif).
  • Couleur héritée (currentColor) : l'icône prend le rôle du texte voisin.
  • Web : police Google Fonts avec icon_names= pour ne charger que les icônes utilisées. Flutter : Icons.*_rounded (Stabilité le fait déjà), et Icons.*_sharp en variante Chrome. Compose : Icons.Rounded.* / Icons.Sharp.*.

Règles

  • Un seul style d'icône par écran : Rounded ou Sharp, jamais mélangés.
  • Une icône seule doit être universelle (fermer, rechercher, plus) ; sinon un libellé l'accompagne.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.