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.

Zunächst einmal sollte man für die Gestaltung eine Anwendung wählen, welche möglichst flexibel ist. In Illustrator oder anderen Zeichenprogrammen gestaltete Icons sind vektorbasiert und können beliebig skaliert werden.

Das Icon Design

Raster festlegen für einheitliches Aussehen

Will man mehrere Icons gestalten oder gar ein umfangreiches Set, ist es wichtig, sich auf gemeinsame Nenner zu einigen, die alle Icons erfüllen. So sollten alle Icons denselben Grad an Detailgenauigkeit besitzen. Hier hilft es, sich ein Raster anzulegen, welches als Grundlage für alle zu zeichnenden Formen dient. Je komplexer die Gestaltung eines Icons sein soll, desto komplexer darf dann auch das Raster sein, an das sich die Formen auszurichten haben.

Dabei spielt es auch eine Rolle, in welcher Größe die Icons verwendet werden sollen. Die kleinste Icongröße hat üblicherweise eine Kantenlänge von 16 Pixel. Es folgen in der Regel Verdopplungen der Kantenlänge, also 32, 64 und 128 Pixel. Will man komplexe Icons auch in kleinen Größen darstellen, muss man bei den kleineren Versionen möglicherweise Anpassungen vornehmen, um den Grad der Detailgenauigkeit zu reduzieren.

Als Basis für eine komplexe Gestaltung legen wir ein Icon mit 128 Pixel Kantenlänge fest und definieren ein Raster von acht Pixeln mit je vier Unterteilungen. Wir erhalten somit ein Raster mit 16 mal 16 Feldern. Bei einer Darstellung von 16 Pixeln würde jedes Rasterfeld ein Pixel entsprechen.

Farben und Formen definieren

Als nächstes sollte man die Farben für die Icons festlegen. Grundsätzlich kann man natürlich aus dem Vollen schöpfen und sich aller Farben bedienen. In den meisten Fällen ist es jedoch sinnvoll, sich auf eine bis wenige Farben zu beschränken. So fördert man ein einheitliches Aussehen und verhindert, dass den Icons zu viel Aufmerksamkeit widerfährt. Aber je nach Einsatz kann das natürlich auch gewollt sein. In vielen Fällen werden Icons jedoch unterstützend eingesetzt und sollen selbst nicht im Zentrum der Gestaltung stehen.

In Illustrator ist es sinnvoll, Farben als globale Farbfelder anzulegen. Globale Farben haben den Vorteil, dass sich Änderungen dieser Farben in der Palette auch auf die Farben im Dokument auswirken.

Im nächsten Schritt sollte man sich Gedanken zu den Gundformen machen. Setzt man abgerundete Flächen und Kreise ein oder soll die Anmutung der Icons eher kantig sein? Will man ausschließlich Flächen oder Konturen einsetzen oder will man beides miteinander kombinieren? Bei Konturen sollte man die Linienstärke so festlegen, dass gerade komplexe Formen durch zu dicke Linien nicht „matschig“ wirken.

Individualität erzeugen

Für die nötige Prägnanz können ungewöhnliche, thematisch passende Bilder dienen. Individualität kann auch über die Art der Form erreicht werden. So kann ein Gestaltungsgrundsatz sein, Konturen nicht zu schließen. Außerdem können Konturen mit doppelter oder gepunkteter Linie gezeichnet werden. Bei Farben können Verläufe als grundsätzliches Element verwendet werden.

Zusätzlich kann Individualität durch Schatteneffekte oder runde Grundformen erzeugt werden. Bei allen Effekten, Formen und Farben gilt, dass sie einheitlich sein müssen und als einheitliches Element aller Icons zu verstehen sein sollten. Im Beispiel werden Icons mit Flächen und Konturen gezeichnet. Es gibt drei Pastellfarben, die jeweils in einer zusätzlichen helleren Variante vorhanden sind. Ecken und Linien sind leicht abgerundet.

