Deshalb spielen Icons fürs Branding eine tragende Rolle!

Streng oder verspielt, informativ oder illustrativ, farbig oder schwarzweiß – Icons können sich dem Charakter einer jeden Marke anpassen. Wie im Fall von Nespresso. Das Design- und Illustrationsstudio Forma aus Barcelona gestaltet so viele Icon-Projek­te, dass es dafür eine eigene Abteilung gegründet hat – Forma Icons. Für Nespresso entstanden dort rund 500 Icons, die auf den Maschinen und den Packages sowie in der gesamten Kommunikation zum Einsatz kommen. »Wir haben die charakteristischen Merkmale des Nespresso-Logos eingefangen – es hat eher organische als geometrische Formen und scharfe, nicht abgerundete Strichenden«, sagt Josep Duran, Partner bei Forma, »und daraus dann ein mar­kenspezifisches Iconset entwickelt.«

Auch Mosca aus Waldbrunn, Hersteller sogenann­ter Umreifungsbänder für die Sicherung von Verpackungen oder Paletten sowie entsprechender Maschinen, vertraut auf die Bildzeichen. Das Münchner Designstudio klee.steinberger unterstützte das Familienunternehmen bei der Entwicklung einer Brand Story samt Design, zu dem auch ein Iconsystem gehört. Um die Kernbotschaft »Nonstop Performance« zu transportieren, geht es in der Kommunikation jetzt vermehrt darum, den Nutzen der Maschinen für die Kunden, die Gesellschaft und den Planeten darzustellen. »Icons ermöglichen es, Fakten schnell und international verständlich zu kommunizieren und hervorzuheben«, erklärt Claudia Klee. »Außerdem hatte Mosca neben den Maschinen kaum visuelles Material. Damit wurden die Icons zum wesentli­chen Bestandteil der Bildsprache.« Für das Interface Design der Maschinen selbst und ihre komplexen Funktionen gab es bereits Icons, die das Duo inhaltlich auch gar nicht infrage stellen wollte. »Es ging vielmehr darum, sie in einen eindeutigen visuellen Stil zu übertragen. Damit jeder, der die Icons sieht, sofort weiß: Das ist eine Mosca-Maschine.«

Icons: Von simpel zu komplex

Die Formsprache der Icons ergab sich aus einem um­geknickten Umreifungsband. Inhaltlich mussten Vit Steinberger und Claudia Klee oft ganz schön tüfteln. Manche Maschinen umreifen Papiere, andere Palet­ten, wieder andere umwickeln die Paletten mit Folie. Keine leichte Aufgabe, dafür eine Iconsystematik zu entwickeln, die eindeutig und simpel ist. »Ein Klo-Icon kann jeder bauen, wenn du aber eine Aussage hast, für die es inhaltlich kein gelerntes Bild gibt – virtueller Showroom etwa oder Digital Twin –, wird es kompliziert«, meint Vit Steinberger.

Unterstützung bekam klee.steinberger von der Foundry TypeMates – auch wenn die bei Mosca verwendete Schrift Mosca Type nicht von ihr stammt, sondern auf der Jeko von Ellen Luff basiert. »Die Jeko hat ein paar Eigenheiten, zum Beispiel Glyphen wie M, W, N oder 4, die sich oben oder unten nicht wirklich verbinden. Das passt schön zu der Bänder-Formsprache«, erklärt TypeMates-Mitgründer Jakob Runge. »Zusammen mit Claudia und Vit haben wir dann die Icons passend zur Schrift entwickelt – sehr geometrisch mit ab und zu fehlenden Ecken.«

Die Kreativen begannen mit dem Signature Icon – dem für Moscas Basismaschine – und arbeiteten sich dann immer weiter an die komplexeren Funktionen und Benefits heran. Das Digital-Twin-Zeichen entstand beispielsweise in einem assoziativen Prozess und mündete in der Doppelung und Aufrasterung des Maschinen-Icons. »Icons zu gestalten ist ein bisschen wie der Non-Latin-Ansatz, also der Entwurf einer Schrift für ein anderes Schriftsystem«, meint Jakob Runge. »Statt die opti­schen Merkmale eins zu eins nachzubauen, versucht man, die Idee und die Anmutung zu treffen.«

Die Icons ermöglichen Mosca viel Flexibilität in der Kommunikation. Ursprünglich mit dem Fokus auf das Interface Design der Maschinen entwickelt, kommen sie nun auf der Website und in den Social Media ebenso zum Einsatz wie in allen klassischen Medien. »Wir sehen sie immer auf LinkedIn und freuen uns sehr, dass die Anwendung funktioniert und Mosca die Icons so fleißig nutzt«, so Claudia Klee.

Icons: Schrift oder Illustration – oder per KI?

Icons können Teil einer Schrift sein oder auch SVG-Illustrationen. Beides hat Vor- und Nachteile, vor allem bei ihrem Einsatz im Web. Als Teil des Fonts ist die Performance besser, da es nur einen HTTP-Request pro Iconset braucht. Nutzt man viele Icons, bleibt die Datenmenge relativ klein. Außerdem lassen sie sich einfach umfärben. Ein Nachteil ist, dass die Icons als Text gerendert werden und – je nach Hinting der Schrift – in kleinen Größen eventuell schlechter geglättet sind. In Bezug auf Barrierefreiheit schneiden sie schlechter ab als SVGs, denn Font-Icons kann man keine Title-Attribute zuweisen.

Sind SVG-Icons wie Bilder in CSS oder HTML eingebunden, braucht jedes Icon einen Request. Außer­dem lässt sich maximal eine zweite Farbvariante anlegen. Alternativ kann man sie per Inline-Code in CSS einbinden. Zwar wird der Code dann länger, aber die Vektordaten lassen sich umfärben oder auch animieren. Ob man die Icons in einem Fonteditor oder in Illustrator zeichnet, hängt von den eigenen Vorlieben ab, wobei Letzeres natürlich mehr Freiheiten bietet. TypeMates nutzt vorzugsweise einen Mix aus beidem. »Bestimmte Formen legen wir gerne in Glyphs an, damit die Outline wirklich sauber geschliffen ist. Für die Ausarbeitung eignet sich aber Illustrator besser«, so Jakob Runge.

Inzwischen gibt es auch diverse KI-Tools, mit denen sich Icons gestalten lassen. Adobe Firefly etwa, Iconik AI, Appy Pie oder Icon Generator AI. Für einzelne Icons oder eine kleine Sammlung mag das funktionieren, für große Sets aber ist das kritische Auge eines (Type-)Designers unerlässlich. »KI-Tools sind schon jetzt nützlich für die Konzeptfindung«, so Josep Duran. »Aber was Icon-Projekte am meis­ten brauchen, ist ein konsistenter Zeichenstil, und daran mangelt es der KI im Moment noch völlig.«

Icons und Schrift: Passend zu (fast) allem

»Orientierung bieten, Ordnung schaffen, eine Story erzählen – funky oder unaufgeregt – , Sinn aufzeigen, Unsinn verbergen: All das können Icons«, fasst Hen­ning Otto, Managing Partner und Kreativdirektor der Designagentur EIGA, zusammen, die in fast allen Projekten Icons verwendet. »Im Kleinen wie im Großen. Man muss sie lieben – und vor allem immer selbst gestalten!« Das stellt natürlich sicher, dass die Icons wirklich Teil des Brandings sind und einen eigenen Stil haben. Doch es gibt auch andere Möglichkeiten. So kann man nach Schriften mit Icons suchen, die von der Anmutung her zur Hausschrift der Marke passen. Oder man fragt die Ge­stalter:innen der im Branding verwendeten Fonts, ob sie nicht ein paar Icons dazu entwerfen mögen.

Ein gutes Beispiel für handwerklich ausgezeichnete und flexibel einsetzbare Icons sind die der Netto von Daniel Utz. Die ursprünglich 2008 bei FontFont veröffentlichte Schrift hat der Typedesigner im Frühjahr 2023 komplett überarbeitet und bietet sie jetzt über TypeMates an. Daniel Utz zeichnete dazu gut 420 Icons (siehe unten »Schriften mit Iconsets«). Sie sind minimalistisch, haben aber trotzdem einen knuffigen Charme und liegen in fünf Strichstärken vor – oder sie lassen sich als Variable Font stufenlos skalieren. »Außerdem gibt es noch ein Feintuning unter der Haube«, berichtet Jakob Runge. »Wir haben optische Anpassungen vor­­genommen, zum Beispiel die horizontalen Stri­che ganz leicht ausgedünnt. Das sieht nicht nur besser aus, es verhindert zudem ein Zulaufen der Icons in den fetten Schnitten.« Die Icons sind nicht auf die Netto festgelegt, durch ihren Minimalismus passen sie auch gut zu vielen anderen Schriften. Ob selbst oder vorgezeichnet, Icons sind nützlich und machen jede Menge Spaß – gerade auch, wenn man ihre Bedeutung in spezifischen Anwendungen erst enträtseln muss.

8 Schriften mit Iconsets

Viele Fonts haben mehr oder weniger umfangreiche Iconsets. Wer bei den hier vorgestellten Beispielen nicht fündig wird: Einfach mal auf MyFonts und Co nach Icons suchen:

1. Comspot

2. Handjet