Dernière mise à jour : 14 août 2025
Représentations graphiques de concepts, d’objets ou d’actions qui servent à communiquer rapidement une information facilitant la compréhension de l’interface et la façon d’y naviguer.
Utilisation
Les icônes de la trousse de design d'Hydro-Québec proviennent de la librairie Material Design de Google. Leur utilisation doit toujours signifier la même fonction ou la même information, permettant une reconnaissance visuelle et une communication uniforme dans l'ensemble du site.
Couleurs et styles
Par défaut, les icônes de la trousse de design sont noires. Certains composants peuvent incorporer des icônes de couleur différente selon les besoins. Dans le cas où une icône devrait être d’une autre couleur, se référer aux couleurs définies dans le nuancier et s’assurer que le niveau de contraste répond aux critères d’accessibilité.
L’icône pleine doit être privilégiée. Toutefois, dans certains contextes, l’utilisation d’une icône au trait est permise.
Ajout d’une icône
Si l’icône requise ne figure pas dans la trousse de design, il est possible d’en sélectionner une qui répond au besoin de l’information à communiquer dans la librairie Material Design de Google. La sélection peut se faire de deux façons :
- dans Figma, à l’aide du module d’extension Material Symbols (plug‑in) ;
- à partir de la section Icons du site Google .
Afin d’assurer une cohérence visuelle dans l’ensemble du site, certains paramètres doivent être respectés et appliqués à la nouvelle icône. Pour les connaître, consulter les spécifications dans la trousse de design.
Dimensions et mise en page des icônes
Tailles standardisées pour les conteneurs d’icônes
Selon le contexte, différentes tailles d’icônes peuvent être utilisées. Celles‑ci sont établies en fonction des quatre tailles déterminées pour leur conteneur, soit 16 px, 24 px, 32 px et 40 px.
Proportion des icônes dans leur conteneur
Importation d’icônes
Les icônes importées de la librairie Material Design de Google contiennent déjà une marge intérieure qui n'a généralement pas besoin d'être modifiée.
Modification ou création d’icônes
Toute icône modifiée ou créée qui ne provient pas de la librairie Material Design doit inclure une marge entre le conteneur et la taille réelle de l'icône. Afin de garantir une apparence uniforme de la taille et de l'espacement pour l’ensemble des icônes, cette marge doit être adaptée à la forme générale de chacune d’elle.
Zone cliquable
Afin de garantir l’accessibilité de l’icône, surtout sur mobile, celle-ci doit inclure une zone cliquable d’au moins 44 px de largeur sur 44 px de hauteur autour de son conteneur.
États interactifs
Selon le contexte, l’état interactif peut varier en s’appliquant au composant dans son ensemble plutôt qu’à l’icône spécifiquement.
Défaut
Survol
Focus
Désactivé
