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

Pour les designers

Les icônes sont disponibles dans la section Fondamentaux des librairies Sketch et Figma.

Pour les développeurs

Les icônes placés dans src/core/icon sont exportés dans dist/icons. Les icones sont utilisées directement en CSS via leur chemin relatif. 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-icon ou fr-fi (déprécié) .
Exemple : .fr-icon-error-fill, .fr-fi-account-fill.

Avec la version 1.5.0, les icônes ne sont plus chargées via une police d’icônes dans la css. De plus, les classes utilitaires d’icones ne sont plus dans core mais, à part, dans un nouveau dossier dist/utility. Il est donc nécéssaire d’importer le nouveau fichier d’icônes pour conserver leurs fonctionnement.

Les icons sont maintenant rangées en catégories (system, business, map…), avec un fichier css pour chacune. Il est donc possible d’importer uniquement les catégories d’icônes désirés pour alléger la CSS.

Le chargement des icônes se fait directement via l’ajout du fichier CSS

1 dist/utility/icons/icons.css

ou son parent utility.css

1 dist/utility/utility.css

ou plus spécifiquement par catégorie, ex:

1 dist/utility/icons/icons-buildings/icon-buildings.css

L’utilisation des utility.css et icons.css peuvent remonter des erreurs dans webpack (Maximum call stack size exceeded). Afin de contourner le problème, utilisez les fichiers de catégories.


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-icon-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-icon-alert-fill" aria-hidden="true"></span>

 

Sélection d’icônes

Les 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.
Les icônes ci-dessous sont pour la plupart issues de la librairie Remixicon.
Les icônes classées dans dsfr sont soit des icônes créées spécialement, soit des icônes issues de Remixicon ayant été renommées afin de plus coller à l’usage.

L’ancienne nomenclature des classes en fr-fi (remplacée par fr-icon) est dépréciée mais toujours fonctionnelle.

Building

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <span class="fr-icon-ancient-gate-fill" aria-hidden="true"></span> <span class="fr-icon-ancient-gate-line" aria-hidden="true"></span> <span class="fr-icon-ancient-pavilion-fill" aria-hidden="true"></span> <span class="fr-icon-ancient-pavilion-line" aria-hidden="true"></span> <span class="fr-icon-bank-fill" aria-hidden="true"></span> <span class="fr-icon-bank-line" aria-hidden="true"></span> <span class="fr-icon-building-fill" aria-hidden="true"></span> <span class="fr-icon-building-line" aria-hidden="true"></span> <span class="fr-icon-community-fill" aria-hidden="true"></span> <span class="fr-icon-community-line" aria-hidden="true"></span> <span class="fr-icon-government-fill" aria-hidden="true"></span> <span class="fr-icon-government-line" aria-hidden="true"></span> <span class="fr-icon-home-4-fill" aria-hidden="true"></span> <span class="fr-icon-home-4-line" aria-hidden="true"></span> <span class="fr-icon-hospital-fill" aria-hidden="true"></span> <span class="fr-icon-hospital-line" aria-hidden="true"></span> <span class="fr-icon-hotel-fill" aria-hidden="true"></span> <span class="fr-icon-hotel-line" aria-hidden="true"></span> <span class="fr-icon-store-fill" aria-hidden="true"></span> <span class="fr-icon-store-line" aria-hidden="true"></span>

 

Business

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <span class="fr-icon-archive-fill" aria-hidden="true"></span> <span class="fr-icon-archive-line" aria-hidden="true"></span> <span class="fr-icon-attachment-fill" aria-hidden="true"></span> <span class="fr-icon-attachment-line" aria-hidden="true"></span> <span class="fr-icon-award-fill" aria-hidden="true"></span> <span class="fr-icon-award-line" aria-hidden="true"></span> <span class="fr-icon-bar-chart-box-fill" aria-hidden="true"></span> <span class="fr-icon-bar-chart-box-line" aria-hidden="true"></span> <span class="fr-icon-bookmark-fill" aria-hidden="true"></span> <span class="fr-icon-bookmark-line" aria-hidden="true"></span> <span class="fr-icon-briefcase-fill" aria-hidden="true"></span> <span class="fr-icon-briefcase-line" aria-hidden="true"></span> <span class="fr-icon-calendar-2-fill" aria-hidden="true"></span> <span class="fr-icon-calendar-2-line" aria-hidden="true"></span> <span class="fr-icon-calendar-event-fill" aria-hidden="true"></span> <span class="fr-icon-calendar-event-line" aria-hidden="true"></span> <span class="fr-icon-calendar-fill" aria-hidden="true"></span> <span class="fr-icon-calendar-line" aria-hidden="true"></span> <span class="fr-icon-cloud-fill" aria-hidden="true"></span> <span class="fr-icon-cloud-line" aria-hidden="true"></span> <span class="fr-icon-copyright-fill" aria-hidden="true"></span> <span class="fr-icon-copyright-line" aria-hidden="true"></span> <span class="fr-icon-customer-service-fill" aria-hidden="true"></span> <span class="fr-icon-customer-service-line" aria-hidden="true"></span> <span class="fr-icon-flag-fill" aria-hidden="true"></span> <span class="fr-icon-flag-line" aria-hidden="true"></span> <span class="fr-icon-global-fill" aria-hidden="true"></span> <span class="fr-icon-global-line" aria-hidden="true"></span> <span class="fr-icon-line-chart-fill" aria-hidden="true"></span> <span class="fr-icon-line-chart-line" aria-hidden="true"></span> <span class="fr-icon-links-fill" aria-hidden="true"></span> <span class="fr-icon-links-line" aria-hidden="true"></span> <span class="fr-icon-mail-fill" aria-hidden="true"></span> <span class="fr-icon-mail-line" aria-hidden="true"></span> <span class="fr-icon-mail-open-fill" aria-hidden="true"></span> <span class="fr-icon-mail-open-line" aria-hidden="true"></span> <span class="fr-icon-medal-fill" aria-hidden="true"></span> <span class="fr-icon-medal-line" aria-hidden="true"></span> <span class="fr-icon-pie-chart-2-fill" aria-hidden="true"></span> <span class="fr-icon-pie-chart-2-line" aria-hidden="true"></span> <span class="fr-icon-pie-chart-box-fill" aria-hidden="true"></span> <span class="fr-icon-pie-chart-box-line" aria-hidden="true"></span> <span class="fr-icon-printer-fill" aria-hidden="true"></span> <span class="fr-icon-printer-line" aria-hidden="true"></span> <span class="fr-icon-profil-fill" aria-hidden="true"></span> <span class="fr-icon-profil-line" aria-hidden="true"></span> <span class="fr-icon-projector-2-fill" aria-hidden="true"></span> <span class="fr-icon-projector-2-line" aria-hidden="true"></span> <span class="fr-icon-send-plane-fill" aria-hidden="true"></span> <span class="fr-icon-send-plane-line" aria-hidden="true"></span> <span class="fr-icon-slideshow-fill" aria-hidden="true"></span> <span class="fr-icon-slideshow-line" aria-hidden="true"></span> <span class="fr-icon-window-fill" aria-hidden="true"></span> <span class="fr-icon-window-line" aria-hidden="true"></span>

 