Um Formen, Farben und Konturen leichter anwenden zu können, bietet es sich an, solche Vorgaben als Grafikstil zu speichern. Somit lassen sich zuvor im Grafikstil festgehaltene Vorgaben auf beliebige Formen anwenden.

Icons als Gruppen anlegen

Anders als das aktuelle Photoshop bietet Illustrator keine Möglichkeit, den Inhalt einer Zeichenfläche zu exportieren. Daher sollte man alle Icons auf einer Zeichenfläche platzieren. In jedem Fall sollte jedes Icon in einer Gruppe zusammengefügt werden. So hat man einen besseren Überblick und verhindert, dass Formen eines Icons versehentlich verschoben werden. Auch das Ein- und Ausblenden von Icons für das spätere Exportieren ist so einfacher.

Icons für verschiedene Größen anpassen

Wie bereits erwähnt, sollten bei Icons, die in sehr unterschiedlichen Größen eingesetzt werden, Anpassungen vorgenommen werden. So sollten komplexe Icons um Details reduziert werden, wenn diese auch sehr klein dargestellt werden sollen. Überflüssige Formen können weggelassen und andere Formen in ihrer Komplexität reduziert werden. Bei Sternen können beispielsweise die Anzahl der Zacken reduziert werden.

Auch die Konturenstärke sollte je nach Größe angepasst werden. So sollten Konturen nie dünner als ein Pixel sein. Wird eine Kontur bei einem 128 Pixel großen Icon in zwei Pixel angelegt, sollte bei der 16 Pixel großen Darstellung die Kontur auf mindestens ein Pixel vergrößert werden.

Export als SVG, PNG und Iconfont

Illustrator und die meisten anderen Zeichenprogramme können ins vektorbasierte SVG- und ins bitmapbasierte PNG-Format exportieren. Während das SVG-Format beliebig skalierbar ist, müssen beim PNG-Format die benötigten Größen individuell angelegt werden. Hier bietet es sich an, das jeweilige Icon als Smartobjekt in Photoshop zu platzieren. Dort können diese in verschiedene Auflösungen exportiert werden.

Hat man einfarbige Icons ohne Effekte wie Verläufe und Schatten, bietet sich auch ein Iconfont an. Dienste wie IcoMoon können SVG-Dateien importieren und daraus individuelle Webfonts generieren. So erhält man Icons in jedem möglichen Format und kann diese im eigenen Webprojekt integrieren.

Warum gibt es Icons?

Wenn wir von Icon reden, dann meinen wir nicht die kleinen handgemalten Holzbildchen mit christlichen Motiven, die es im osteuropäischen Christentum schon vor Jahrhunderten zu Berühmtheit gebracht haben. Wir sprechen vielmehr von kleinen Symbolen, die auf einem Bildschirm Objekte oder Funktionen repräsentieren.

In letzterer Lesbarart debütierten Icons 1981 auf dem Xerox Star 8010. Wenn du dich ein bisschen mit dem Xerox der Sechziger und Siebziger auseinandersetzt, wirst du dich wundern, für welche Innovationen das Unternehmen und sein Palo Alto Research Center verantwortlich zeichnen. Nicht zuletzt die Computermaus ist da zu nennen. Im Grunde stammt das komplette Konzept des sogenannten Personal Computers aus dem Hause Xerox.

Die Erfindung der Icons ist Teil der sogenannten Schreibtisch-Metapher (mancherorts auch Office-Metapher genannt), mit der der typische Schreibtisch digital abgebildet werden sollte. Und was ist klar, wenn du einen kompletten Schreibtisch auf den damals üblichen maximal 12 Zoll großen Bildschirmen abbilden sollst? Genau. Du hast nicht viel Platz.

Entsprechend waren Icons von Beginn an als kleine Piktogramme konzipiert, die möglichst unmissverständlich kommunizieren, welches Objekt oder welche Funktion sich hinter ihnen verbirgt. Diese Kommunikationsaufgabe in all ihrer Schwierigkeit haben wir auch heute noch zu bewältigen. Vorteilhaft ist indes, dass wir mittlerweile Icons als Vektorgrafiken erstellen und nicht auf Pixel-Icons festgelegt sind. Damit gelingt uns eine weitaus komplexere Darstellung dessen, was wir kommunizieren möchten.

