Dans une certaine mesure, il est possible de totalement éviter les images pour vos icônes ! Certaines icônes sont tout simplement disponible en Unicode et HTML. C’est à dire que c’est du “texte-icône”. Certains caractères “spéciaux” tels que “ç, €, à, é, è, ê…” possèdent bien en html des codes ressemblant à ça : “&ccedil”. Il ne vous viendrait pas à l’esprit de mettre une image à la place du texte… Pourquoi ferions-nous différemment pour les icônes ?

Vous me direz peut-être même que quand vous écrivez une page web, vous ne mettez pas le code html correspondant au “ç” ni au “ê”, mais directement le caractère comme on le trouve sur le clavier… Tout a fait, si vos pages sont encodés dans un encodage Unicode (tel que l’UTF-8), vous pouvez tout mixer, sans avoir à mettre le code HTML correspondant.

Quel intérêt ?

En un mot : les performances ! Avoir des pages qui chargent rapidement est primordial. Moins nos pages contiennent de fichiers à charger, plus elles chargent rapidement, c’est mathématique.

En développement web, on sait qu’il est très important d’une part, de limiter le poids de nos pages pour un chargement rapide, et d’autre part, pour diminuer le nombre de requêtes HTTP, de limiter le nombre de fichiers (images, fichiers CSS, JS…) que l’on charge.

Compatibilité ?

L’Unicode est constamment mis à jour et chaque version comporte un numéro de version. La dernière version en 2019 est Unicode 12.0. La plupart des systèmes modernes (smartphones, systèmes d’exploitations et navigaurs) permettent l’affichage de la grande majorité des caractères Unicode.

Toutefois, le support des dernières versions met parfois plusieurs mois avant d’être disponible sur tous les périphériques. Par conséquent, si vous utilisez des caractères ajoutés dans la toute dernière version, il est possible que tous ne puissent pas le voir.

Le numéro de la version Unicode à laquelle le caractère a été introduit est disponible dans la table des caractères Unicode.

La parade

De même que vous mettrez peut-être la lettre “x” en guise d’icône de suppression, tentons de trouver des équivalents “texte” à nos icônes : ❤ ★ ⚑ ♫ ⏏ ♪ ⚠ ✓ ✔ ✚ ⇧ ⇪ ⌫ ⌘ ╳ ;) ça vous plaît ? Et la magie de l’Unicode fait que je n’ai même pas besoin de mettre le code HTML dans ma page, je colle directement les glyphes.

Icônes

☕ ❄ ♻ ⚡ ⚠ ☢ ☠ ✈ ✇ ☎ 〒 ✓ ✔ ☐ ☑ ⚑ ♥ ✝ ✚ ╳ ⌧ ☤ ☮ ♂ ♀ ★ ☂ ⇋ ☈ ⤳ ⤼ ⤽   ◄ ▶

Symboles techniques

 ⌘ ⌥ ⌫ ␡ U ⌦  ⎋ ␛ ⏎ ↩ ↑ ↓ ← → ⇥ ⇧ ⇪ ⏏ ⌽

Musique

♭ ♯ ♮ ♩ ♪ ♫ ♬

Scientifique

×(ce n'est pas la lettre x)
⌃(ce n'est pas un accent circonflexe ^)
÷ ∕ ∑ λ ∩ ∪ µ ∫ ∴ ≠ ≈ ≉ ≤ ≥ ⊂ ⊃ ⊨ ⊭ ⩵ ⩶ ␀ ␖ ␆

Ecriture

‽ ‼ ⁇ ⁈ ⁉ ¶ † ‡ 〃 〆 ‵ ‶ ¤ …

Bien entendu, ce n’est qu’un petit aperçu des milliers de possibilités que nous offre l’unicode, si vous voulez quelque chose de plus exhaustif, je vous invite à aller voir la table des caractères Unicode ou l’encyclopédie des émojis.

D’autres pistes

Bien entendu il y a d’autres pistes que les caractères Unicode ou les images. Il est par exemple possible d’intégrer les images encodés en base64, non plus comme fichiers externes, mais directement comme une chaine de caractères dans le HTML ou dans le CSS en background-image. Dans la mesure du possible, utilisez des images au format SVG, c’est léger et ça ne pixelise pas, même sur les écrans retina.

Afin de trouver des icônes en SVG, vous pouvez vous appuyer sur deux moteurs de recherche spécialisés : Flaticon et The noun project.

Une autre solution, qui offre les mêmes avantages que les éléments textuels – c’est à dire de pouvoir être agrandis sans aucune perte de qualité et décliné dans toutes les couleurs via le CSS, sont les sets d’icônes. Grâce à la propriété font-face du CSS3, il est possible d’intégrer n’importe quel type de police dans vos pages. Et les sets d’icônes vectoriels existent entre autres au format polices (même si le SVG est aujourd’hui préféré).

Les temps de chargement ne sont pas aussi bons qu’avec les deux autres techniques mentionnées (il faut charger un élément externe et faire une requête HTTP supplémentaire), mais c’est très souple. De plus, si vous vous reposez sur un CDN, pour fournir un set d’icône répandu, il y a de forte chances que les icônes soient déjà présentes dans le cache du navigateur de vos visiteurs. Cela signifie qu’ils n’auront donc même pas à la re-charger.

Quelques sets d’icônes professionnels :

• IconSVG des icônes 100% SVG et personnalisables,
• Ionicons est un set d’icône open source présentant deux styles : iOS et Android. Par ailleurs, les icônes sont disponibles en SVG ou à insérer en web components,
• Feather icons un autre set d’icônes SVG open source,
• Simple icons icônes SVG des logos de très nombreuses marques, services et produits,
• Transformicons il s’agit là d’icônes animées. Elles sont composées d’éléments HTML, de CSS et un soupçon de JavaScript permet de déclencher l’animation,
• Font Awesome probablement le set d’icônes le plus populaire. Initialement disponible en police seulement – d’où sont nom font awsome – les versions modernes permettent l’usage du SVG, prévoient l’import via npm, offrent des composants Angular, React, Vue.js etc.