1. Accueil  
  2. Bases  
  3. Iconographie

Iconographie

Les icônes sont des éléments visuels représentant une action, une idée ou un objet. Ils 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 Cet hyperlien s'ouvrira dans une nouvelle fenêtre.. 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

Un icône doit inviter à l’interaction. Il 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. Référez-vous à la fiche images pour les normes quant à l’utilisation des visuels photographiques ou illustratifs. 

Avant d’utiliser une icône, assurez-vous que son usage est pertinent, qu’il sert à une fonction spécifique et qu’il n’alourdit pas inutilement l’interface. 

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é. 

Utilisez, autant que possible, les icônes mises à votre disposition dans la librairie. 

Si l’icône que vous cherchez n’est pas disponible dans la librairie, vous pouvez en créer un en respectant les standards suivants :

  • L’icône doit être composée uniquement de lignes.
  • Il doit être minimaliste et comporter le moins d’éléments possible. 
  • Il doit être visible et compréhensible lorsque réduit à 16 px ou moins. 
  • Il doit être monochrome, à l’exception de ceux 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. Lorsque vous redimensionnez une icône, assurez-vous de respecter 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. Référez-vous aux 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

Référez-vous à la fiche boutons.

Dernière mise à jour : 15 août 2022