Dennoch haben sich die meisten Fragestellungen, die es beim Icon-Design zu beantworten gilt, nicht wesentlich verändert. Die folgenden Tipps sollen dir helfen, wenn du Piktogramme erstellen willst oder musst.

Tipp #1: Icons müssen eindeutig und leicht erfassbar sein

Fangen wir mit dem wichtigsten Tipp an. Ein Icon ist nur dann gut, wenn der potenzielle Verwender sofort erkennen kann, was es symbolisieren soll. Ist das Icon zu künstlerisch oder abstrakt, wird das nicht gelingen. Der Nutzen ist dahin.

Daher ist es wichtig, nicht innovativ sein zu wollen; schon gar nicht disruptiv. Das beste Symbol ist eines, das der Nutzer kennt und bereits mit dem Objekt oder der Funktion assoziiert, die es auch abbilden soll.

Diese Überlegung führt uns zum Skeuomorphismus, den wir mit dem Flat-Design-Trend hinter uns gelassen glaubten. Google brachte mit dem Material-Design-Ansatz indes beide Welten zusammen, so dass ein Icon im Material Design immer noch flat, aber eben auch realitätsnah aussehen kann.

Willst du mit den Reminiszenzen an vergangene Zeiten nicht leben, hasst gar den Skeuomorphismus, dann rate ich dir, deinen Standpunkt zu überdenken. Hilft das nichts, kannst du dich immer noch assoziativer Kniffe bedienen und deine Icons an bekannter Funktionssprache orientieren. Ein Beispiel kann etwa das liegende Dreieck als etablierte Metapher für „Play” sein.

Zukunftsorientiertes Icon-Design sollte zudem Metaphern vermeiden, die zwar etabliert waren, es aber in absehbarer Zukunft mit großer Wahrscheinlichkeit nicht mehr sein werden. Ich hoffe, du kommst ohnehin nicht mehr auf die Idee, eine 3,5” Floppydisk als Icon einzusetzen. Solche Kandidaten gibt es einige, etwa das CD-Symbol.

Tipp #2: Zeichne nicht drauf los, sondern recherchiere gründlich

Wenn du Icons für einen Kunden oder einen bestimmten Verwendungszweck zeichnen willst, dann nimm dir Zeit für eine gründliche Recherche. Welche Bildsprache hat sich in dem angepeilten Bereich bislang schon etabliert? Welche Funktionsmetaphern bieten sich an?

Hier solltest du ganz selbstverständlich auch bei den freien und kommerziellen Anbietern von Icon-Sets vorbeischauen. Wir müssen das Rad nicht völlig neu erfinden. Solltest du beim Stöbern die perfekte Lösung finden, dann nimm sie. Du musst nicht zwanghaft selbst erstellen, was es so schon gibt.

Wenn du für einen Kunden gestaltest, könnte es sinnvoll sein, einen Teil seiner Marke oder seines Logos in das Design einzubeziehen. Verwendet dein Kunde etwa einen Stern im Logo, könntest du diesen Stern auch im Icon-Design berücksichtigen. Schau genau hin, was sich im konkreten Fall anbietet. Damit bringst du vollkommen unproblematisch eine persönliche Note in die Gestaltung und schützt deine Symbole vor dem Vorwurf der Beliebigkeit.

Lässt sich kein Markenbestandteil finden, kann es ein gemeinsames Thema tun. Bei einem Kunden aus der ölverarbeitenden Industrie könnte etwa der stets hinzugefügte Öltropfen als Thema für eine konsistente Darstellung passend sein. An dieser Stelle wird es bisweilen erforderlich sein, um die Ecke zu denken.

In diesem Zusammenhang ist auch das Betrachten kultureller Besonderheiten von Bedeutung. Manche Symbole, die wir metaphorisch für gelungen erachten, können woanders auf der Welt ganz andere Wirkung entfalten. Ein Beispiel dafür ist die Eule, Markenbestandteil des Social-Media-Helferleins Hootsuite. In westlichen Kulturen wird die Eule mit Weisheit, in östlichen mit Dummheit assoziiert. Hmm.

