Icons, auch Piktogramme genannt, sind im Internet überall anzutreffen: auf Websites, in Apps, in Chat-Programmen oder in Online-Shops. Die kleinen Symbole lockern Texte und Inhalte auf, erleichtern Nutzenden die Navigation und haben oft eine erklärende Funktion. Dank ihren vielseitigen Einsatzmöglichkeiten sind Icons unersetzliche, visuelle Kommunikationshilfen.
Wer eine eigene Webseite gestaltet und im Internet nach passenden Icons sucht, wird relativ schnell fündig. Zahlreiche Plattformen bieten Piktogramme in verschiedenen Designs an. Dabei wird meist zwischen ausgefüllten Icons und solchen mit Umriss unterschieden. Auch einfarbige und mehrfarbige Piktogramme sind gebräuchliche Kategorien. Ein Teil der Auswahl auf solchen Plattformen kann, unter Einhaltung der Lizenzvorgaben, in der Regel kostenlos heruntergeladen werden. Andere Icons sind wiederum kostenpflichtig.
In diesem Artikel stellen wir einige dieser Plattformen kurz vor und geben Antworten auf verschiedene Fragen, die sich im Zusammenhang mit der Verwendung von Icons aus dem Internet stellen: Was sind Icon Fonts? Wie sind Lizenzen bei Icons geregelt? Und wie binde ich Icons auf meiner Website ein?
Icon Fonts: verbreitet, skalierbar und nutzerfreundlich
Bei Piktogrammen zum Herunterladen handelt es sich meist um sogenannte Icon Fonts – der heute am häufigsten verwendete Icon-Typ. Solche Icon Fonts sind im Grunde nichts anderes als Webfonts, sprich digitale Schriften. Anstelle von Buchstaben oder Zahlen nutzen diese Icon Fonts Symbole im Schriftsatz. Technisch eingebunden sind sie jedoch wie ganz normale Webschriften. Weil Icon Fonts in der Regel vektorbasiert aufgebaut sind, lassen sie sich grafisch skalieren. Die Zeichen können dadurch ohne Auflösungsverluste vergrössert und verkleinert werden, ihre Farben können angepasst werden und sogar Rotationen sind möglich. Icon Fonts werden mittels CSS in den Quelltext eingebunden.
Durch ihre Skalierbarkeit eignen sich Icon Fonts auch bestens für die Verwendung auf mobilen Websites. Ihr Hauptvorteil liegt jedoch darin, dass Websites, auf denen sie eingesetzt werden, schneller laden. Der Grund dafür ist, dass bei Icon Fonts nur der Zeichensatz und die entsprechende CSS-Datei geladen werden, statt ganzer Grafiken oder vieler grosser Symbole. Dies reduziert die Anzahl Anfragen beim Webserver und damit den Zeitaufwand für das Laden der Seite.
Ein Nachteil von Icon Fonts ist, dass sie, wie das bei vielen Schriftarten manchmal der Fall ist, nicht in allen Browsern in der gleichen Qualität dargestellt werden. Insbesondere bei kleineren oder detaillierten Piktogrammen kann sich dies bemerkbar machen. Farben von Icons lassen sich zwar ändern, aber für Designer ist gerade die Kreation mehrfarbiger Icons oft mit grossem Aufwand verbunden.
Info:
Wo findet man im Internet gutes Bildmaterial und attraktive Schriften für die eigene Website? Lesen Sie dazu unsere beiden Blogartikel zum Thema:
Bilder für die eigene Webseite? Diese Angebote sollten Sie kennen
Damit Ihre Website gut lesbar ist: Hier finden Sie Schriften
Hier finden Sie kostenlose Icons zum Herunterladen
Nachfolgend haben wir eine Übersicht über einige bekannte Icon-Datenbanken zusammengestellt. Im Internet finden sich zahlreiche weitere Beispiele. Viele dieser Plattformen bieten sowohl kostenpflichtige als auch kostenlose Piktogramme zum Herunterladen an. Die meisten stellen die Icons zusammengefasst als sogenannte Icon-Packs, also Pakete, zur Verfügung, teils können Nutzende aber auch einzelne Icons beziehen.
- The Noun Project
Die aus Los Angeles stammende Plattform The Noun Project ist eine umfassende Sammlung von Symbolen aller Art. Wer Piktogramme für die eigene Website sucht, hat hier die Wahl aus über drei Millionen Icons, die unter einer Creative-Commons-Lizenz heruntergeladen und genutzt werden können. - flaticon
Die Icon-Sammlung von flaticon ist mit rund 3,5 Millionen Piktogrammen ebenfalls sehr umfangreich. Mit einer kostenlosen Lizenz ist allerdings nur eine eingeschränkte Nutzung der Plattform möglich. So können Gratis-Icons beispielsweise nur im PNG-Format heruntergeladen werden. Für nicht-professionelle User dürfte dies aber meist genügen. - Dribble
Deutlich mehr als eine reine Icon-Sammlung ist Dribble. Auf der bekannten Plattform präsentieren Designer aus der ganzen Welt ihre Arbeiten und inspirieren sich gegenseitig. Daneben werden Icons, Fonts und andere grafische Objekte zum Download angeboten – die Nutzung ist zwar nicht kostenlos, ein Besuch der vielseitigen Plattform lohnt sich aber allemal. - Font Awesome
Die Plattform Font Awesome dagegen geniesst nicht nur wegen ihrer beliebten, kostenlosen Icon-Sammlung einen hohen Bekanntheitsgrad. Sehr populär ist auch das eigene, äusserst benutzerfreundliche Content Delivery Network (CDN), welches eine einfache Einbettung von Icons in Webseiten ermöglicht. - iconmonstr
Gründer und Betreiber der Icon-Sammlung iconmonstr ist der deutsche Designer Alexander Kahlkopf. Seine Plattform bietet unter einer eigenen Lizenz kostenlos einige Tausend Icons zum Herunterladen an und wächst kontinuierlich weiter. - ICONS8
Auf ICONS8 haben Nutzende die Wahl aus mehreren 10'000 Icons. Der Download ist kostenlos, Voraussetzung ist allerdings, dass bei der Verwendung auf ICONS8 verlinkt wird. Nebst Piktogrammen umfasst das Angebot auch Fotos, Illustrationen und sogar Musik. - Vecteezy
Eine ebenfalls sehr umfangreiche und lohnende Quelle für Gestalterinnen und Gestalter ist Vecteezy. Neben Icons stehen den Usern hier auch viele Bilder und Filme zum kostenlosen Download zur Verfügung. - GraphicRiver
GraphicRiver ist Teil des australischen Design- und Multimedia-Netzwerks Envato, das zahlreiche digitale Marktplätze betreibt (darunter codecanyon.net oder themeforest.net). Designer aus der ganzen Welt bieten auf GraphicRiver nebst Icons auch Illustrationen und Grafiken an. Die Angebote sind – im Unterschied zu anderen Plattformen – jedoch allesamt kostenpflichtig. - Linearicons
Gründer von Linearicons ist ein Icon-Fonts-Designer, der unter dem Pseudonym «Perxis» arbeitet. Von der Plattform kann ein kostenloses Icon-Pack unter einer Creative-Commons-Lizenz heruntergeladen werden. Erforderlich ist einzig, dass Plattform und Betreiber verlinkt werden. - Streamline
Auf Streamline stehen für Designer nicht nur über 100'000 Icons, sondern auch Emojis und andere Grafikelemente zum Download zur Verfügung. Allerdings kann nur ein Teil des Angebots der Plattform kostenlos genutzt werden.
Urheberrechte: Was gilt bei Icons aus dem Internet?
Grundsätzlich sind alle Inhalte im Internet urheberrechtlich geschützt. Dies gilt für Icons ebenso wie für Fotos, Schriften oder auch Musik. In der Schweiz erlischt der Urheberrechtsschutz 50 bis 70 Jahre nach dem Tod des Urhebers.
Werden urheberrechtlich geschützte Inhalte ausschliesslich für private Zwecke heruntergeladen, fällt dies in der Schweiz unter den gesetzlich erlaubten Privatgebrauch. Dies gilt sogar beim Download von grundsätzlich illegalen Plattformen. Das Hochladen von geschützten Inhalten ist jedoch verboten – auch für den Privatgebrauch. Und dabei spielt es keine Rolle, ob Gewinnabsichten verfolgt werden oder nicht.
Auch wer ein Icon-Pack herunterladen und die Icons auf der eigenen Webseite nutzen, sprich hochladen will, benötigt im Grunde eine entsprechende Erlaubnis des Urhebers (bei Piktogrammen in der Regel der Designer). Die Erlaubnis wird in Form einer Lizenz erteilt. Beim Download von Icon-Packs kommen meist Standardlizenzen zum Zug. Diese legen fest, wie und zu welchem Preis die Icons verwendet werden dürfen – beispielsweise, ob eine kommerzielle Nutzung erlaubt ist.
Wer ein Icon für Zwecke nutzen will, welche über die in der Standardlizenz definierten Nutzungsrechte hinausgehen, benötigt eine erweiterte Lizenz, in der die zusätzlichen Nutzungsarten detailliert geregelt sind. Während Standardlizenzen oft kostenlos erteilt werden, sind erweiterte Lizenzen in der Regel kostenpflichtig. Viele der oben erwähnten Icon-Plattformen ermöglichen die Nutzung von Icons sowohl im Rahmen kostenloser Standardlizenzen als auch im Rahmen kostenpflichtiger erweiterter Lizenzen.
Wie baue ich Icons in meine Webseite ein?
Die meisten der oben vorgestellten Plattformen erlauben den Download von Icons als vektorbasierte SVG-Files sowie als PNG-Bilddateien. In den gebräuchlichen Content-Management-Systemen (CMS) lassen sich in der Regel beide Dateitypen einbinden. Mit SVG-Dateien ist die Darstellungsqualität höher, aber auch PNG-Dateien erfüllen oft ihren Zweck. Bei einigen Plattformen ist es zudem möglich, die Icons sogar noch vor dem Download mittels hexadezimaler Farbcodes in einem beliebigen Farbton einzufärben. Dadurch kann sichergestellt werden, dass sie farblich zum Design der Website passen.
Die Einbindung in die eigene Website erfolgt entweder manuell oder mithilfe eines Plug-ins. Einige Icon-Anbieter, wie beispielsweise Font Awesome, bieten ein eigenes Plug-in, mit dem sich Icons äusserst einfach in den Quellcode kopieren lassen. Weil dadurch Veränderungen am Code vorgenommen werden, ist es wichtig, dass zuvor eine Sicherheitskopie des Codes erstellt wird. Tipp: Einige CMS, darunter auch WordPress, bieten eine begrenzte Anzahl eigener Icons an, die sich sehr einfach implementieren lassen. Wer beispielsweise eine Webseite mit dem WordPress-Builder baut, hat dort Zugriff auf Piktogramme.
Webprojekte mit WordPress lassen sich bei Hostpoint – genauso wie auch Websites mit anderen CMS – sehr einfach aufsetzen und verwalten.
