Iconify: Open-Source-Icon-Bibliothek

• Integrierte Icon-Plattform, auf der sich verschiedene Open-Source-Icon-Sets an einem Ort durchsuchen und nutzen lassen
• Bietet 204 Sets in mehreren Kategorien mit rund 280.000 Icons
• Unterstützt das Abrufen von Icon-Informationen sowie die Generierung von SVG/CSS per API. Bietet außerdem eine Search API zur Nutzung in Plugins für Figma/Sketch
• Jedes Set wird unter verschiedenen offenen Lizenzen wie Apache 2.0, MIT, CC BY und GPL veröffentlicht
• Enthält Icons wichtiger Designsysteme wie Google Material, Fluent UI, Font Awesome, Tabler und HeroIcons

---

Überblick über Iconify

• Iconify ist ein zentrales Repository für Open-Source-Icon-Sets, in dem sich über eine webbasierte Oberfläche verschiedene Icons durchsuchen lassen
• Jedes Icon-Set besteht aus Name, Lizenztyp, Anzahl der Icons und individuellen Links
• Nutzer können nach Kategorien filtern und Sets aus Material, UI, Emoji, Logos, Programming usw. auswählen

Wichtige Icon-Kategorien

• Material-Familie: 6 Sets wie Material Symbols und Material Design Icons mit jeweils bis zu mehr als 15.000 Icons
• UI-24px-Sets: Mehr als 50 Sets wie Solar, Tabler, Remix, Lucide und Iconoir mit verschiedenen Stilen und Größen
• UI-16px-/32px-Sets: 18 Sets wie Carbon, IonIcons, Ant Design Icons und Bootstrap Icons
• UI Other / Mixed Grid: Enthält zahlreiche große Sets wie Fluent UI System Icons (18.959) und Phosphor (9.072)
• UI-Multicolor-Sets: Bietet farbige Icons wie Streamline, Fluent Color und IconPark
• Programming-Sets: 9 auf Entwicklungsumgebungen spezialisierte Sets wie VSCode Icons, Devicon und File Icons
• Logos-Sets: 15 marken- und logozentrierte Sets wie Simple Icons, SVG Logos und Web3 Icons
• Emoji-Sets: 11 Sets wie OpenMoji, Twemoji und Noto Emoji
• Flags / Maps-Sets: 7 Sets wie Circle Flags und Flag Icons
• Thematische Sets: 8 themenbezogene Sets wie Game Icons, Health Icons und Weather Icons
• Archive / Unmaintained-Sets: Archiviert 30 Sets älterer Versionen wie Font Awesome 4~6 und Eva Icons

Lizenzvielfalt

• Jedes Set wird unter verschiedenen offenen Lizenzen wie Apache 2.0, MIT, CC BY, GPL und OFL (Open Font License) veröffentlicht
• Einige Sets können unter CC0 (Public Domain) oder Unlicense frei verwendet werden
• Da die Lizenzinformationen klar angegeben sind, lässt sich die kommerzielle Nutzung und die Möglichkeit zur Bearbeitung leicht prüfen

Beispiele repräsentativer Icon-Sets

• Fluent UI System Icons: MIT-Lizenz, 18.959 Icons
• Material Symbols Light: Apache 2.0, 15.180 Icons
• Tabler Icons: MIT, 5.986 Icons
• Simple Icons: CC0, 3.379 Markenlogos
• OpenMoji: CC BY-SA 4.0, 4.449 Emojis

Praktischer Nutzen

• Sichert konsistenten Zugriff auf Icons über verschiedene Designsysteme und Frameworks hinweg
• Entwickler und Designer können Stil und Lizenz passend zu den Projektanforderungen sofort auswählen
• Eine Ressourcenplattform, die Wiederverwendung und Standardisierung von Icons im gesamten Open-Source-Ökosystem fördert
• Weitere Informationen zu Nutzung sowie API-/Plugin-Infos finden sich auf der offiziellen Dokumentationsseite

[GN⁺]