Von Beginn muss dir klar sein, dass du selbst bei einer nur kleinen Icon-Familie kaum in der Lage sein wirst, stets nur die beste Assoziation piktografisch umzusetzen. Es wird eine Gemengelage dabei herauskommen. Das eine Icon ist der kognitive Knüller, das andere erfordert etwas Nachdenken. Im Zweifel gestaltest du zugunsten der übergreifenden Konsistenz der Icon-Familie insgesamt.

Tipp #3: Weniger ist mehr – überlade deine Icons nicht

Wir befinden uns nicht in einem Wettbewerb um die komplexeste Darstellung auf dem kleinsten Raum. Wichtig ist die Verständlichkeit, nicht die möglichst detaillierte Darstellung des Symbols an sich. Letztlich ist dein Icon nur ein Mittel zum Zweck. Wenn du diesen Zweck mit der Kombinationen zweier einfacher Formen erreichen kannst, dann ist das kein Nachteil, sondern ein Vorteil.

Lass mich an dieser Stelle nochmal Einstein zitieren, der empfahl, die Dinge so einfach wie möglich zu machen, aber nicht einfacher. Die bereits erwähnten zwei Formen, aus denen dein Icon bestehen könnte, sind vollkommen in Ordnung, wenn dein Icon damit eindeutig erkennbar wird. Leider wird es vielfach eher so sein, dass ein derart simples Icon verschiedene Interpretationen zulässt. Erweitere dein Design dann solange, bis du eine eindeutige Interpretation des Symbols sichergestellt hast.

Bei der Gelegenheit solltest du es dir zur Angewohnheit machen, Icons selbst dann in möglichst kleinen Größen verwendbar zu halten, wenn du sie für den aktuellen Kundenauftrag ausnahmsweise ausschließlich in 512 x 512 Pixeln brauchst. Was du allerdings tun kannst, ist, die Komplexität der Icon-Darstellung in Maßen der Größe anzupassen. So könnte dein 512er Exemplar detailreicher sein als dein 64er Symbol. Dabei solltest du allerdings nicht übertreiben, denn wichtig ist, dass erkennbar bleibt, dass beide Exemplare zur gleichen Symbolfamilie gehören.

Tipp #4: Entscheide dich für einen Stil und bleibe dabei

Wenn du deine Icons eher skizzenhaft zeichnen willst, dann bleib über das gesamte Set dabei.

Wenn du dich für ein, zwei oder drei Farben entscheidest, dann verwende sie konsistent und immer in der gleichen Weise. Wenn du Perspektive oder Lichteinfall und Schattenwurf ins Spiel bringst, dann verwende immer die gleiche Perspektive und lass das Licht stets von der gleichen Seite kommen und auf die gleiche Seite den Schatten werfen.

Das ist doch logisch, magst du jetzt denken. Aber ich habe gerade eben in einem neuen Projekt die Situation vorgefunden, dass ein Icon auf einer Übersicht von sechs Icons ganz anders aussah als die anderen.

Warum hatte der Designer diesen Bruch begangen? Weil er dieses Icon für diesen Anwendungsfall eben für besonders geeignet hielt. Und er war fest davon überzeugt, dass es besser sei, dieses, aus seiner Sicht optimale, Icon selbst dann einzusetzen, wenn es zu den übrigen Symbolen nicht passte.

Ich war auf der Seite des Kunden, hatte also die Macht, seinen Entwurf abzulehnen und konnte schließlich gemeinsam mit ihm ein Icon erstellen, das besser mit den anderen harmonierte, in gewisser Weise aber tatsächlich einen Kompromiss darstellte.

Tipp #5: Arbeite auf das Pixel genau und verzichte auf Text

Gut, dieser Tipp besteht eigentlich aus zwei voneinander unabhängigen Empfehlungen. Aber beide gehören meiner Meinung nach in einen Anfänger-Ratgeber.