Communication

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <span class="fr-icon-chat-2-fill" aria-hidden="true"></span> <span class="fr-icon-chat-2-line" aria-hidden="true"></span> <span class="fr-icon-chat-3-fill" aria-hidden="true"></span> <span class="fr-icon-chat-3-line" aria-hidden="true"></span> <span class="fr-icon-chat-check-fill" aria-hidden="true"></span> <span class="fr-icon-chat-check-line" aria-hidden="true"></span> <span class="fr-icon-chat-delete-fill" aria-hidden="true"></span> <span class="fr-icon-chat-delete-line" aria-hidden="true"></span> <span class="fr-icon-chat-poll-fill" aria-hidden="true"></span> <span class="fr-icon-chat-poll-line" aria-hidden="true"></span> <span class="fr-icon-discuss-fill" aria-hidden="true"></span> <span class="fr-icon-discuss-line" aria-hidden="true"></span> <span class="fr-icon-feedback-fill" aria-hidden="true"></span> <span class="fr-icon-feedback-line" aria-hidden="true"></span> <span class="fr-icon-message-2-fill" aria-hidden="true"></span> <span class="fr-icon-message-2-line" aria-hidden="true"></span> <span class="fr-icon-question-answer-fill" aria-hidden="true"></span> <span class="fr-icon-question-answer-line" aria-hidden="true"></span> <span class="fr-icon-questionnaire-fill" aria-hidden="true"></span> <span class="fr-icon-questionnaire-line" aria-hidden="true"></span> <span class="fr-icon-video-chat-fill" aria-hidden="true"></span> <span class="fr-icon-video-chat-line" aria-hidden="true"></span>

 

Design

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 <span class="fr-icon-ball-pen-fill" aria-hidden="true"></span> <span class="fr-icon-ball-pen-line" aria-hidden="true"></span> <span class="fr-icon-brush-3-fill" aria-hidden="true"></span> <span class="fr-icon-brush-3-line" aria-hidden="true"></span> <span class="fr-icon-brush-fill" aria-hidden="true"></span> <span class="fr-icon-brush-line" aria-hidden="true"></span> <span class="fr-icon-contrast-fill" aria-hidden="true"></span> <span class="fr-icon-contrast-line" aria-hidden="true"></span> <span class="fr-icon-crop-fill" aria-hidden="true"></span> <span class="fr-icon-crop-line" aria-hidden="true"></span> <span class="fr-icon-drag-move-2-fill" aria-hidden="true"></span> <span class="fr-icon-drag-move-2-line" aria-hidden="true"></span> <span class="fr-icon-drop-fill" aria-hidden="true"></span> <span class="fr-icon-drop-line" aria-hidden="true"></span> <span class="fr-icon-edit-box-fill" aria-hidden="true"></span> <span class="fr-icon-edit-box-line" aria-hidden="true"></span> <span class="fr-icon-edit-fill" aria-hidden="true"></span> <span class="fr-icon-edit-line" aria-hidden="true"></span> <span class="fr-icon-ink-bottle-fill" aria-hidden="true"></span> <span class="fr-icon-ink-bottle-line" aria-hidden="true"></span> <span class="fr-icon-layout-grid-fill" aria-hidden="true"></span> <span class="fr-icon-layout-grid-line" aria-hidden="true"></span> <span class="fr-icon-mark-pen-fill" aria-hidden="true"></span> <span class="fr-icon-mark-pen-line" aria-hidden="true"></span> <span class="fr-icon-paint-brush-fill" aria-hidden="true"></span> <span class="fr-icon-paint-brush-line" aria-hidden="true"></span> <span class="fr-icon-paint-fill" aria-hidden="true"></span> <span class="fr-icon-paint-line" aria-hidden="true"></span> <span class="fr-icon-palette-fill" aria-hidden="true"></span> <span class="fr-icon-palette-line" aria-hidden="true"></span> <span class="fr-icon-pantone-fill" aria-hidden="true"></span> <span class="fr-icon-pantone-line" aria-hidden="true"></span> <span class="fr-icon-pen-nib-fill" aria-hidden="true"></span> <span class="fr-icon-pen-nib-line" aria-hidden="true"></span> <span class="fr-icon-pencil-fill" aria-hidden="true"></span> <span class="fr-icon-pencil-line" aria-hidden="true"></span> <span class="fr-icon-pencil-ruler-fill" aria-hidden="true"></span> <span class="fr-icon-pencil-ruler-line" aria-hidden="true"></span> <span class="fr-icon-sip-fill" aria-hidden="true"></span> <span class="fr-icon-sip-line" aria-hidden="true"></span> <span class="fr-icon-table-fill" aria-hidden="true"></span> <span class="fr-icon-table-line" aria-hidden="true"></span>

 

