Icônes secondaires

Utilisez les icônes simples et faciles à comprendre qui se trouvent dans Material Design pour orienter les utilisateurs.

Principe directeur : N’insérer que des éléments qui ont un rôle à jouer

Directive générale sur les icônes

Les icônes sont une représentation visuelle d’un objet, d’une action ou d’une idée simple et unique. Si vous avez besoin de communiquer des concepts plus complexes, envisagez une illustration ou une infographie.

Bibliothèque d’icônes du système de conception pour l’Ontario

La bibliothèque d’icônes du système de conception pour l’Ontario est composée de deux ensembles :

  • icônes primaires : cet ensemble représente les concepts les plus couramment utilisés dans le cadre de nos services (p. ex. téléphone, menu, recherche)
  • icônes secondaires : cet ensemble représente des concepts qui sont plus ou moins souvent utilisés (comme joindre, imprimer, épingler une carte)

Si vous avez besoin d’une icône différente

Si notre bibliothèque d’icônes ne contient pas le concept que vous devez représenter, vous pouvez choisir une icône dans le système Material Design de Google :

Toutes les fois que vous avez besoin d’une icône qui ne se trouve pas dans notre bibliothèque d’icônes, veuillez en informer l’équipe du système de conception. Si nous constatons que les mêmes sont couramment utilisées, nous envisagerons de les ajouter à la bibliothèque.


Pourquoi choisissons-nous ces icônes?

Le Système de conception pour l’Ontario suit les principes de conception d’icônes du système Material Design et utilise les icônes de la bibliothèque de Material Design.

Nous avons choisi les icônes de notre bibliothèque en nous fondant sur les meilleures pratiques qui ont fait leurs preuves, à savoir que toutes les icônes que nous utilisons doivent être :

  • une représentation visuelle d’un seul objet, d’une seule action ou d’une seule idée
  • faciles à reconnaître et à comprendre
  • susceptibles d’être interprétées de la même façon par les utilisateurs
  • utilisées pour représenter la « reconnaissance universelle » par opposition à la « représentation universelle »
    • par exemple, un fauteuil roulant est souvent utilisé pour l’accessibilité, même s’il ne représente pas tous les types de handicaps
  • pratiques
    • les icônes doivent guider l’utilisateur dans l’accomplissement de sa tâche. – n’utilisez pas les icônes dans un but purement visuel.

Ensemble d’icônes secondaires

Ces icônes représentent des concepts qui sont souvent utilisés, mais pas aussi souvent que ceux de l’ensemble primaire (comme joindre, imprimer, épingler une carte).

Passer à Comment utiliser les icônes secondaires.

Toutes les icônes suivent le modèle de dénomination « ontario-icon-purpose ». Vous pouvez rechercher des icônes particulières en utilisant la commande Rechercher de votre navigateur (ctrl+f sur un PC, ⌘+f sur on Mac)

Télécharger toutes les icônes en format PNG

Catégories d’icônes secondaires

Nous avons classé les icônes secondaires dans ces catégories :

Comptes et applications Web

Icône Nom de l’icône Usage ou alias Téléchargement
ontario-icon-account PNG , SVG
ontario-icon-bookmark-off Favoris, enregistrer PNG , SVG
ontario-icon-bookmark-on Favoris, enregistrer PNG , SVG
ontario-icon-cloud PNG , SVG
ontario-icon-more-vertical PNG , SVG
ontario-icon-notification Alerte PNG , SVG
ontario-icon-password-hide PNG , SVG
ontario-icon-password-show PNG , SVG
ontario-icon-settings PNG , SVG
ontario-icon-tag PNG , SVG

Interactions

Icône Nom de l’icône Usage ou alias Téléchargement
ontario-icon-attach Pièce jointe, fichier PNG , SVG
ontario-icon-calendar Date, sélecteur de dates PNG , SVG
ontario-icon-clock Heure, échéancier PNG , SVG
ontario-icon-delete Effacer, supprimer PNG , SVG
ontario-icon-document Joindre, type de fichier, fichier PNG , SVG
ontario-icon-download PNG , SVG
ontario-icon-edit PNG , SVG
ontario-icon-export PNG , SVG
ontario-icon-favourite-off J’aime, enregistrer, cœur PNG , SVG
ontario-icon-favourite-on J’aime, enregistrer, cœur PNG , SVG
ontario-icon-filter Filtre PNG , SVG
ontario-icon-grid Changer d’affichage PNG , SVG
ontario-icon-list Changer d’affichage PNG , SVG
ontario-icon-location-off Désactiver l’emplacement, gps PNG , SVG
ontario-icon-location-on Rechercher un emplacement, gps PNG , SVG
ontario-icon-lock-on Sécurisé, mot de passe PNG , SVG
ontario-icon-lock-off Sécurisé, mot de passe PNG , SVG
ontario-icon-next PNG , SVG
ontario-icon-pin-location-off Rechercher un emplacement PNG , SVG
ontario-icon-pin-location-on Rechercher un emplacement PNG , SVG
ontario-icon-previous PNG , SVG
ontario-icon-print Imprimer PNG , SVG
ontario-icon-save Enregistrer PNG , SVG
ontario-icon-sort Trier PNG , SVG
ontario-icon-timer Chronomètre PNG , SVG
ontario-icon-upload PNG , SVG
ontario-icon-vpn-key PNG , SVG