Text findet sich recht oft in schlechten Iconsets. Warum ist das so? Ganz einfach. Da wollte sich jemand sparen, eine gute Metapher zu finden. Du kennst das vielleicht, wenn du in geselliger Runde Pictionary spielst. Eigentlich soll der zu erratende Begriff nur mit zeichnerischen Mitteln visualisiert werden. Die Versuchung des Zeichnenden, mangels guter Ideen, schlicht Text zu verwenden, ist stets mit Händen zu greifen. Fakt aber ist, dass dein Icon schlicht nicht gut ist, wenn du es nicht schaffst, auf den Einsatz von Text zu verzichten.

Icons werden immer, nicht manchmal oder meistens, nein immer auf einem pixel-genauen Grid erstellt. Dabei ist das Grid für jedes Icon des geplanten Satzes identisch dimensioniert. Das muss aber nicht bedeuten, dass du nun alle Icons krampfhaft auf dieses Grid hin zeichnest. Vielmehr dürfen deine Symbole durchaus mal im Hoch-, mal im Querformat oder sogar diagonal angeordnet, einige zudem rund sein.

Dennoch bleibt das Grid quadratisch. Der Fixpunkt der Gestaltung ist die optische Mitte deines Piktogramms. Die optische Mitte muss nicht mit der grafisch und mathematisch bestimmbaren Mitte des Objekts übereinstimmen. Es geht hier um das optische Empfinden.

Um für verschiedene Formen gewappnet zu sein, lässt du im äußeren Bereich des Grid generell einige Pixel frei. Kein Icon wird bis an die äußersten Grenzen gezeichnet, selbst dann nicht, wenn es ein quadratisches Piktogramm ist und von daher bis an die äußeren Grenzen gezeichnet werden könnte.

Linien und Formen umfassen immer ganze Pixel. Das vermeidet Unschärfen, die ansonsten leicht entstehen, wenn das Icon skaliert wird.

Fazit

Recherche, Planung und Vorbereitung sind wichtig. Das reine Zeichnen des Piktogramms ist dann lediglich der letzte Akt der Ausführung. Mehr wie das Anzünden eines Lagerfeuers für das zuvor stundenlang Holz gesammelt und aufgeschichtet wurde. Also, auf in den Wald!

Quellen zum Weiterlesen:

• 5 Killer Icon Design Tips | Creative Bloq
• 10 Styles That Have Changed the Face of Icon Design | TutsPlus
• Simplifying Icon Design | Claudia Driemeyer
• Die Erfinder der Schreibtisch-Metapher | Xerox
• How to Design a Top-Quality Icon | Creative Bloq
• 6 Easy Steps to Better Icon Design | Smashing Magazine
• Wenn du alles über Icon-Design lernen willst, dann hol dir das Icon Handbook.

Alle Icon-Tools, die man kennen sollte

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.

CSS Icons: Piktogramme aus purem CSS, auf Wunsch auch animiert

Die frei verwendbare Web-App „CSS Icon” bringt dir nicht nur Piktogramme aus purem CSS frei Haus, sondern erlaubt dir auch noch, animierte Übergänge zwischen jeweils zwei beliebigen Symbolen des Pakets zu definieren.

Auch für den nicht so detailverliebten Allerweltsdesigner hilfreich, ist sein Projekt „CSS Icon”. Hier beherbergte er ursprünglich 512 allein mit CSS erstellte Piktogramme ohne jegliche Abhängigkeiten, also im Zweifel auch einzeln und autark verwendbar. Die Fortentwicklung des Projekts bietet momentan noch nicht den vollen Symbolumfang, ist dafür aber um einiges interessanter geworden.

CSS Icon: Codeschnipsel zum Auskopieren

In der neuen Version von „CSS Icon” findest du derzeit rund 200 Symbole. Zhang verspricht, weitere regelmäßig zuzufügen. Die Web-App bietet im Wesentlichen zwei Funktionalitäten. Klickst du ein einzelnes Icon an, öffnet sich rechts von der Übersicht ein Detailfenster, aus welchem du den kompletten erforderlichen Quellcode für dieses Icon per Copy-and-Paste auskopieren kannst.

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.