Development

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <span class="fr-icon-bug-fill" aria-hidden="true"></span> <span class="fr-icon-bug-line" aria-hidden="true"></span> <span class="fr-icon-code-box-fill" aria-hidden="true"></span> <span class="fr-icon-code-box-line" aria-hidden="true"></span> <span class="fr-icon-code-s-slash-line" aria-hidden="true"></span> <span class="fr-icon-cursor-fill" aria-hidden="true"></span> <span class="fr-icon-cursor-line" aria-hidden="true"></span> <span class="fr-icon-git-branch-fill" aria-hidden="true"></span> <span class="fr-icon-git-branch-line" aria-hidden="true"></span> <span class="fr-icon-git-commit-fill" aria-hidden="true"></span> <span class="fr-icon-git-commit-line" aria-hidden="true"></span> <span class="fr-icon-git-merge-fill" aria-hidden="true"></span> <span class="fr-icon-git-merge-line" aria-hidden="true"></span> <span class="fr-icon-git-pull-request-fill" aria-hidden="true"></span> <span class="fr-icon-git-pull-request-line" aria-hidden="true"></span> <span class="fr-icon-git-repository-commits-fill" aria-hidden="true"></span> <span class="fr-icon-git-repository-commits-line" aria-hidden="true"></span> <span class="fr-icon-git-repository-fill" aria-hidden="true"></span> <span class="fr-icon-git-repository-line" aria-hidden="true"></span> <span class="fr-icon-git-repository-private-fill" aria-hidden="true"></span> <span class="fr-icon-git-repository-private-line" aria-hidden="true"></span> <span class="fr-icon-terminal-box-fill" aria-hidden="true"></span> <span class="fr-icon-terminal-box-line" aria-hidden="true"></span> <span class="fr-icon-terminal-line" aria-hidden="true"></span> <span class="fr-icon-terminal-window-fill" aria-hidden="true"></span> <span class="fr-icon-terminal-window-line" aria-hidden="true"></span>

 

Device

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <span class="fr-icon-bluetooth-fill" aria-hidden="true"></span> <span class="fr-icon-bluetooth-line" aria-hidden="true"></span> <span class="fr-icon-computer-fill" aria-hidden="true"></span> <span class="fr-icon-computer-line" aria-hidden="true"></span> <span class="fr-icon-dashboard-3-fill" aria-hidden="true"></span> <span class="fr-icon-dashboard-3-line" aria-hidden="true"></span> <span class="fr-icon-database-fill" aria-hidden="true"></span> <span class="fr-icon-database-line" aria-hidden="true"></span> <span class="fr-icon-device-fill" aria-hidden="true"></span> <span class="fr-icon-device-line" aria-hidden="true"></span> <span class="fr-icon-hard-drive-2-fill" aria-hidden="true"></span> <span class="fr-icon-hard-drive-2-line" aria-hidden="true"></span> <span class="fr-icon-mac-fill" aria-hidden="true"></span> <span class="fr-icon-mac-line" aria-hidden="true"></span> <span class="fr-icon-phone-fill" aria-hidden="true"></span> <span class="fr-icon-phone-line" aria-hidden="true"></span> <span class="fr-icon-qr-code-fill" aria-hidden="true"></span> <span class="fr-icon-qr-code-line" aria-hidden="true"></span> <span class="fr-icon-rss-fill" aria-hidden="true"></span> <span class="fr-icon-rss-line" aria-hidden="true"></span> <span class="fr-icon-save-3-fill" aria-hidden="true"></span> <span class="fr-icon-save-3-line" aria-hidden="true"></span> <span class="fr-icon-save-fill" aria-hidden="true"></span> <span class="fr-icon-save-line" aria-hidden="true"></span> <span class="fr-icon-server-fill" aria-hidden="true"></span> <span class="fr-icon-server-line" aria-hidden="true"></span> <span class="fr-icon-smartphone-fill" aria-hidden="true"></span> <span class="fr-icon-smartphone-line" aria-hidden="true"></span> <span class="fr-icon-tablet-fill" aria-hidden="true"></span> <span class="fr-icon-tablet-line" aria-hidden="true"></span> <span class="fr-icon-tv-fill" aria-hidden="true"></span> <span class="fr-icon-tv-line" aria-hidden="true"></span> <span class="fr-icon-wifi-fill" aria-hidden="true"></span> <span class="fr-icon-wifi-line" aria-hidden="true"></span>

 

