Icônes - Icons

Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.

Utilisation des icônes

Nous mettons à votre disposition une sélection d’icônes issue de la librairie Remix Icons (libre de droits). Il s’agit pour l’essentiel des icônes utilisées par les composants du DS. Si l’icône recherchée est absente de notre sélection, vous pouvez compléter en recherchant d’abord dans Remix Icons .

Pour les designers : les icônes sont dans une sous-librairie Sketch séparée, disponible sur la page “Pour commencer - designer”.

Pour télécharger et utiliser la librairie séparée des icônes :

  • Cliquer sur «  Add library to Sketch »

  • Ouvrir Sketch

  • Aller dans Préférences > Libraries

  • Vérifier que la librairie DS-icons-remix est active

Après avoir importé une des 3 tailles disponibles dans votre fichier, depuis la librairie master > symboles > 01 fondamentaux > icônes, vous pourrez choisir l'icône dans l’inspecteur ainsi que la couleur de la palette du DS qui vous convient.

Pour les développeurs : Les icones sont utilisées au sein du DSFR à l’aide d’une police d’icônes, chargée directement en CSS. Il est de ce fait possible d’utiliser des icônes en utilisant directement la classe CSS associée, reprenant le nom de l’icône SVG, précédée du préfixe fr-fi. Exemple : .fr-fi-account-fill

Le chargement des icônes se fait directement via l’ajout du fichier CSS du DSFR. Il est ensuite possible d’utiliser les classes d’icônes correspondantes, soit :

  • directement sur un composant qui permet d’ajouter une icône, par exemple un bouton :

    1 2 3 <button class="fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left"> Label bouton MD </button>
  • soit de manière autonome, en utilisant de préférence une balise span

    1 <span class="fr-fi-alert-fill" aria-hidden="true"></span>


Sélection proposée d’icônes

Des icônes doivent être utilisées pour attirer l'attention sur les actions, les ensembles de contenus importants ou les zones clés, il faut éviter d’en utiliser trop sur une même page pour ne pas créer de confusion.

Un concept doit être représenté par la même icône sur l'ensemble du site et de l'écosystème numérique de l'État.

Statuts

1 2 3 4 5 6 <span class="fr-fi-alert-fill" aria-hidden="true"></span> <span class="fr-fi-alert-line" aria-hidden="true"></span> <span class="fr-fi-question-fill" aria-hidden="true"></span> <span class="fr-fi-question-line" aria-hidden="true"></span> <span class="fr-fi-information-fill" aria-hidden="true"></span> <span class="fr-fi-information-line" aria-hidden="true"></span>

 

1 2 3 4 5 6 7 8 <span class="fr-fi-close-line" aria-hidden="true"></span> <span class="fr-fi-check-line" aria-hidden="true"></span> <span class="fr-fi-checkbox-circle-fill" aria-hidden="true"></span> <span class="fr-fi-checkbox-circle-line" aria-hidden="true"></span> <span class="fr-fi-error-warning-fill" aria-hidden="true"></span> <span class="fr-fi-error-warning-line" aria-hidden="true"></span> <span class="fr-fi-close-circle-fill" aria-hidden="true"></span> <span class="fr-fi-close-circle-line" aria-hidden="true"></span>


Navigation

1 2 <span class="fr-fi-menu-fill" aria-hidden="true"></span> <span class="fr-fi-menu-2-fill" aria-hidden="true"></span>

 

1 2 3 4 5 6 7 8 <span class="fr-fi-arrow-up-line" aria-hidden="true"></span> <span class="fr-fi-arrow-right-line" aria-hidden="true"></span> <span class="fr-fi-arrow-down-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-line" aria-hidden="true"></span> <span class="fr-fi-arrow-up-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-right-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-down-s-line" aria-hidden="true"></span> <span class="fr-fi-arrow-left-s-line" aria-hidden="true"></span>

 

1 2 3 4 5 6 <span class="fr-fi-user-fill" aria-hidden="true"></span> <span class="fr-fi-user-line" aria-hidden="true"></span> <span class="fr-fi-account-fill" aria-hidden="true"></span> <span class="fr-fi-account-line" aria-hidden="true"></span> <span class="fr-fi-lock-fill" aria-hidden="true"></span> <span class="fr-fi-lock-line" aria-hidden="true"></span>



Actions

1 2 <span class="fr-fi-add-line" aria-hidden="true"></span> <span class="fr-fi-subtract-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-search-fill" aria-hidden="true"></span> <span class="fr-fi-search-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-eye-line" aria-hidden="true"></span> <span class="fr-fi-eye-off-line" aria-hidden="true"></span>

 

