Das große Dr. Web Icon-Set: 970 Icons, im SVG-Format, kostenlos.
Das große Dr. Web Icon-Set enthält über 970 vollständig anpassbare Icons. Das Set besteht aus einzelnen SVG-Dateien, die allesamt im Browser, in Photoshop, Illustrator oder im kostenlosen SVG Path Editor editiert werden können.
Es mangelt sicher nicht an guten und auch kostenlosen Iconsets die man für eigene Zwecke anpassen und einsetzen kann. Aber manchmal muss oder soll es dann doch mal etwas Eigenes und Individuelles sein. Gerade die Entwicklung von Icons ist eine anspruchsvolle Sache. Sie müssen möglichst einfach in der Gestaltung sein und dennoch eine eindeutige und klar verständliche Botschaft vermitteln. Dazu kommt, dass Icons innerhalb eines Sets ein einheitliches Aussehen haben müssen.
Dieses Icon-Set kannst du frei verwenden und einsetzen (MIT-Lizenz), also auch für kommerzielle Zwecke benutzen. Die Weitergabe des Icon-Sets ist ebenso erlaubt.
Das Icon-Set wurde von Paweł Kuna erstellt.
Vielen Dank für’s Herunterladen und viel Spaß beim Einsatz des Icon-Sets!
— Michael Dobler & Markus Seyfferth
P.S. Fragen? Schreib uns an redaktion [at] drweb.de
Alle Icon-Sets, die du kennen solltest
Einerseits wird das Netz immer visueller und selbst kürzeste Textpassagen werden mit einem Bild unterstrichen. Andererseits müssen wir stark auf die Ladezeiten achten, um weder Besucher noch Google zu vergrämen. Mit der Entwicklung des Responsive Web ist eine dritte Komponente hinzu gekommen: die Fähigkeit einer Grafik, mit den verschiedensten Auflösungen klar zu kommen.
SVGs, also Scalable Vector Graphics, sind die Lösung. Kleine Dateigrößen und eine flexible Anpassung an die Größe des Screens sind hier gegeben. Wir haben die schönsten Online-Tools und Icon-Sets gesammelt.
Hero Icons
Heroicons ist ein Set von knapp dreihundert Icons, die speziell für kompaktere Benutzeroberflächen entworfen wurden.
Diese Icons sind als Figma-Datei verfügbar und wurden von Steve Schoger entworfen. Ihre minimale Größe macht sie ideal für Benutzeroberflächen, in denen jeder Pixel zählt.
Durch die Verfügbarkeit als Figma-Datei können Designer und Entwickler die Icons leicht in ihre Projekte integrieren und anpassen, was den Prozess für Designagenturen deutlich vereinfacht und beschleunigt.
Blendicons
Blendicons bietet über 200.000 Icons, die kostenlos in verschiedenen Dateiformaten wie SVG, PNG, PDF, HTML, JSX, CSS und Base64 heruntergeladen werden können. Die Icons decken eine breite Palette von Kategorien ab und eignen sich hervorragend für Designer und Entwickler, die nach vielseitigen Grafikelementen für ihre Projekte suchen.
Tabler Icons
558 vollständig anpassbare kostenlose SVG-Symbole. (MIT-Lizenz)
IcoMoon
Die IcoMoon App sieht zwar langweilig aus, hat es aber in sich: IcoMoon ermöglicht die Erstellung und Verwaltung von benutzerdefinierten Icon-Sets.
Benutzer können aus einer umfangreichen Bibliothek von vorgefertigten Icons wählen oder eigene Vektorgrafiken hochladen. Diese Flexibilität macht IcoMoon zu einem wertvollen Werkzeug für Webentwickler und Webdesign-Agenturen.
Noun Project
Das Noun Project ist riesige Sammlung von Icons und Symbolen. Designer und Entwickler, die auf der Suche nach visuellen Darstellungen für verschiedene Konzepte und Objekte sind, werden hier mit Sicherheit fündig.
Benutzer können Icons entweder kostenlos unter Angabe des Urhebers verwenden oder durch den Kauf eines Abonnements uneingeschränkten Zugang ohne Urheberangabe erhalten.
CSS Icons: Piktogramme aus purem CSS, auf Wunsch auch animiert
Die frei verwendbare Web-App „CSS Icons” bringt Ihnen nicht nur Piktogramme aus purem CSS frei Haus, sondern erlaubt Ihnen auch noch, animierte Übergänge zwischen jeweils zwei beliebigen Symbolen des Pakets zu definieren.
Auch für den nicht so detailverliebten Allerweltsdesigner hilfreich, ist das Projekt „CSS Icons” mit 700+ Piktogrammen.
CSS Icon: Codeschnipsel zum Auskopieren
In der neuen Version von „CSS Icons” finden Sie derzeit rund 700 Symbole. Zhang verspricht, weitere regelmäßig zuzufügen. Die Web-App bietet im Wesentlichen zwei Funktionalitäten. Klicken Sie ein einzelnes Icon an, öffnet sich rechts von der Übersicht ein Detailfenster, aus welchem Sie den kompletten erforderlichen Quellcode für dieses Icon per Copy-and-Paste auskopieren können.
Um ein bisschen mit der Konfiguration zu spielen, besteht zudem die Möglichkeit, mit den Code-Snippets rüber zu Codepen zu wechseln und dort im Browser zu experimentieren.
Lottiefiles: Leichte, skalierbare Animationen selber erstellen
LottieFiles ist ein Open-Source-Format für SVG-basierte Animationen, welche qualitativ hochwertig sind und welche du selber anpassen kannst. Auch der Pagebuilder Elementor unterstützt das Format.
SVG Morpheus
Wer etwas mehr Bewegung in seinen Icons sehen möchte nutzt SVG Morpheus, um zwei oder mehr Icons von dem einen in das andere übergehen zu lassen.
