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

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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.

Adobe-Designer mit viel Liebe zum Detail

Wenting Zhang arbeitet als UX-Designer für Adobes Typekit. Es ist demnach kein Wunder, dass er sich für Typografie und Icon-Gestaltung per se jederzeit begeistern kann. Um dieser Leidenschaft Raum zu geben, beschäftigt er sich neben seinem Hauptjob mit etlichen Nebenprojekten aus diesem Bereich.

Da gibt es etwa das Projekt „Type Detail”. Hier erläutert er akribisch die Besonderheiten verschiedener populärer oder weniger bekannter Schriftarten. Typografie-Fans sollten sich das Projekt in jedem Falle einmal ansehen.

Type Detail seziert Fonts. (Screenshot: Dr. Web)

Noch wesentlich nerdiger wirkt sein Projekt underline.js, in dem er nichts anderes tut, als die perfekte Unterstreichung zu entwickeln. Du siehst, der Mann meint es Ernst, wenn es um Details geht.

CSS Icon Animate: Pure CSS-Icons, auf Wunsch auch mit Morphing-Animation

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: Landing Page. (Screenshot: Dr. Web)

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.

Ein gewähltes Icon erscheint rechts in der Detailansicht mit komplettem Codeschnipsel. (Screenshot: Dr. Web)

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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

Wähle zwei Icons aus, die Animation wird automatisch erstellt. (Screenshot: Dr. Web)

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.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.