Document

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <span class="fr-icon-article-fill" aria-hidden="true"></span> <span class="fr-icon-article-line" aria-hidden="true"></span> <span class="fr-icon-book-2-fill" aria-hidden="true"></span> <span class="fr-icon-book-2-line" aria-hidden="true"></span> <span class="fr-icon-booklet-fill" aria-hidden="true"></span> <span class="fr-icon-booklet-line" aria-hidden="true"></span> <span class="fr-icon-clipboard-fill" aria-hidden="true"></span> <span class="fr-icon-clipboard-line" aria-hidden="true"></span> <span class="fr-icon-draft-fill" aria-hidden="true"></span> <span class="fr-icon-draft-line" aria-hidden="true"></span> <span class="fr-icon-file-add-fill" aria-hidden="true"></span> <span class="fr-icon-file-add-line" aria-hidden="true"></span> <span class="fr-icon-file-download-fill" aria-hidden="true"></span> <span class="fr-icon-file-download-line" aria-hidden="true"></span> <span class="fr-icon-file-fill" aria-hidden="true"></span> <span class="fr-icon-file-line" aria-hidden="true"></span> <span class="fr-icon-file-pdf-fill" aria-hidden="true"></span> <span class="fr-icon-file-pdf-line" aria-hidden="true"></span> <span class="fr-icon-file-text-fill" aria-hidden="true"></span> <span class="fr-icon-file-text-line" aria-hidden="true"></span> <span class="fr-icon-folder-2-fill" aria-hidden="true"></span> <span class="fr-icon-folder-2-line" aria-hidden="true"></span> <span class="fr-icon-newspaper-fill" aria-hidden="true"></span> <span class="fr-icon-newspaper-line" aria-hidden="true"></span> <span class="fr-icon-survey-fill" aria-hidden="true"></span> <span class="fr-icon-survey-line" aria-hidden="true"></span> <span class="fr-icon-todo-fill" aria-hidden="true"></span> <span class="fr-icon-todo-line" aria-hidden="true"></span>

 

Editor

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!-- dsfr --> <span class="fr-icon-bold" aria-hidden="true"></span> <span class="fr-icon-highlight" aria-hidden="true"></span> <span class="fr-icon-quote-fill" aria-hidden="true"></span> <span class="fr-icon-quote-line" aria-hidden="true"></span> <!-- remix --> <span class="fr-icon-code-view" aria-hidden="true"></span> <span class="fr-icon-font-size" aria-hidden="true"></span> <span class="fr-icon-h-1" aria-hidden="true"></span> <span class="fr-icon-h-2" aria-hidden="true"></span> <span class="fr-icon-h-3" aria-hidden="true"></span> <span class="fr-icon-h-4" aria-hidden="true"></span> <span class="fr-icon-h-5" aria-hidden="true"></span> <span class="fr-icon-h-6" aria-hidden="true"></span> <span class="fr-icon-hashtag" aria-hidden="true"></span> <span class="fr-icon-italic" aria-hidden="true"></span> <span class="fr-icon-link-unlink" aria-hidden="true"></span> <span class="fr-icon-link" aria-hidden="true"></span> <span class="fr-icon-list-ordered" aria-hidden="true"></span> <span class="fr-icon-list-unordered" aria-hidden="true"></span> <span class="fr-icon-question-mark" aria-hidden="true"></span> <span class="fr-icon-separator" aria-hidden="true"></span> <span class="fr-icon-space" aria-hidden="true"></span> <span class="fr-icon-subscript" aria-hidden="true"></span> <span class="fr-icon-superscript" aria-hidden="true"></span> <span class="fr-icon-table-2" aria-hidden="true"></span> <span class="fr-icon-translate-2" aria-hidden="true"></span>

 

Finance

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <span class="fr-icon-bank-card-fill" aria-hidden="true"></span> <span class="fr-icon-bank-card-line" aria-hidden="true"></span> <span class="fr-icon-coin-fill" aria-hidden="true"></span> <span class="fr-icon-gift-fill" aria-hidden="true"></span> <span class="fr-icon-gift-line" aria-hidden="true"></span> <span class="fr-icon-money-euro-box-fill" aria-hidden="true"></span> <span class="fr-icon-money-euro-box-line" aria-hidden="true"></span> <span class="fr-icon-money-euro-circle-fill" aria-hidden="true"></span> <span class="fr-icon-money-euro-circle-line" aria-hidden="true"></span> <span class="fr-icon-secure-payment-fill" aria-hidden="true"></span> <span class="fr-icon-secure-payment-line" aria-hidden="true"></span> <span class="fr-icon-shopping-bag-fill" aria-hidden="true"></span> <span class="fr-icon-shopping-bag-line" aria-hidden="true"></span> <span class="fr-icon-shopping-cart-2-fill" aria-hidden="true"></span> <span class="fr-icon-shopping-cart-2-line" aria-hidden="true"></span> <span class="fr-icon-trophy-fill" aria-hidden="true"></span> <span class="fr-icon-trophy-line" aria-hidden="true"></span>

 

