Ein Iconset (Icon-System) ist eine Sammlung von Icons, die nach denselben Regeln gezeichnet sind: gleiches Raster, gleiche Strichstärke, gleiche Ecken. Das Wort Icon kommt laut Duden über das Englische vom griechischen eikṓn, Bild. Erst die gemeinsamen Regeln machen aus einzelnen Symbolen ein System, das auf allen Seiten einer Website gleich wirkt.
- Iconset
Eine Sammlung von Icons, die nach gemeinsamen Regeln für Raster, Strich und Ecken gezeichnet sind und deshalb zusammenpassen.
Beispiel: „Für Navigation und Formulare nehmen wir alle Symbole aus einem Iconset.“Auch: Icon-Set, Icon-Bibliothek.
Abgrenzung zu den Icons: Dort geht es um das einzelne Bildzeichen und darum, ob es ohne Text verstanden wird.
Die Regeln eines Iconsets
Die Regeln eines Sets stehen in einem Design Guide. Lucide zeichnet auf einer Fläche von 24 mal 24 Pixeln mit mindestens einem Pixel Abstand zum Rand, 2 Pixeln Strichbreite und runden Enden und Verbindungen. Google beschrieb für die Material Icons ein Raster von 24 dp mit einer Innenfläche von 20 mal 20 dp und Hilfsformen, sogenannten Keylines: Kreis, Quadrat, Hoch- und Querrechteck. Sie sorgen dafür, dass ein runder und ein eckiger Umriss gleich groß wirken.
Bekannte Iconsets
Viele Websites greifen auf freie Bibliotheken zurück. Lucide, ein Ableger von Feather Icons, zählte am 12. November 2026 auf seiner Startseite 2.051 Icons unter ISC-Lizenz. Material Symbols von Google gibt es seit April 2022 als variable Schrift mit Achsen für Stärke, Füllung und optische Größe, unter Apache-Lizenz 2.0. Apple bietet mit den SF Symbols über 7.000 Zeichen, abgestimmt auf die Systemschrift San Francisco. Die freien Icons von Font Awesome stehen laut GitHub unter CC BY 4.0.
Wie ein Iconset auf die Website kommt
Für das Web eignen sich SVG-Dateien am besten. Viele Sets liefern ein SVG-Sprite: eine Datei mit allen Symbolen, aus der das Element use einzelne Zeichen per Fragment holt. Die Größe lässt sich nur steuern, wenn das Symbol eine viewBox hat. Ein Icon ohne sichtbaren Text braucht eine Beschriftung für Screenreader, ein Icon neben Text dagegen aria-hidden, damit nichts doppelt vorgelesen wird.
<button type="submit">
<svg width="24" height="24" aria-hidden="true">
<use href="/icons.svg#suche"></use>
</svg>
Suchen
</button>