Hacker-News-Kommentare

• Über API kann Iconify Icon-SVGs direkt abrufen
  Ich erstelle oft Architekturdiagramme mit D2, und zusammen mit Iconifys riesiger Icon-Bibliothek werden sie visuell deutlich reichhaltiger
  Zum Beispiel kann man in einem Diagramm, das Docker und Kubernetes verbindet, jeweils die entsprechenden SVG-Icons angeben

• Einige SVGs sind animiert und durchsuchbar
  Ich habe diese Icons in meinem Offline-Texteditor wrifocus.bounded.cc verwendet und war mit dem Ergebnis sehr zufrieden

  • Ich frage mich, welches Icon-Set verwendet wurde. Wenn ich nach „contains animations“ filtere, sehe ich nur so etwas wie Loader- und Wetter-Icon-Sets
  • Die Animation des rotierenden Zahnrads beim Einstellungs-Icon ist besonders cool. Auch der Editor selbst ist beeindruckend
    Mich würde interessieren, ob man ihn auch online mit serverseitiger Datenspeicherung nutzen kann und warum er als offline-basierte Browser-Anwendung entwickelt wurde
  • Danke fürs Teilen. Ich würde auch gern wissen, ob man das Projekt self-hosted betreiben kann

• icones.js.org ist eine gute Seite, um solche Icons zu durchsuchen

• Ich denke darüber nach, einen Artikel zum Thema Icon-Optimierung zu schreiben
  Es ist frustrierend zu sehen, wenn Websites Icons nicht inline einbinden und dadurch das Layout springt

  • Stimme zu. Inline-Icons sind ein guter Ansatz, aber die DOM-Größe kann dadurch wachsen
    Je nach Komplexität der Icons oder wie oft sie wiederverwendet werden, kann lazy loading manchmal besser sein
    Im Kern entsteht das Problem dadurch, dass der Platz nicht korrekt reserviert wird
  • Das Setzen von width/height-Attributen ist ebenfalls eine gute Lösung. Auch aspect-ratio wird oft empfohlen
    Allerdings sind Inline-Icons dann nicht cachebar
    Dazu passend: web.dev-Artikel zur CLS-Optimierung

• Link zur vorherigen Diskussion: Debatte vom September 2024

• Großes Lob für dieses Projekt. Ich nutze es täglich in fast allem, was ich baue
  Ich war überrascht zu sehen, dass es für das k3s-Projekt devicon sowohl in einer Farbversion als auch in einer monochromen Version gibt

• Pictogrammers hat einen kleinen Vorteil
  Für Material-Icons liefert es direkt den Home-Assistant-Code, sodass man den benötigten Code mit einem Klick bekommt

• Als weitere großartige Icon-Quelle empfehle ich The Noun Project
  Dort gibt es eine Mischung aus kostenlosen, CC-BY-3.0- und kostenpflichtig lizenzierten Icons

  • Ohne Bezahl-Abo ist es allerdings mühsam, weil man unnötigen Code manuell aus dem SVG entfernen muss

• Verschiedene Antworten auf die Frage nach der besten Icon-Bibliothek

  • Persönlich finde ich, dass das famfamfam-Silk-Icon-Set um 2005 seinen Höhepunkt erreicht hatte
    Schade war, dass es weder hochauflösende noch SVG-Versionen gab, aber heutzutage ließe sich das vielleicht mit KI ausgleichen
    Ansehen / Download
  • Ich empfehle Lucide
  • Ich mag Phosphor Icons. Ansonsten nutze ich im Grunde Material UI Icons
  • Ich verwende FlatIcon häufig hauptsächlich für Game Development
  • SVGRepo ist benutzerfreundlich, weil man Strichstärke, Farbe usw. direkt anpassen kann

• Meine Seite universymbols.com kann verschiedene Icon-Sets von Iconify mit KI-Bildmodellen erweitern
  So kann man zusätzlich zu den bestehenden großen Sets auch etwas originellere Icon-Sets erstellen