Health

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <span class="fr-icon-capsule-fill" aria-hidden="true"></span> <span class="fr-icon-capsule-line" aria-hidden="true"></span> <span class="fr-icon-dislike-fill" aria-hidden="true"></span> <span class="fr-icon-dislike-line" aria-hidden="true"></span> <span class="fr-icon-dossier-fill" aria-hidden="true"></span> <span class="fr-icon-dossier-line" aria-hidden="true"></span> <span class="fr-icon-first-aid-kit-fill" aria-hidden="true"></span> <span class="fr-icon-first-aid-kit-line" aria-hidden="true"></span> <span class="fr-icon-hand-sanitizer-fill" aria-hidden="true"></span> <span class="fr-icon-hand-sanitizer-line" aria-hidden="true"></span> <span class="fr-icon-health-book-fill" aria-hidden="true"></span> <span class="fr-icon-health-book-line" aria-hidden="true"></span> <span class="fr-icon-heart-fill" aria-hidden="true"></span> <span class="fr-icon-heart-line" aria-hidden="true"></span> <span class="fr-icon-heart-pulse-fill" aria-hidden="true"></span> <span class="fr-icon-heart-pulse-line" aria-hidden="true"></span> <span class="fr-icon-lungs-fill" aria-hidden="true"></span> <span class="fr-icon-lungs-line" aria-hidden="true"></span> <span class="fr-icon-medicine-bottle-fill" aria-hidden="true"></span> <span class="fr-icon-medicine-bottle-line" aria-hidden="true"></span> <span class="fr-icon-mental-health-fill" aria-hidden="true"></span> <span class="fr-icon-mental-health-line" aria-hidden="true"></span> <span class="fr-icon-microscope-fill" aria-hidden="true"></span> <span class="fr-icon-microscope-line" aria-hidden="true"></span> <span class="fr-icon-psychotherapy-fill" aria-hidden="true"></span> <span class="fr-icon-psychotherapy-line" aria-hidden="true"></span> <span class="fr-icon-pulse-line" aria-hidden="true"></span> <span class="fr-icon-stethoscope-fill" aria-hidden="true"></span> <span class="fr-icon-stethoscope-line" aria-hidden="true"></span> <span class="fr-icon-surgical-mask-fill" aria-hidden="true"></span> <span class="fr-icon-surgical-mask-line" aria-hidden="true"></span> <span class="fr-icon-syringe-fill" aria-hidden="true"></span> <span class="fr-icon-syringe-line" aria-hidden="true"></span> <span class="fr-icon-test-tube-fill" aria-hidden="true"></span> <span class="fr-icon-test-tube-line" aria-hidden="true"></span> <span class="fr-icon-thermometer-fill" aria-hidden="true"></span> <span class="fr-icon-thermometer-line" aria-hidden="true"></span> <span class="fr-icon-virus-fill" aria-hidden="true"></span> <span class="fr-icon-virus-line" aria-hidden="true"></span>

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 <!-- dsfr --> <span class="fr-icon-dailymotion-fill" aria-hidden="true"></span> <span class="fr-icon-dailymotion-line" aria-hidden="true"></span> <span class="fr-icon-tiktok-fill" aria-hidden="true"></span> <span class="fr-icon-tiktok-line" aria-hidden="true"></span> <!-- remix --> <span class="fr-icon-chrome-fill" aria-hidden="true"></span> <span class="fr-icon-chrome-line" aria-hidden="true"></span> <span class="fr-icon-edge-fill" aria-hidden="true"></span> <span class="fr-icon-edge-line" aria-hidden="true"></span> <span class="fr-icon-facebook-circle-fill" aria-hidden="true"></span> <span class="fr-icon-facebook-circle-line" aria-hidden="true"></span> <span class="fr-icon-firefox-fill" aria-hidden="true"></span> <span class="fr-icon-firefox-line" aria-hidden="true"></span> <span class="fr-icon-github-fill" aria-hidden="true"></span> <span class="fr-icon-github-line" aria-hidden="true"></span> <span class="fr-icon-google-fill" aria-hidden="true"></span> <span class="fr-icon-google-line" aria-hidden="true"></span> <span class="fr-icon-ie-fill" aria-hidden="true"></span> <span class="fr-icon-ie-line" aria-hidden="true"></span> <span class="fr-icon-instagram-fill" aria-hidden="true"></span> <span class="fr-icon-instagram-line" aria-hidden="true"></span> <span class="fr-icon-linkedin-box-fill" aria-hidden="true"></span> <span class="fr-icon-linkedin-box-line" aria-hidden="true"></span> <span class="fr-icon-mastodon-fill" aria-hidden="true"></span> <span class="fr-icon-mastodon-line" aria-hidden="true"></span> <span class="fr-icon-npmjs-fill" aria-hidden="true"></span> <span class="fr-icon-npmjs-line" aria-hidden="true"></span> <span class="fr-icon-remixicon-fill" aria-hidden="true"></span> <span class="fr-icon-remixicon-line" aria-hidden="true"></span> <span class="fr-icon-safari-fill" aria-hidden="true"></span> <span class="fr-icon-safari-line" aria-hidden="true"></span> <span class="fr-icon-slack-fill" aria-hidden="true"></span> <span class="fr-icon-slack-line" aria-hidden="true"></span> <span class="fr-icon-snapchat-fill" aria-hidden="true"></span> <span class="fr-icon-snapchat-line" aria-hidden="true"></span> <span class="fr-icon-telegram-fill" aria-hidden="true"></span> <span class="fr-icon-telegram-line" aria-hidden="true"></span> <span class="fr-icon-twitch-fill" aria-hidden="true"></span> <span class="fr-icon-twitch-line" aria-hidden="true"></span> <span class="fr-icon-twitter-fill" aria-hidden="true"></span> <span class="fr-icon-twitter-line" aria-hidden="true"></span> <span class="fr-icon-vimeo-fill" aria-hidden="true"></span> <span class="fr-icon-vimeo-line" aria-hidden="true"></span> <span class="fr-icon-vuejs-fill" aria-hidden="true"></span> <span class="fr-icon-vuejs-line" aria-hidden="true"></span> <span class="fr-icon-youtube-fill" aria-hidden="true"></span> <span class="fr-icon-youtube-line" aria-hidden="true"></span>

 