CSS Icon animate: Morphing light zwischen zwei Icons

Die zweite Funktionalität erreichst du, wenn du oben links im Browserfenster das kleine Wörtchen „animate” anklickst. Jetzt hast du die Möglichkeit, zwei Piktogramme zu wählen. Das zuerst gewählte wird zu Symbol A, das zweite zu Symbol B.

Nun öffnet sich das bereits bekannte Detailfenster mit den erforderlichen Code-Snippets. Dieses Mal findest du dabei jedoch nicht nur HTML und CSS, sondern auch JavaScript.

In der Einstellung „animate” erstellt die Web-App nämlich animierte Übergänge zwischen den beiden gewählten Icons. In meinem Beispiel wird der linksweisende Pfeil zu einem rechtsweisenden Pfeil gemorpht. Das funktioniert generell mit allen Symbolen, sieht aber naheliegenderweise nicht bei allen auch gut und überzeugend aus. Wenn du beispielsweise das Icon „Neun Uhr” zum Icon „Drei Uhr” animieren lässt, wird der kleine Uhrzeigen simpel von links nach rechts geschoben. So würde man das normalerweise natürlich nie animieren.

Hingegen sieht die Animation vom Icon „Batterie voll” zu „Batterie leer” genauso aus, wie man sich das vorstellen würde. In jedem Falle ist „CSS Icon” eine Bereicherung für deinen Design-Werkzeugkasten.

CSS Icons: Gemeinfrei verwendbar unter CC0

Zhang stellt sein Projekt unter der Lizenz Creative Commons Zero, die in etwa der Public Domain entspricht, völlig frei für jedermann und jeden Zweck zur Verfügung. Damit kannst du die Icons ohne jegliche Bedenken auch kommerziell verwenden und vor allem nach deinem Belieben verändern.

Das Projekt steht unter Github quelloffen zur Verfügung. Um es lediglich zu verwenden, reicht der Besuch der Projektseite CSS Icons.

Animate SVG Icons with CSS and Snap

In diesem Tutorial geht es um Snap.SVG und CSS zur interaktiven Gestaltung von Icons. Zudem gibt es Tipps zur Erstellung von Piktogrammen mit Illustrator. Eine ganze Reihe nützlicher weiterer Ressourcen sind verlinkt.

Method Draw

Method Draw ist eine einfache Web-App zur kostenlosen Bearbeitung von SVG-Dateien. Speziell als Online-Vektor-Editor konzipiert, ist die Bedienung sehr einfach: Datei öffnen, bearbeiten und wieder speichern: Fertig!

Snap.svg

Mit Snap.svg können SVG-Dateien kostenlos erstellt und bearbeitet werden, bis hin zu sehenswerten Animationen.

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.

quasi-svg

Nutze diese App, um schöne kristalline Muster zu kreieren. Über zahlreiche Eingabefelder kannst du benutzerdefinierte Muster erstellen und damit Hintergründe für deine Projekte.

Plain Pattern

Die Plain Pattern App ist eine einfach zu bedienende Anwendung für die Erstellung von Mustern, die im SVG-Format exportiert werden können.

Chartist.js

Chartist hilft Designern und Entwicklern dabei, Inhalte visuell in interaktive und dynamische Diagramme umzuwandeln, die auf jedem Endgerät gleich aussehen.

bonsai

Bonsai bietet eine Bibliothek zur Grafikbearbeitung an, die dazu eine API- und Renderplattform für SVG unterstützt.

SVGMagic

Ist der Browser zu alt um SVG anzuzeigen, so hilft SVGMagic aus. Blockierte SVG-Inhalte werden zu PNGs konvertiert, damit der Browser sie darstellen kann. Hier kommt jQuery im Hintergrund zum Einsatz.

Glyphter

Glyphter gibt dir einfachen Zugriff auf 16 verschiedene Quellen SVG-optimierter Icons und Schriften.

