Feather Icons v4.5.0

263 einfache und schöne Icons

Kaum eine Webseite oder App kommt heutzutage noch ohne Icons aus. Diese kleinen meist quadratischen Symbole helfen dabei sich auf einer Webseite schneller zu orientieren und Informationen zuzuordnen.

Feather ist eine Icon-Sammlung mit insgesamt 263 einfachen schönen Symbolen. Die Icons wurden unter der MIT-Lizenz veröffentlicht und wird damit als Open Source unentgeltlich jeder Person die Erlaubnis erteilt, sie uneingeschränkt zu nutzen, inklusive dem Recht, sie zu verwenden, zu kopieren, zu verändern, zusammenzufügen und zu veröffentlichen.

 

feather

alert-circle

file

file-text

flag

help-circle

home

image

link

link-2

lock

log-in

log-out

mail

map

map-pin

menu

message-circle

message-square

monitor

navigation

navigation-2

phone

search

send

share

share-2

shopping-bag

shopping-cart

smartphone

star

tablet

tag

twitter

unlock

facebook

linkedin

Scalable Vector Graphics (SVG, englisch für skalierbare Vektorgrafik)

Da die Icon-Sammlung im Kern aus SVG-Dateien besteht, können die Icons wie SVGs auf der Webseite genutzt bzw. eingebunden werden. Im Unterschied zu Rastergrafiken können SVG ohne Qualitätsverlust vergrößert werden. Gerade beim Responsive Webdesign ist das wichtig, da sich Objekte flüssig an verschiedene Bildschirmgrößen anpassen müssen. Im Vergleich zu GIF, JPEG- oder PNG-Dateien beanspruchen die in der XML-basierten Grafiksprache erzeugten SVG-Dateien weniger Speicher, was im Web definitiv von Vorteil ist.

Mehr zu SVG im Web (A Practical Guide): https://svgontheweb.com

Scalable Vector Graphics auf Wikipedia: https://de.wikipedia.org/wiki/Scalable_Vector_Graphics

Hier einige Beispiele:

Bild

<img src="feather.svg" alt="Feather" height="80" width="80">

Feather40x40

Feather80x80

Feather120x120

Hintergrundbild (background-image) via CSS

.logo {
  background-image: url(feather.svg);
}

als Objekt

<object type="image/svg+xml" data=" feather.svg"></object>

Inline

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg>

HTML

Die einfachste Variante Feather-Icons auf der Webseite zu nutzen besteht darin das data-feather Attribut mit dem Namen des Icons einzusetzen.

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

Zurück