Map

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 <span class="fr-icon-anchor-fill" aria-hidden="true"></span> <span class="fr-icon-anchor-line" aria-hidden="true"></span> <span class="fr-icon-bike-fill" aria-hidden="true"></span> <span class="fr-icon-bike-line" aria-hidden="true"></span> <span class="fr-icon-bus-fill" aria-hidden="true"></span> <span class="fr-icon-bus-line" aria-hidden="true"></span> <span class="fr-icon-car-fill" aria-hidden="true"></span> <span class="fr-icon-car-line" aria-hidden="true"></span> <span class="fr-icon-caravan-fill" aria-hidden="true"></span> <span class="fr-icon-caravan-line" aria-hidden="true"></span> <span class="fr-icon-charging-pile-2-fill" aria-hidden="true"></span> <span class="fr-icon-charging-pile-2-line" aria-hidden="true"></span> <span class="fr-icon-compass-3-fill" aria-hidden="true"></span> <span class="fr-icon-compass-3-line" aria-hidden="true"></span> <span class="fr-icon-cup-fill" aria-hidden="true"></span> <span class="fr-icon-cup-line" aria-hidden="true"></span> <span class="fr-icon-earth-fill" aria-hidden="true"></span> <span class="fr-icon-earth-line" aria-hidden="true"></span> <span class="fr-icon-france-fill" aria-hidden="true"></span> <span class="fr-icon-france-line" aria-hidden="true"></span> <span class="fr-icon-gas-station-fill" aria-hidden="true"></span> <span class="fr-icon-gas-station-line" aria-hidden="true"></span> <span class="fr-icon-goblet-fill" aria-hidden="true"></span> <span class="fr-icon-goblet-line" aria-hidden="true"></span> <span class="fr-icon-map-pin-2-fill" aria-hidden="true"></span> <span class="fr-icon-map-pin-2-line" aria-hidden="true"></span> <span class="fr-icon-map-pin-user-fill" aria-hidden="true"></span> <span class="fr-icon-map-pin-user-line" aria-hidden="true"></span> <span class="fr-icon-motorbike-fill" aria-hidden="true"></span> <span class="fr-icon-motorbike-line" aria-hidden="true"></span> <span class="fr-icon-passport-fill" aria-hidden="true"></span> <span class="fr-icon-passport-line" aria-hidden="true"></span> <span class="fr-icon-restaurant-fill" aria-hidden="true"></span> <span class="fr-icon-restaurant-line" aria-hidden="true"></span> <span class="fr-icon-road-map-fill" aria-hidden="true"></span> <span class="fr-icon-road-map-line" aria-hidden="true"></span> <span class="fr-icon-sailboat-fill" aria-hidden="true"></span> <span class="fr-icon-sailboat-line" aria-hidden="true"></span> <span class="fr-icon-ship-2-fill" aria-hidden="true"></span> <span class="fr-icon-ship-2-line" aria-hidden="true"></span> <span class="fr-icon-signal-tower-fill" aria-hidden="true"></span> <span class="fr-icon-signal-tower-line" aria-hidden="true"></span> <span class="fr-icon-suitcase-2-fill" aria-hidden="true"></span> <span class="fr-icon-suitcase-2-line" aria-hidden="true"></span> <span class="fr-icon-taxi-fill" aria-hidden="true"></span> <span class="fr-icon-taxi-line" aria-hidden="true"></span> <span class="fr-icon-train-fill" aria-hidden="true"></span> <span class="fr-icon-train-line" aria-hidden="true"></span>

 

Media

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <span class="fr-icon-camera-fill" aria-hidden="true"></span> <span class="fr-icon-camera-line" aria-hidden="true"></span> <span class="fr-icon-clapperboard-fill" aria-hidden="true"></span> <span class="fr-icon-clapperboard-line" aria-hidden="true"></span> <span class="fr-icon-equalizer-fill" aria-hidden="true"></span> <span class="fr-icon-equalizer-line" aria-hidden="true"></span> <span class="fr-icon-film-fill" aria-hidden="true"></span> <span class="fr-icon-film-line" aria-hidden="true"></span> <span class="fr-icon-gallery-fill" aria-hidden="true"></span> <span class="fr-icon-gallery-line" aria-hidden="true"></span> <span class="fr-icon-headphone-fill" aria-hidden="true"></span> <span class="fr-icon-headphone-line" aria-hidden="true"></span> <span class="fr-icon-image-add-fill" aria-hidden="true"></span> <span class="fr-icon-image-add-line" aria-hidden="true"></span> <span class="fr-icon-image-edit-fill" aria-hidden="true"></span> <span class="fr-icon-image-edit-line" aria-hidden="true"></span> <span class="fr-icon-image-fill" aria-hidden="true"></span> <span class="fr-icon-image-line" aria-hidden="true"></span> <span class="fr-icon-live-fill" aria-hidden="true"></span> <span class="fr-icon-live-line" aria-hidden="true"></span> <span class="fr-icon-mic-fill" aria-hidden="true"></span> <span class="fr-icon-mic-line" aria-hidden="true"></span> <span class="fr-icon-music-2-fill" aria-hidden="true"></span> <span class="fr-icon-music-2-line" aria-hidden="true"></span> <span class="fr-icon-notification-3-fill" aria-hidden="true"></span> <span class="fr-icon-notification-3-line" aria-hidden="true"></span> <span class="fr-icon-pause-circle-fill" aria-hidden="true"></span> <span class="fr-icon-pause-circle-line" aria-hidden="true"></span> <span class="fr-icon-play-circle-fill" aria-hidden="true"></span> <span class="fr-icon-play-circle-line" aria-hidden="true"></span> <span class="fr-icon-stop-circle-fill" aria-hidden="true"></span> <span class="fr-icon-stop-circle-line" aria-hidden="true"></span> <span class="fr-icon-transcription" aria-hidden="true"></span> <span class="fr-icon-volume-down-fill" aria-hidden="true"></span> <span class="fr-icon-volume-down-line" aria-hidden="true"></span> <span class="fr-icon-volume-mute-fill" aria-hidden="true"></span> <span class="fr-icon-volume-mute-line" aria-hidden="true"></span> <span class="fr-icon-volume-up-fill" aria-hidden="true"></span> <span class="fr-icon-volume-up-line" aria-hidden="true"></span>

 

