Sie suchen prägnante Icons für Ihre Website? Hier werden Sie fündig Sie suchen prägnante Icons für Ihre Website? Hier werden Sie fündig

Sie suchen prägnante Icons für Ihre Website? Hier werden Sie fündig

Icons auf Websites erleichtern die Navigation, lockern die Inhalte auf und sind als Gestaltungsmittel unverzichtbar. Zahlreiche Plattformen stellen kostenlose Piktogramme zur Verfügung. Erfahren Sie hier, wie Sie passende Icons für Ihre Website finden können.

Mauro Landolt Mauro Landolt · Head of Communication

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.

Icons wie diese finden sich zu Tausenden auf Plattformen wie The Noun Project, flaticon oder GraphicRiver.

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.

Anordnung von Bildern zur Veranschaulichung einer schönen Website über Reisefotografie Anordnung von Bildern zur Veranschaulichung einer schönen Website über Reisefotografie

So einfach wie möglich zur neuen Website?

Mit unserem Website-Baukasten «Sites» stellen Sie in wenigen Schritten und ohne technische Vorkenntnisse Ihre eigene Website selber zusammen. Ganz einfach!

Sites 30 Tage kostenlos testen Sites 30 Tage kostenlos testen