Utiliser une librairie d’icônes pour son site Internet
Les librairies d’icônes sont relativement récentes dans le domaine du web. Il en existe quelques-unes dont certaines sont gratuites et d’autres payantes. L’utilisation de ces librairies permet d’ajouter des icônes sur son site Internet pour illustrer des boutons ou des zones de réassurance. Elles peuvent être utilisées directement dans le code source de son site avec les classes CSS ou à partir de blocs Gutenberg ou d’un autre constructeur de pages.
Ces librairies peuvent être téléchargées en SVG pour être utilisées dans des templates de page ou pour du print. Après la conception des templates des pages, le développeur web devra incorporer la librairie sélectionnée pour utiliser les icônes directement en CSS. Chaque librairie propose sur leur site web un moteur de recherche pour faciliter la recherche d’icônes. Malheureusement l’incorporation d’une bibliothèque d’icônes nécessite de charger entièrement la librairie et les polices de caractères. Il n’est donc pas possible de charger seulement les icônes utilisées sur son site web à part si on passe par le format SVG ou qu’on exporte les icônes dans un sprite CSS.
Pour les développeurs web, il est possible d’utiliser ces librairies avec les préprocesseurs LESS et SCSS ou les frameworks JavaScript comme Vue.js et Angular. Si la librairie ne fournit pas un module JavaScript, il existe surement un projet open source qui permet de l’intégrer dans son projet. Il est aussi possible d’utiliser ces librairies dans une application desktop ou mobile.
Font Awesome
La librairie Font Awesome est l’une des plus connues et des plus populaires. Créée par Dave Gandy, la première version fut sortie en 2012 et était pensée pour être utilisée avec le framework Bootstrap. Elle contient plus de 3600 icônes dont 465 sont gratuites pour une utilisation personnelle et commerciale. Cette librairie propose plusieurs styles d’icônes comme le format Regular, Solid, Light, Thin ou même une version Duotone pour ajouter un effet d’opacité sur certains éléments des pictos. Les icônes sont bien travaillées avec un style très sympa visuellement et sont catégorisées pour rechercher facilement l’icône idéale dans un domaine particulier.
La version payante est disponible sous abonnement annuel, mais si on le résilie on dispose d’une licence perpétuelle de la dernière version en cours lors de son abonnement. Un CDN est aussi disponible avec l’abonnement ainsi qu’un système de kit pour incorporer la librairie plus facilement dans une page web.
Line Icons
La librairie Line Icons est un concurrent direct de Font Awesome. Disponible gratuitement sous licence CreativeCommons pour une utilisation personnelle et commerciale, la version gratuite propose plus de 500 icônes tandis que la version pro plus de 5000. Disponible sous forme d’abonnement mensuel ou annuel, la version pro dispose d’un CDN, d’une variation Light et des sources au format AI. Une attribution est requise pour la version gratuite, mais sans restriction sur le nombre de pages vues à la différence de Font Awesome. Les icônes sont bien catégorisées facilitant la recherche dans un domaine et ont un style léger, sobre et élégant.
Material Design Symbols & Icons
https://fonts.google.com/icons
Les librairies Material Design Icons et Material Design Symbols sont toutes 2 développées par Google pour compléter sa charte Material Design. Sorties respectivement en 2014 puis en 2022, ces 2 librairies sont disponibles sous licence Apache pour être incorporées dans des projets web et mobile. On peut les utiliser en CSS via le système de police ou en SVG.
La dernière version Material Design Symbols contient plus de 2500 pictos et son grand avantage est l’utilisation des polices dynamiques. Ainsi il est possible de régler dynamiquement la largeur des traits des icônes pour une intégration plus faciles. Cependant les icônes ne sont pas catégorisées, mais elles sont disponibles en 3 styles Outlined, Rounded et Sharp et peuvent être remplies tout comme le style Solid de Font Awesome.
Bootstrap Icons
https://icons.getbootstrap.com/
La librairie Bootstrap Icons est relativement récente sur le web, publiée en 2020 elle est sortie officiellement avec la version 4.5 du framework Bootstrap. Elle contient plus de 1600 icônes disponibles sous licence MIT mais ne possède pas différents styles comme Font Awesome. Le design des pictos est très light, dans un style plutôt sobre avec peu de traits. Les icônes ne sont pas catégorisées ce qui rend plus difficiles les recherches.
Les autres librairies
Il existe d’autres librairies d’icônes pour le web comme Feather ou Octicons et même des moteurs de recherches comme les sites Flaticon ou Noun Project qui regroupent des sets d’icônes gratuits ou payants fait par des designers. Toutes ces librairies permettent de rendre les interfaces des applications ou des sites plus intuitives pour les utilisateurs et améliorent grandement la charte graphique. Il existe aussi des librairies d’icônes animées comme celles proposées par Lordicon mais pouvant alourdir l’interface. Le Material Design traite dans sa charte l’aspect des icônes animées ainsi que des transitions entre 2 icônes pour transformer un bouton menu en bouton fermeture. Les icônes ont donc beaucoup d’avenir pour les interfaces web ou mobile et sont un élément indispensable d’une charte graphique moderne.