Iconographie

Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».

Quand l’utiliser

Une icône est justifiée si elle remplit au moins deux des trois rôles suivants de façon claire et non ambiguë 

• Communiquer : Elle transmet une information que le texte seul ne peut pas exprimer aussi efficacement, ou qui serait absente sans elle. Sa représentation visuelle est universellement reconnue, sans ambiguïté possible dans le contexte.
• Attirer l’attention : Elle signale un élément dont l’importance ou la nature doit être perçue avant même que le texte soit lu. L’absence de l’icône nuirait à la hiérarchie visuelle ou à la compréhension rapide de l’interface.
• Inviter à l’interaction : Elle indique sans équivoque qu’un élément est actionnable, d’une façon que la mise en forme du texte seul ne suffirait pas à communiquer.

Avant d’utiliser une icône, s’assurer que son usage est pertinent, qu’elle remplit une fonction spécifique et qu’elle n’alourdit pas inutilement l’interface.

Les icônes sont déjà intégrées dans plusieurs composants du système de design. Consulter les fiches Boutons, Tuiles cliquables, Accordéon, Avis, Coordonnées, Liste déroulante, etc.

Accessibilité

Les icônes peuvent autant aider que nuire à l’accessibilité selon la façon dont elles sont utilisées. Elles facilitent la navigation pour les utilisateurs ayant des difficultés de lecture ou une langue différente. En revanche, une icône sans équivalent textuel est invisible aux lecteurs d’écran, et une icône ambiguë, incohérente ou superflue peut créer de la confusion, ralentir la lecture et surcharger l’interface. L’équilibre entre icônes et texte est essentiel pour une interface claire et accessible.

Quand ne pas l’utiliser

Il ne faut pas utiliser les icônes dans les contextes suivants :

• Lorsque l’icône est purement décorative et ne remplit aucun des rôles ci-dessus. Consulter la fiche Images pour les normes quant à l’utilisation des visuels photographiques ou illustratifs.
• Lorsque son sens est ambigu dans le contexte. Dans ce cas, privilégier le texte seul.
• Lorsque son utilisation surcharge l’interface ou nuit à la lisibilité.

Contenus

Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.

Icône

Les icônes sont sélectionnées depuis la bibliothèque Material Symbols (en anglais seulement), exclusivement dans le style Rounded.

Si aucune icône de la librairie ne parvient à communiquer le message désiré, il est possible d’en créer une en respectant les critères suivants :

• S’inscrire visuellement dans la cohérence du style Rounded de Material Symbols.
• Être minimaliste et comporter le moins d’éléments possible.
• Être lisible et compréhensible aux petites tailles (16 px et moins).
• Être monochrome, à l’exception de celles sur l’accueil de Québec.ca.