Anzeige

»Bytesize Icons« für Websites

Gerade einmal 9 kb groß sind die kostenlosen »Bytesize Icons« von Dan Klammer. Sie wurden für den Einsatz auf Websites konzipiert und liegen im SVG-Format vor. Stile und Stärke lassen sich einfach per Tags festlegen.

bytesize-icons-abb

Die 79 Symbole des SVG-Sets können inline eingefügt oder als externe .svg-Datei mittels use-Tag geladen werden. Über die Angabe »stroke-width« lassen sich die Icons von »Haarlinie« bis »Heavy« darstellen. Mit »stroke-linecap« und »stroke-linejoin« wird Einfluss auf die Formen genommen, um Rundungen oder Abschrägungen zu erzielen.

bytesize-icons-abb2

Die Einbindung eines Lupen-Symbols sieht zum Beispiel wie folgt aus:

bytesize-icons-sample

<svg id="i-search" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.25%">
    <circle cx="14" cy="14" r="12" />
    <path d="M23 23 L30 30"  />
</svg>

Die »Bytesize Icons« stehen auf der GitHub-Seite des Entwicklers zum Download bereit. Dort gibt es auch noch detaillierte Infos zum Einsatz und zum Styling der Symbole sowie eine Demo zum Ausprobieren.

Kommentieren