1 2 3 4 5 6 7 8 <span class="fr-fi-printer-fill" aria-hidden="true"></span> <span class="fr-fi-printer-line" aria-hidden="true"></span> <span class="fr-fi-file-download-fill" aria-hidden="true"></span> <span class="fr-fi-file-download-line" aria-hidden="true"></span> <span class="fr-fi-download-line" aria-hidden="true"></span> <span class="fr-fi-external-link-line" aria-hidden="true"></span> <span class="fr-fi-edit-fill" aria-hidden="true"></span> <span class="fr-fi-edit-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-delete-line" aria-hidden="true"></span> <span class="fr-fi-delete-fill" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-save-fill" aria-hidden="true"></span> <span class="fr-fi-save-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-calendar-fill" aria-hidden="true"></span> <span class="fr-fi-calendar-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-file-fill" aria-hidden="true"></span> <span class="fr-fi-file-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-mail-fill" aria-hidden="true"></span> <span class="fr-fi-mail-line" aria-hidden="true"></span>

 

Contenus et médias

1 2 3 4 5 6 7 8 9 10 <span class="fr-fi-play-fill" aria-hidden="true"></span> <span class="fr-fi-play-line" aria-hidden="true"></span> <span class="fr-fi-volume-up-fill" aria-hidden="true"></span> <span class="fr-fi-volume-up-line" aria-hidden="true"></span> <span class="fr-fi-volume-mute-fill" aria-hidden="true"></span> <span class="fr-fi-volume-mute-line" aria-hidden="true"></span> <span class="fr-fi-volume-down-fill" aria-hidden="true"></span> <span class="fr-fi-volume-down-line" aria-hidden="true"></span> <span class="fr-fi-pause-circle-fill" aria-hidden="true"></span> <span class="fr-fi-pause-circle-line" aria-hidden="true"></span>

 

1 2 <span class="fr-fi-file-pdf-fill" aria-hidden="true"></span> <span class="fr-fi-file-pdf-line" aria-hidden="true"></span>

 

1 2 3 4 5 <span class="fr-fi-instagram-fill" aria-hidden="true"></span> <span class="fr-fi-facebook-circle-fill" aria-hidden="true"></span> <span class="fr-fi-linkedin-box-fill" aria-hidden="true"></span> <span class="fr-fi-twitter-fill" aria-hidden="true"></span> <span class="fr-fi-youtube-fill" aria-hidden="true"></span>



Paramètre d’affichage

Cette icône n’est pas issue de Remix Icon, elle a été faite spécialement pour le composant 'Paramètres d’affichage'

1 <span class="fr-fi-theme-fill" aria-hidden="true"></span>

 

Tailles

 

Les icônes sont disponibles en trois tailles, Il est possible de modifier la taille des icônes à l'aide de modifiers spécifiques :

Taille

Token

Dimension

Contexte d’utilisation

Taille

Token

Dimension

Contexte d’utilisation

MD

$md

16x16 px - 1 rem
.fr-fi

Taille par défaut, aucun modifiers.
À utiliser avec la typographie Extra Small (XS), Small (SM) et Medium (MD).

LG

$lg

24x24px - 1.5 rem
.fr-fi--lg

À utiliser avec la typographie Large (LG).

XL

$xl

32x32px - 2 rem
.fr-fi--xl

À utiliser pour les icônes sans texte, par exemple celles des boutons icônes.

Règles d’utilisation

Les icônes fonctionnels sont des symboles visuels utilisés pour représenter des idées, des objets ou des actions. Ils communiquent un message direct et attirent l'attention sur des informations importantes.

Couleurs

La couleur choisie pour vos icônes doit être issue des couleurs du DSFR . Lorsqu’une icône est rattaché à un label, elle prend automatiquement la couleur de ce label.

 

 

Alignement et marge

L’icône doit être alignée en hauteur par rapport au libellé qui l’accompagne. Pour les marges externes, vous pouvez consulter la documentation espacement .

Accessibilité

Il est fortement déconseillé d’utiliser une icône seule mais de systématiquement l’accompagner d’un libellé explicite.

Exemples d’implémentation

1 2 3 4 <a href="#"><span aria-hidden="true" class="fr-fi-file-pdf-line"></span>Télécharger le document PDF (397Ko)</a> <button class="fr-btn fr-fi-checkbox-circle-line fr-btn--icon-left" title="Label bouton MD"> Label bouton MD </button>

 

Si il est impossible d’associer un texte visuellement alors il faut masquer l’icône et proposer un libellé aux technologies d’assistance. Exemple :

1 <a href="#" title="Imprimer"><span aria-hidden="true" class="fr-fi-printer-line"></span><span class="sr-only" rel="noopener noreferrer">Imprimer</span></a>

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :