Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Notre espace de noms npm a changé. Les développeurs doivent mettre à jour leurs projets pour continuer à accéder à nos composantes Web.

Icônes primaires

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

  • Contenu: 
    .ontario-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */
	vertical-align: middle;
	/* Paths and strokes that overflow the viewBox can show in IE11. */
	overflow: hidden;
	margin-bottom: 2px;
}
  • URL: /components/raw/icons-primary/icons-primary.scss
  • Chemin du système de fichiers: fractal/components/components/icons/icons-primary/icons-primary.scss
  • Taille: 529 Bytes
  • Contenu: 
    .ontario-icon{display:inline-block;width:24px;height:24px;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden;margin-bottom:2px}
  • URL: /components/raw/icons-primary/icons-primary.css
  • Chemin du système de fichiers: fractal/components/components/icons/icons-primary/icons-primary.css
  • Taille: 167 Bytes

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 primaires

Ces icônes représentent les concepts les plus couramment utilisés dans le cadre de nos services (p. ex. téléphone, menu, recherche).

Passer à la partie Comment utiliser les icônes primaires.

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 un Mac)

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

Icône Nom de l’icône Usage ou alias Téléchargement
ontario-icon-accessibility Accessibilité PNG , SVG
ontario-icon-add Ajouter une ligne, ajouter un champ PNG , SVG
ontario-icon-add-alt Ajouter une ligne, ajouter un champ PNG , SVG
ontario-icon-alert-error Erreur, alerte, ! Remarque : La couleur doit être rouge Alerte (#CD0000) PNG , SVG
ontario-icon-alert-information Information, i PNG , SVG
ontario-icon-alert-success Réussite, confirmation. Remarque : La couleur doit être vert Réussite (#118847) PNG , SVG
ontario-icon-alert-warning Avertissement. Remarque : La couleur doit être jaune Avertissement (#FCAF17) PNG , SVG
ontario-icon-arrow-up Retour en haut de la page PNG , SVG
ontario-icon-chevron-down Vers le bas PNG , SVG
ontario-icon-chevron-left Gauche, retour PNG , SVG
ontario-icon-chevron-right Droite, suivant PNG , SVG
ontario-icon-chevron-up Vers le haut PNG , SVG
ontario-icon-close Fermer, échapper PNG , SVG
ontario-icon-collapse Fermer l’accordéon, réduire le champ PNG , SVG
ontario-icon-credit-card Paiement PNG , SVG
ontario-icon-dropdown-arrow Dérouler, cocher une case, dérouler le menu, liste déroulante, liste de choix PNG , SVG
ontario-icon-email Courriel PNG , SVG
ontario-icon-expand Ouvrir l’accordéon, développer le champ PNG , SVG
ontario-icon-help Aide, ?, questions PNG , SVG
ontario-icon-menu Menu, menu Hamburger PNG , SVG
ontario-icon-new-window S’ouvre dans une nouvelle fenêtre PNG , SVG
ontario-icon-phone Téléphone, appeler PNG , SVG
ontario-icon-remove Supprimer la ligne, supprimer le champ PNG , SVG
ontario-icon-remove-alt Supprimer la ligne, supprimer le champ PNG , SVG
ontario-icon-search Trouver, rechercher PNG , SVG
ontario-icon-tty ATS PNG , SVG

Comment utiliser les icônes primaires

Copiez et collez le code SVG du fichier d’icônes primaires dans l’élément <head> de votre page HTML. Veuillez noter que vous devrez insérer le polyfill pour que les icônes s’affichent convenablement sur IE11.

  1. Insérez ce code en HTML (qui comprend les glyphes SVG) à votre page :
  1. Ajoutez ce code en HTML à l’endroit où vous voulez que l’icône apparaisse sur la page :

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

    Vous trouverez des exemples sous l’onglet HTML.

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 zone de correspondance doit avoir au moins 48 px sur 48 px (voir Cases d’option 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 y a 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.