»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

Ich erteile hiermit dem Betreiber von Designer in Action meine Einwilligung zur Nutzung und Verarbeitung der von mir angegebenen personenbezogenen Daten zum Zweck der Bearbeitung meiner Anfrage. Mir ist bekannt, dass ich jederzeit das Recht habe, der Verarbeitung meiner Daten mit Wirkung für die Zukunft zu widersprechen. Weitere Informationen zur Verarbeitung von personenbezogenen Daten: https://www.designerinaction.de/kontakt/impressum/#datenschutz