Other

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <span class="fr-icon-leaf-fill" aria-hidden="true"></span> <span class="fr-icon-leaf-line" aria-hidden="true"></span> <span class="fr-icon-lightbulb-fill" aria-hidden="true"></span> <span class="fr-icon-lightbulb-line" aria-hidden="true"></span> <span class="fr-icon-plant-fill" aria-hidden="true"></span> <span class="fr-icon-plant-line" aria-hidden="true"></span> <span class="fr-icon-recycle-fill" aria-hidden="true"></span> <span class="fr-icon-recycle-line" aria-hidden="true"></span> <span class="fr-icon-scales-3-fill" aria-hidden="true"></span> <span class="fr-icon-scales-3-line" aria-hidden="true"></span> <span class="fr-icon-seedling-fill" aria-hidden="true"></span> <span class="fr-icon-seedling-line" aria-hidden="true"></span> <span class="fr-icon-umbrella-fill" aria-hidden="true"></span> <span class="fr-icon-umbrella-line" aria-hidden="true"></span>

 

System

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 <!-- dsfr --> <span class="fr-icon-arrow-left-s-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-left-s-line" aria-hidden="true"></span> <span class="fr-icon-arrow-right-s-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-right-s-line" aria-hidden="true"></span> <span class="fr-icon-error-fill" aria-hidden="true"></span> <span class="fr-icon-error-line" aria-hidden="true"></span> <span class="fr-icon-info-fill" aria-hidden="true"></span> <span class="fr-icon-info-line" aria-hidden="true"></span> <span class="fr-icon-success-fill" aria-hidden="true"></span> <span class="fr-icon-success-line" aria-hidden="true"></span> <span class="fr-icon-warning-fill" aria-hidden="true"></span> <span class="fr-icon-warning-line" aria-hidden="true"></span> <span class="fr-icon-theme-fill" aria-hidden="true"></span> <!-- remix --> <span class="fr-icon-add-circle-fill" aria-hidden="true"></span> <span class="fr-icon-add-circle-line" aria-hidden="true"></span> <span class="fr-icon-add-line" aria-hidden="true"></span> <span class="fr-icon-alarm-warning-fill" aria-hidden="true"></span> <span class="fr-icon-alarm-warning-line" aria-hidden="true"></span> <span class="fr-icon-alert-fill" aria-hidden="true"></span> <span class="fr-icon-alert-line" aria-hidden="true"></span> <span class="fr-icon-arrow-down-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-down-line" aria-hidden="true"></span> <span class="fr-icon-arrow-down-s-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-down-s-line" aria-hidden="true"></span> <span class="fr-icon-arrow-go-back-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-go-back-line" aria-hidden="true"></span> <span class="fr-icon-arrow-go-forward-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-go-forward-line" aria-hidden="true"></span> <span class="fr-icon-arrow-left-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-left-line" aria-hidden="true"></span> <span class="fr-icon-arrow-right-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-right-line" aria-hidden="true"></span> <span class="fr-icon-arrow-right-up-line" aria-hidden="true"></span> <span class="fr-icon-arrow-up-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-up-line" aria-hidden="true"></span> <span class="fr-icon-arrow-up-s-fill" aria-hidden="true"></span> <span class="fr-icon-arrow-up-s-line" aria-hidden="true"></span> <span class="fr-icon-check-line" aria-hidden="true"></span> <span class="fr-icon-checkbox-circle-fill" aria-hidden="true"></span> <span class="fr-icon-checkbox-circle-line" aria-hidden="true"></span> <span class="fr-icon-checkbox-fill" aria-hidden="true"></span> <span class="fr-icon-checkbox-line" aria-hidden="true"></span> <span class="fr-icon-close-circle-fill" aria-hidden="true"></span> <span class="fr-icon-close-circle-line" aria-hidden="true"></span> <span class="fr-icon-close-line" aria-hidden="true"></span> <span class="fr-icon-delete-fill" aria-hidden="true"></span> <span class="fr-icon-delete-line" aria-hidden="true"></span> <span class="fr-icon-download-fill" aria-hidden="true"></span> <span class="fr-icon-download-line" aria-hidden="true"></span> <span class="fr-icon-error-warning-fill" aria-hidden="true"></span> <span class="fr-icon-error-warning-line" aria-hidden="true"></span> <span class="fr-icon-external-link-fill" aria-hidden="true"></span> <span class="fr-icon-external-link-line" aria-hidden="true"></span> <span class="fr-icon-eye-fill" aria-hidden="true"></span> <span class="fr-icon-eye-line" aria-hidden="true"></span> <span class="fr-icon-eye-off-fill" aria-hidden="true"></span> <span class="fr-icon-eye-off-line" aria-hidden="true"></span> <span class="fr-icon-filter-fill" aria-hidden="true"></span> <span class="fr-icon-filter-line" aria-hidden="true"></span> <span class="fr-icon-arrow-left-s-first-line" aria-hidden="true"></span> <span class="fr-icon-arrow-left-s-line-double" aria-hidden="true"></span> <span class="fr-icon-arrow-right-s-last-line" aria-hidden="true"></span> <span class="fr-icon-arrow-right-s-line-double" aria-hidden="true"></span> <span class="fr-icon-information-fill" aria-hidden="true"></span> <span class="fr-icon-information-line" aria-hidden="true"></span> <span class="fr-icon-lock-fill" aria-hidden="true"></span> <span class="fr-icon-lock-line" aria-hidden="true"></span> <span class="fr-icon-lock-unlock-fill" aria-hidden="true"></span> <span class="fr-icon-lock-unlock-line" aria-hidden="true"></span> <span class="fr-icon-logout-box-r-fill" aria-hidden="true"></span> <span class="fr-icon-logout-box-r-line" aria-hidden="true"></span> <span class="fr-icon-menu-2-fill" aria-hidden="true"></span> <span class="fr-icon-menu-fill" aria-hidden="true"></span> <span class="fr-icon-more-fill" aria-hidden="true"></span> <span class="fr-icon-more-line" aria-hidden="true"></span> <span class="fr-icon-notification-badge-fill" aria-hidden="true"></span> <span class="fr-icon-notification-badge-line" aria-hidden="true"></span> <span class="fr-icon-question-fill" aria-hidden="true"></span> <span class="fr-icon-question-line" aria-hidden="true"></span> <span class="fr-icon-refresh-fill" aria-hidden="true"></span> <span class="fr-icon-refresh-line" aria-hidden="true"></span> <span class="fr-icon-search-fill" aria-hidden="true"></span> <span class="fr-icon-search-line" aria-hidden="true"></span> <span class="fr-icon-settings-5-fill" aria-hidden="true"></span> <span class="fr-icon-settings-5-line" aria-hidden="true"></span> <span class="fr-icon-shield-fill" aria-hidden="true"></span> <span class="fr-icon-shield-line" aria-hidden="true"></span> <span class="fr-icon-star-fill" aria-hidden="true"></span> <span class="fr-icon-star-line" aria-hidden="true"></span> <span class="fr-icon-star-s-fill" aria-hidden="true"></span> <span class="fr-icon-star-s-line" aria-hidden="true"></span> <span class="fr-icon-subtract-line" aria-hidden="true"></span> <span class="fr-icon-thumb-down-fill" aria-hidden="true"></span> <span class="fr-icon-thumb-down-line" aria-hidden="true"></span> <span class="fr-icon-thumb-up-fill" aria-hidden="true"></span> <span class="fr-icon-thumb-up-line" aria-hidden="true"></span> <span class="fr-icon-time-fill" aria-hidden="true"></span> <span class="fr-icon-time-line" aria-hidden="true"></span> <span class="fr-icon-timer-fill" aria-hidden="true"></span> <span class="fr-icon-timer-line" aria-hidden="true"></span> <span class="fr-icon-upload-2-fill" aria-hidden="true"></span> <span class="fr-icon-upload-2-line" aria-hidden="true"></span> <span class="fr-icon-upload-fill" aria-hidden="true"></span> <span class="fr-icon-upload-line" aria-hidden="true"></span> <span class="fr-icon-zoom-in-fill" aria-hidden="true"></span> <span class="fr-icon-zoom-in-line" aria-hidden="true"></span> <span class="fr-icon-zoom-out-fill" aria-hidden="true"></span> <span class="fr-icon-zoom-out-line" aria-hidden="true"></span>

 

