Feather Icons: 240 moderne Piktogramme zur kostenlosen Verwendung

Dieter Petereit

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

Feather Icons ist ein Set von 240 Symbolen, die durch ihre sehr klare Gestaltung für nahezu jedes Projekt geeignet sind. Das gilt umso mehr, als sie kostenlos unter der liberalen MIT-Lizenz vertrieben werden.

Feather Icons” ist ein Projekt des kalifornischen Frontend-Entwicklers Cole Bemis, der schon das ein oder andere Projekt über Github öffentlich gemacht hat, dabei aber erst mit Feather einige Aufmerksamkeit generieren konnte.

Feather Icons basieren auf SVG

Die Symbole des Feather-Packs sind im Kern SVG-Dateien, so dass du sie mit einem geeigneten Werkzeug auch bearbeiten, etwa farblich anpassen oder skalieren kannst. Die Einbindung der Symbole in deine Website erfolgt am einfachsten in einer Kombination der SVGs mit JavaScript und HTML5-Data-Attributen.

Ein Auszug aus dem Fundus der Feather Icons. (Screenshot: Dr. Web)

Zunächst baust du die komprimierte JavaScript-Datei feather.min.js oder die unkomprimierte Fassung feather.js in dein HTML-Dokument ein. Nun rufst du das entsprechend gewünschte Icon als Data-Attribut zu einem Element auf. Das kann so aussehen:

<i data-feather="circle"></i>

Damit bleibt das Handling für dich einfach und nachvollziehbar. Zur Laufzeit sorgt das JavaScript nun dafür, dass das entsprechende, zum Data-Attribut korrespondierende SVG-Markup aufgerufen und ausgeführt wird. Dazu bedarf es des ans Ende des Dokumentes zu setzenden Replace-Befehls:

<script>
  feather.replace()
</script>

Über Parameter zum Replace-Befehl beeinflusst du die Darstellung der jeweiligen Piktogramme. So könntest du etwa die Linienstärke festlegen mit:

<script>
  feather.replace({ class: 'stroke-width': 1 })
</script>

Zur Laufzeit werden die Parameter zum Replace-Befehl in den SVG-String eingebaut. Es ist allerdings nicht möglich, die Optionen auf individuelle Icons zu beschränken.

Feather Icons sind auch mit Node verwendbar

Feather kannst du nicht nur mittels clientseitigem JavaScript verwenden, sondern auch via Node. Hier ist die Verwendung etwas anspruchsvoller. Ein Sprite für die ganz Konventionellen ist in Arbeit.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Die Feather Icons sind nicht das Beste seit Bier in Dosen und auch nicht alternativlos. Sie stellen aber in jedem Falle eine nutzwertige Ergänzung des Werkzeugkastens eines jeden Webdesigners dar. Viel Spaß damit.

Übrigens: Wenn du zunächst ein bisschen damit experimentieren willst, dann eignet sich dieser Codepen sehr gut dafür.

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+.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz