Iconify : bibliothèque d’icônes open source

• Plateforme unifiée d’icônes permettant d’explorer et d’utiliser en un seul endroit divers jeux d’icônes open source
• Propose 204 jeux classés en plusieurs catégories, pour environ 2800 icônes
• Prend en charge la récupération d’informations sur les icônes via API ainsi que la génération de SVG/CSS. Une API de recherche est également fournie, exploitable dans des plugins pour Figma/Sketch
• Chaque jeu est distribué sous diverses licences open source comme Apache 2.0, MIT, CC BY ou GPL
• Inclut les icônes des principaux design systems comme Google Material, Fluent UI, Font Awesome, Tabler et HeroIcons

---

Présentation d’Iconify

• Iconify est un dépôt central de jeux d’icônes open source qui permet d’explorer une grande variété d’icônes via une interface web
• Chaque jeu d’icônes comprend un nom, un type de licence, un nombre d’icônes et des liens individuels
• Les utilisateurs peuvent filtrer par catégorie pour choisir des jeux Material, UI, Emoji, Logos, Programming, etc.

Principales catégories d’icônes

• Famille Material : 6 jeux, dont Material Symbols et Material Design Icons, avec jusqu’à plus de 1500 icônes
• Jeux UI 24px : plus de 50 jeux, dont Solar, Tabler, Remix, Lucide et Iconoir, avec des styles et tailles variés
• Jeux UI 16px / 32px : 18 jeux, dont Carbon, IonIcons, Ant Design Icons et Bootstrap Icons
• UI Other / Mixed Grid : inclut de nombreux grands jeux comme Fluent UI System Icons (18,959) et Phosphor (9,072)
• Jeux UI Multicolor : propose des icônes colorées comme Streamline, Fluent Color et IconPark
• Jeux Programming : 9 jeux spécialisés pour les environnements de développement, comme VSCode Icons, Devicon et File Icons
• Jeux Logos : 15 jeux centrés sur les marques et logos, dont Simple Icons, SVG Logos et Web3 Icons
• Jeux Emoji : 11 jeux, dont OpenMoji, Twemoji et Noto Emoji
• Jeux Flags / Maps : 7 jeux, dont Circle Flags et Flag Icons
• Jeux thématiques : 8 jeux par thème, comme Game Icons, Health Icons et Weather Icons
• Jeux Archive / Unmaintained : archivage de 30 jeux d’anciennes versions, dont Font Awesome 4~6 et Eva Icons

Diversité des licences

• Chaque jeu est distribué sous diverses licences open source comme Apache 2.0, MIT, CC BY, GPL et OFL(Open Font License)
• Certains jeux peuvent être utilisés librement sous CC0(domaine public) ou Unlicense
• Les informations de licence étant indiquées clairement, il est facile de vérifier la possibilité d’usage commercial et de modification

Exemples de jeux d’icônes représentatifs

• Fluent UI System Icons : licence MIT, 18,959 icônes
• Material Symbols Light : Apache 2.0, 15,180 icônes
• Tabler Icons : MIT, 5,986 icônes
• Simple Icons : CC0, 3,379 logos de marques
• OpenMoji : CC BY-SA 4.0, 4,449 emoji

Intérêt pratique

• Garantit une accessibilité cohérente aux icônes dans divers design systems et frameworks
• Permet aux développeurs et designers de choisir immédiatement un style et une licence adaptés aux besoins du projet
• Plateforme de ressources qui favorise la réutilisation et la standardisation des icônes dans l’ensemble de l’écosystème open source
• Voir la page de documentation officielle pour les usages ainsi que les informations sur l’API et les plugins

[GN⁺]

Commentaires sur Hacker News

• Iconify permet de récupérer directement des SVG d’icônes via une API
  Je crée souvent des diagrammes d’architecture avec D2, et les utiliser avec l’immense bibliothèque d’icônes d’Iconify les rend visuellement bien plus riches
  Par exemple, dans un diagramme reliant Docker et Kubernetes, on peut attribuer à chacun sa propre icône SVG

• Certains SVG ont des animations et ils sont aussi recherchables
  J’ai utilisé ces icônes pour l’éditeur de texte hors ligne wrifocus.bounded.cc, et j’ai été très satisfait du résultat

  • Je me demande quel jeu d’icônes a été utilisé. En filtrant par « contains animations », je ne vois guère que des ensembles de loaders et d’icônes météo
  • L’animation de rotation de l’engrenage de l’icône des paramètres est particulièrement réussie. L’éditeur lui-même est aussi impressionnant
    Je me demande s’il est aussi possible de l’utiliser en ligne avec stockage des données sur un serveur, et pourquoi il a été conçu comme une application hors ligne basée sur le navigateur
  • Merci pour le partage. J’aimerais aussi savoir si le projet peut être exploité en self-hosted

• icones.js.org est un très bon site pour rechercher ce type d’icônes

• Ça me donne envie d’écrire un article sur l’optimisation des icônes
  Quand je vois des sites web qui n’intègrent pas les icônes en inline et provoquent des décalages de mise en page, ça me frustre

  • D’accord. Les icônes inline sont une bonne approche, mais elles peuvent faire grossir le DOM
    Selon la complexité des icônes ou leur fréquence de réutilisation, le lazy loading peut parfois être préférable
    Au fond, le problème vient surtout d’un espace réservé incorrectement
  • Définir les attributs width/height est aussi une bonne solution. aspect-ratio est également souvent recommandé
    En revanche, les icônes inline deviennent impossibles à mettre en cache
    Référence connexe : l’article de web.dev sur l’optimisation du CLS

• Lien vers une discussion précédente : débat de septembre 2024

• Beaucoup d’éloges pour ce projet. Je l’utilise tous les jours dans presque tout ce que je crée
  J’ai été surpris de voir que, pour le projet k3s, il existe dans devicon à la fois une version en couleur et une version monochrome

• Pictogrammers a un petit avantage
  Il fournit directement le code Home Assistant pour les icônes Material, ce qui permet d’obtenir le code nécessaire en un clic

• Je recommande aussi The Noun Project comme autre excellente source d’icônes
  On y trouve un mélange d’icônes gratuites, sous CC-BY-3.0 et sous licence payante

  • En revanche, sans abonnement payant, il est pénible de devoir retirer manuellement le code inutile des SVG

• Diverses réponses à la question de la meilleure bibliothèque d’icônes

  • Personnellement, je pense que le jeu d’icônes famfamfam Silk vers 2005 représentait le sommet du genre
    C’était dommage qu’il n’existe ni en haute résolution ni en SVG, mais aujourd’hui l’IA pourrait peut-être combler ce manque
    Voir / Télécharger
  • Je recommande Lucide
  • J’aime bien Phosphor Icons. Sinon, j’utilise en général les Material UI Icons
  • Pour ma part, j’utilise souvent FlatIcon surtout pour le développement de jeux
  • SVGRepo est convivial car on peut ajuster directement l’épaisseur du trait, les couleurs, etc.

• Mon site universymbols.com permet d’étendre plusieurs jeux d’icônes d’Iconify avec des modèles d’images IA
  Cela permet de créer des jeux d’icônes plus originaux, au-delà des grands ensembles existants