iconizr

Hast du eine ganze Reihe von SVG-Animationen oder -Grafiken, dann setze sie alle zusammen: Iconizr konvertiert sie in ein anwendbares CSS Icon Kit.

E-Commerce-Icons zum Herunterladen

33 Linear Ecommerce Icons

Erstellt von/für: Inspirationfeed (Igor Ovsyannykov)

Lizenz: Creative Commons Attribution 3.0 Unported License.

The Flat & Stroke eCommerce Icon Set (50 Icons, SVG & PNG)

Erstellt von/für: Freepik

Lizenz: Frei für private und kommerzielle Zwecke, auch in Kundenaufträgen verwendbar

70 Ecommerce and Shopping Icons (AI, EPS & PSD)

Erstellt von/für: Vecteezy

Lizenz: Frei für private und kommerzielle Zwecke, auch in Kundenaufträgen verwendbar

Free UI and E–commerce thin line icons

Erstellt von/für: Rajesh Kumar

Lizenz: als “Free” bezeichnet, aber keine genaue Lizenz angegeben

Free Ecommerce Icon Pack + PSD / AI Freebie

Erstellt von/für: Intuz

Lizenz: CC0.

Responsive E-Commerce Icon Set

Das essentielle
E-Commerce-Iconset

„Shopicons“ ist das neue Iconset von H2D2, das die 60 wichtigsten E-Commerce Symbole vereint. Es kann aus vier verschiedenden Symbolstärken gewählt werden. So findet sich für jedes Shopdesign, die passende Variante. Alle Icons liegen als einzelne SVG- und PNG-Dateien bereit und können direkt in Ihrem Online-Shop eingesetzt werden

Lizenz: Verfügbar als Open Source unter der Apache Lizenz Version 2.0.

SVG-Icon-Sets

Flat Icon

Die Webseite von Flat Icon umfasst über 60.000 freie Vektor-Icons, welche als SVG-, EPS-, PSD- oder PNG-Format downloadbar sind. Um ein bestimmtes Icon schnell zu laden, nutze die Suchleiste oder suche basierend auf der Kategorie, so beispielsweise unter Networking, Zeichen, Tiere etc. Alle dieser SVG Icons haben eine Creative Commons Lizenz. Verweise daher auf die Quelle, wenn du diese Icons nutzt.

iconmonstr

Diese einfachen, aber großartig aussehenden Icons sind sowohl für den kommerziellen als auch den privaten Gebrauch völlig kostenfrei. Sie benötigen keinen Quellenverweis und können darüber hinaus beliebig modifiziert werden. Die Seite von iconmonstr beinhaltet eine ziemlich große Sammlung und ist definitiv ein Lesezeichen wert.

Free Icons

Die kostenlosen Icons von Free Pik können als SVG und im PNG- und EPS-Format runter geladen werden. Sie sind allesamt kostenfrei für den privaten und den kommerziellen Gebrauch mit Quellenverweisen nach CC 3.0.

Social Icons von Adam Fairhead

Dieses Set von SVG Icons für die sozialen Netzwerke sieht gut aus und ist leicht in deinen Code einfügbar. Einfache Anleitungen sind ebenfalls auf der Seite enthalten, und das downloadbare Code-Paket beinhaltet eine Beispielseite.

Open Iconic

Die freie Open Source Version von Iconic umfasst 223 Icons in SVG-, Webfont- und Rasterformat. Besonders geeignet sind sie zur Verwendung mit Bootstrap und Foundation.

RoundIcons.com

Die Icons von RoundIcons.com sind lizenzfrei bei einem imit von 200 Stück pro Projekt. Wer mehr benötigt oder eine kommerzielle Lizenz erfordert, muss mindestens 99 Dollar dafür ausgeben.

Icons Sets

Da hat sich jemand viel Mühe gegeben mit diesen auf Dribbble erhältlichen SVG-Icons. Es empfiehlt sich die Lizenzen zu prüfen, bevor man zur Verwendung schreitet.