Multimédia

Icône Nom de l’icône Usage ou alias Téléchargement
ontario-icon-camera PNG , SVG
ontario-icon-media-fast-forward Accélérer PNG , SVG
ontario-icon-media-fast-rewind Retour PNG , SVG
ontario-icon-media-pause PNG , SVG
ontario-icon-media-play PNG , SVG
ontario-icon-media-stop PNG , SVG
ontario-icon-microphone-off Enregistrer PNG , SVG
ontario-icon-microphone-on Enregistrer PNG , SVG
ontario-icon-photo PNG , SVG
ontario-icon-replay PNG , SVG
ontario-icon-video PNG , SVG
ontario-icon-wifi PNG , SVG

Communications et médias sociaux

Icône Nom de l’icône Usage ou alias Téléchargement
ontario-icon-facebook PNG , SVG
ontario-icon-facebook-alt PNG , SVG
ontario-icon-flickr PNG , SVG
ontario-icon-instagram PNG , SVG
ontario-icon-linkedin PNG , SVG
ontario-icon-linkedin-alt PNG , SVG
ontario-icon-live-chat PNG , SVG
ontario-icon-rss-feed PNG , SVG
ontario-icon-share PNG , SVG
ontario-icon-text-message sms, message texte PNG , SVG
ontario-icon-twitter-x PNG , SVG
ontario-icon-twitter-alt PNG , SVG
ontario-icon-youtube PNG , SVG

Paiement

Icône Nom de l’icône Téléchargement
ontario-icon-interac-en PNG , SVG
ontario-icon-interac-fr PNG , SVG
ontario-icon-interac-en-alt PNG , SVG
ontario-icon-interac-fr-alt PNG , SVG
ontario-icon-mastercard PNG , SVG
ontario-icon-mastercard-alt PNG , SVG
ontario-icon-visa PNG , SVG

Cartes et transports

Icône Nom de l’icône Téléchargement
ontario-icon-map PNG , SVG
ontario-icon-transport-bicycle PNG , SVG
ontario-icon-transport-bus PNG , SVG
ontario-icon-transport-car PNG , SVG
ontario-icon-transport-walk PNG , SVG
ontario-icon-wheelchair PNG , SVG

Commentaires

Icône Nom de l’icône Téléchargement
ontario-icon-sentiment-1 PNG , SVG
ontario-icon-sentiment-2 PNG , SVG
ontario-icon-sentiment-3 PNG , SVG
ontario-icon-sentiment-4 PNG , SVG
ontario-icon-sentiment-5 PNG , SVG
ontario-icon-vote-dislike PNG , SVG
ontario-icon-vote-like PNG , SVG

Comment utiliser les icônes secondaires

Copiez et collez le code SVG pour le fichier d’icônes principal. Insérez-le dans votre code. Veuillez noter que vous devrez inclure le polyfill pour que les icônes s’affichent convenablement sur IE11.

Téléchargez le magasin SVG des icônes secondaires à partir d’un fichier autohébergé ou de notre CDN. Veuillez noter que vous devrez inclure le polyfill pour que les icônes s’affichent convenablement sur IE11.

  1. Vous pouvez télécharger les icônes de deux façons :

  2. Ajoutez le polyfill qui fixe les SVG sur IE et d’autres navigateurs plus anciens.

  1. Utilisez le SVG en HTML dans votre code

    • Si ontario-icons-secondary.svg est autohébergé, utilisez le code ci dessous et ajustez xlink:href au bon chemin d’accès :

    • Pour utiliser notre fichier hébergé SVG d’icônes secondaires, établissez le xlink:href, par exemple comme suit : https://designsystem.ontario.ca/icons/ontario-icons-secondary.svg#ontario-icon-account

  2. Ajoutez dans le fichier CSS de votre projet l’icône ontario-icon en forme CSS que vous trouverez sous l’onglet SCSS ou CSS compilé.


Caractéristiques techniques (icônes primaires et secondaires)

Type de fichier SVG
Taille Minimum 16 px
Maximum H1 (40 px pour ordinateur, 32 px pour appareils mobiles)
Taille de la correspondance Si l’icône est cliquable, la taille de la zone de correspondance doit être d’au moins 48 px sur 48 px (voir cases d’options pour un exemple où la taille de la correspondance est supérieure à celle de l’élément).

Si l’icône est une composante autonome, sa zone de correspondance doit être de 48 px sur 48 px. Si elle est cliquable et alignée avec le texte, elle doit avoir la même taille que la police.
Couleur Noir : #1A1A1A
Blanc : #FFFFFF
Gris : #666666
Bleu (s’il s’agit d’un hyperlien) :
  • Régulier : #0066CC
  • Effet de survol : #004E99
  • Visité : #551A8B

Exceptions : certaines icônes viennent avec des couleurs déjà incorporées. Ne remplacez pas les couleurs des icônes qui sont déjà incorporées. Exemples :
  • icônes d’alerte (rouge, vert et jaune)
  • icônes de Visa, Mastercard et Interac

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.