Bases
Iconographie
Dans cette page :
Les icônes sont des éléments visuels représentant une action, une idée ou un objet. Elles contribuent à communiquer un message, à attirer l’attention sur un élément ou une information ou à inviter à l’interaction.
Librairie officielle d’icônes
Le système de design gouvernemental utilise la librairie Linearicons . Elle comprend une collection de plus de 1000 icônes faciles à comprendre et à reconnaître.
Concepts clés
L’usage de l’iconographie se base sur trois concepts clés.
Communication
Une icône doit pouvoir communiquer un message clair. Sa représentation visuelle doit être facilement reconnaissable et universelle. Par exemple, l’icône « plus » signifie qu’un élément peut être ajouté et à l'inverse, l’icône « poubelle » signifie qu’un item peut être supprimé.
Attention
Une icône peut servir à attirer l’attention sur un élément. Par exemple, l’icône « utilisateur » placée dans le menu principal sert à indiquer l’accès au compte utilisateur.
Interaction
Une icône doit inviter à l’interaction. Elle doit pouvoir évoquer la cliquabilité d’un élément. Par exemple, l’icône de chevron sur une liste déroulante invite l’utilisateur à cliquer sur l’élément pour ouvrir la liste d’options.
Quand l'utiliser
On utilise uniquement l’iconographie pour répondre aux trois concepts clés mentionnés ci-haut. Les icônes ne doivent pas être décoratives ni servir d’illustration. Consulter la fiche Images pour les normes quant à l’utilisation des visuels photographiques ou illustratifs.
Avant d’utiliser une icône, il faut s’assurer que son usage est pertinent, qu’elle sert à une fonction spécifique et qu’elle n’alourdit pas inutilement l’interface.
Les icônes peuvent être ambiguës, être difficiles à trouver, nuire à l'accessibilité, ajouter de la confusion, ralentir la vitesse de lecture et surcharger l'interface. Il est important d'utiliser des icônes avec un sens clair, de manière cohérente et de trouver un équilibre entre l'utilisation d'icônes et de texte pour rendre l'interface facile à comprendre et à utiliser.
On retrouve déjà quelques icônes dans les composantes du système de design telles que les accordéons, les avis, les coordonnées, les listes déroulantes, les boutons, etc.
Comment l'utiliser
Selon leur contexte d’usage, les icônes peuvent être utilisées autant sur un fond blanc (ou pâle) que foncé.
Utiliser, autant que possible, les icônes présentes dans la librairie.
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 standards suivants :
- L’icône doit être composée uniquement de lignes.
- Elle doit être minimaliste et comporter le moins d’éléments possible.
- Elle doit être visible et compréhensible lorsque réduit à 16 px ou moins.
- Elle doit être monochrome, à l’exception de celles sur l’accueil de Québec.ca.
Informations techniques
Dans la plupart des cas, les icônes devront respecter une dimension de 16 px en hauteur ou en largeur selon les proportions, mais ne devraient jamais dépasser 40 px. Lorsqu’une icône est redimensionnée, il faut s’assurer qu’elle respecte la grille de 8 px (8, 16, 24, 32, 40 etc.).
États de l'icône
Selon son contexte d’utilisation, les informations techniques peuvent varier. Consulter les fiches respectives des composantes pour l'information associée aux états des icônes.
Usage standard
Par défaut
color : #223654
Usage standard renversé
Par défaut
color : #FFFFFF
Usage dans les boutons
Consulter la fiche Boutons.
Usage dans les tuiles cliquables
Consulter la fiche Tuiles cliquables.
Dernière mise à jour : 24 août 2023