User

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <span class="fr-icon-account-circle-fill" aria-hidden="true"></span> <span class="fr-icon-account-circle-line" aria-hidden="true"></span> <span class="fr-icon-account-fill" aria-hidden="true"></span> <span class="fr-icon-account-line" aria-hidden="true"></span> <span class="fr-icon-account-pin-circle-fill" aria-hidden="true"></span> <span class="fr-icon-account-pin-circle-line" aria-hidden="true"></span> <span class="fr-icon-admin-fill" aria-hidden="true"></span> <span class="fr-icon-admin-line" aria-hidden="true"></span> <span class="fr-icon-group-fill" aria-hidden="true"></span> <span class="fr-icon-group-line" aria-hidden="true"></span> <span class="fr-icon-parent-fill" aria-hidden="true"></span> <span class="fr-icon-parent-line" aria-hidden="true"></span> <span class="fr-icon-team-fill" aria-hidden="true"></span> <span class="fr-icon-team-line" aria-hidden="true"></span> <span class="fr-icon-user-add-fill" aria-hidden="true"></span> <span class="fr-icon-user-add-line" aria-hidden="true"></span> <span class="fr-icon-user-fill" aria-hidden="true"></span> <span class="fr-icon-user-line" aria-hidden="true"></span> <span class="fr-icon-user-heart-fill" aria-hidden="true"></span> <span class="fr-icon-user-heart-line" aria-hidden="true"></span> <span class="fr-icon-user-search-fill" aria-hidden="true"></span> <span class="fr-icon-user-search-line" aria-hidden="true"></span> <span class="fr-icon-user-setting-fill" aria-hidden="true"></span> <span class="fr-icon-user-setting-line" aria-hidden="true"></span> <span class="fr-icon-user-star-fill" aria-hidden="true"></span> <span class="fr-icon-user-star-line" aria-hidden="true"></span>

 

Weather

 

1 2 3 4 5 6 <span class="fr-icon-cloudy-2-fill" aria-hidden="true"></span> <span class="fr-icon-cloudy-2-line" aria-hidden="true"></span> <span class="fr-icon-flashlight-fill" aria-hidden="true"></span> <span class="fr-icon-flashlight-line" aria-hidden="true"></span> <span class="fr-icon-moon-fill" aria-hidden="true"></span> <span class="fr-icon-moon-line" aria-hidden="true"></span>

 

Tailles

Les icônes sont disponibles en quatre 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

XS

$xs

12x12px - 0.75 rem
.fr-fi--sm

À utiliser avec la typographie Extra Small (XS), et Small (SM).

MD

$md

16x16 px - 1 rem
.fr-fi

Taille par défaut, aucun modifiers.
À utiliser avec la typographie 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-icon-fr-fi-file-pdf-line"></span>Télécharger le document PDF (397Ko)</a> <button class="fr-icon-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-icon-fr-fi-printer-line"></span><span class="fr-icon-fr-sr-only" rel="noopener noreferrer">Imprimer</span></a>

 

Besoin d’aide ?

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