Icons erstellen: Selbst zeichnen oder Bibliothek nutzen?

Icons erstellen klingt nach einer Nachmittagsaufgabe für den Praktikanten. Tatsächlich steckt dahinter eine Markenentscheidung mit langer Halbwertszeit. Jedes Symbol auf Ihrer Website prägt das Bild, das Kunden von Ihrem Unternehmen mitnehmen.

Das Wichtigste in Kürze

• Drei Wege führen zum Ziel: selbst zeichnen, aus einer Bibliothek beziehen oder per KI generieren. Jeder passt zu einer anderen Projektphase.
• SVG ist Pflicht. Pixelformate wie PNG und ICO haben nur noch enge Spezialnischen, typischerweise das Favicon im Browser-Tab.
• Konsistenz schlägt Vielfalt. Ein einheitlicher Stil wirkt professioneller als die beste Einzelauswahl aus drei Bibliotheken.
• Lizenzen kosten echtes Geld. Abmahnungen wegen vergessener Attribution sind in Deutschland weder selten noch harmlos.

Warum ist die Icon-Frage eine Markenentscheidung?

Icons sind die Verkehrszeichen Ihrer Website. Eine Lupe bedeutet Suche. Ein Einkaufswagen bedeutet Shop. Ein Schraubenschlüssel bedeutet Einstellungen. Diese Konventionen funktionieren sprachübergreifend und in Sekundenbruchteilen.

Die Conversion Rate reagiert darauf messbar. Nutzer kommen in Interfaces mit konsistenten Symbolen deutlich schneller zum Ziel als in rein textbasierten Oberflächen. Das bedeutet weniger Absprünge, mehr Interaktion und am Ende mehr Umsatz.

Der typische Fehler sitzt oben im Menü. Unternehmen mischen Symbole aus verschiedenen Quellen. Ein Font-Awesome-Symbol hier, ein handgezeichnetes Piktogramm dort, dazwischen ein Emoji im Button. Das Ergebnis wirkt wie ein Anzug aus drei verschiedenen Stoffen. Technisch funktioniert der Anzug. Visuell kostet er Vertrauen.

Eine eigene Icon-Handschrift ist dagegen ein leiser, aber konsequenter Markenbaustein. Kunden nehmen die Handschrift nicht bewusst wahr. Beim fünften Besuch erkennen sie Ihre Seite trotzdem schneller. Genau dafür lohnt sich der Aufwand, Icons bewusst zu erstellen statt sie irgendwo zusammenzusammeln. Der Unterschied zwischen Icon und Piktogramm ist dabei übrigens fließend. Piktogramme bezeichnen traditionell eigenständige Bildzeichen etwa an Flughäfen, Icons die digitale Unterart in Interfaces. Im Webkontext werden beide Begriffe meist synonym verwendet.

Selbst zeichnen, Bibliothek oder KI: Welcher Weg passt zu welchem Projekt?

Drei Wege führen zum fertigen Symbol. Die Entscheidung hängt von drei Faktoren ab: Budget, Zeit und Anspruch an Einzigartigkeit.

Weg 1: Icons selbst erstellen oder erstellen lassen

Ein erfahrener Designer zeichnet pro Symbol zwischen 30 und 60 Minuten, inklusive Konsistenzabgleich mit dem restlichen Set. Ein Rechenbeispiel: Angenommen, Sie beauftragen ein vollständiges UI-Set mit 40 Symbolen. Dann wären das rund 30 Arbeitsstunden, für die externe Designer je nach Marktlage zwischen 2.000 und 5.000 Euro abrechnen könnten. Der Weg lohnt sich, sofern Sie eine eigene visuelle Handschrift aufbauen wollen oder spezielle Branchenbegriffe darstellen, die keine Standardbibliothek kennt.

Weg 2: Icons aus Bibliotheken beziehen

Offene Bibliotheken wie Lucide, Heroicons oder Tabler Icons liefern zwischen 300 und 6.000 geprüfte Symbole sofort einsatzbereit. Die Download-Kosten liegen bei null Euro, die Lizenzsicherheit ist bei MIT- oder Apache-lizenzierten Quellen maximal. Dafür tragen Sie denselben Stil wie tausende andere Unternehmen. Für Startups, MVPs und Dashboards ist das die vernünftigste Wahl.

Weg 3: Icons mit KI generieren

KI-Tools wie Recraft oder PicLumen erzeugen ein Symbol in 15 Sekunden. Die Qualität einzelner Ergebnisse überrascht. Die Konsistenz über ein ganzes Set hinweg scheitert jedoch regelmäßig an leicht abweichenden Proportionen, Strichstärken und Stilmerkmalen. Für Ausnahmesymbole, die keine Standardbibliothek abdeckt, ist die KI-Generierung eine brauchbare Ergänzung. Für ein komplettes Interface-Design taugen KI-Icons nur als Ausgangspunkt.

Vergleich der drei Wege

Kriterium	Selbst zeichnen	Bibliothek	KI-Generator
Kosten pro Icon	80 bis 150 € (Designer)	0 € (MIT-Lizenz)	0 bis 0,50 € (Credits)
Zeit pro Icon	30 bis 60 Minuten	Sekunden	15 bis 60 Sekunden
Konsistenz im Set	maximal	maximal (pro Bibliothek)	schwach
Markenhandschrift	einzigartig	Standard-Look	variabel
Ideal für	Marken mit eigenem CI	Startups, Dashboards	Sonderfälle, Prototypen

Eine Kombination aller drei Wege ist übrigens kein Widerspruch. Viele Unternehmen starten mit einer Open-Source-Bibliothek und lassen später 5 bis 10 Schlüssel-Symbole individuell nachzeichnen, um Wiedererkennung aufzubauen.

Welches Dateiformat bildet die Grundlage professioneller Icons?

Die Formatfrage wirkt technisch, hat aber drei handfeste Auswirkungen auf Performance, Flexibilität und Wartbarkeit.

SVG: der Standard

Scalable Vector Graphics bestehen aus mathematisch beschriebenen Formen. SVG-Dateien skalieren verlustfrei vom 16-Pixel-Button bis zum Plakat. Der entscheidende Vorteil steckt im Zugriff per Code. Eine einzige CSS-Zeile ändert die Farbe aller SVG-Icons Ihrer Website. Die Dateien sind in der Regel kleiner als vergleichbare Pixelbilder, was Ihre Ladezeiten verbessert und die Core Web Vitals hebt. Eine SVG-Datei lässt sich zudem direkt im Code-Editor öffnen und bearbeiten, was die Anpassung an Ihre Corporate Identity spürbar vereinfacht.

PNG: nur noch in Ausnahmen

Das Pixelformat verliert bei Skalierung sichtbar an Schärfe. Eine Umfärbung ohne Grafikprogramm ist unmöglich. Der einzige sinnvolle Einsatzzweck liegt bei Symbolen mit komplexen Verläufen oder fotografischen Elementen, die sich nicht als Vektor abbilden lassen. Für Standard-UI-Icons greifen Sie zu SVG.

ICO: der Spezialfall für Favicons

Das alte Windows-Format speichert mehrere Auflösungen in einer Datei. Eine ICO-Datei erstellen Sie fast nur noch für das klassische Favicon, das Browser in der Tab-Leiste anzeigen. Moderne Browser akzeptieren stattdessen auch SVG-Favicons, was die Zukunftssicherheit erhöht. Für Windows-Desktop-Verknüpfungen bleibt ICO weiterhin das einzig sinnvolle Format.

Icon-Fonts: auf dem Rückzug

Die Technik behandelt Symbole wie Buchstaben einer Schriftart. Font Awesome hat das Modell populär gemacht. Der Nachteil liegt im Laden: Der Browser zieht immer die komplette Bibliothek nach, auch bei fünf genutzten Symbolen. Außerdem tun sich Screenreader schwer, was die Barrierefreiheit belastet. Neue Projekte setzen stattdessen auf einzeln eingebundene SVG-Dateien.

Wie erstellen Sie ein eigenes Icon in sieben Schritten?

Sie wollen ein Symbol selbst zeichnen oder zeichnen lassen? Der saubere Prozess folgt immer derselben Abfolge. Überspringen Sie einen Schritt, zahlen Sie ihn später doppelt.

Schritt 1: Die Bedeutung klären

Bevor der erste Strich fällt, schreiben Sie in einem Satz auf, was das Icon bedeuten soll. „Ein Zahnrad für Einstellungen“ ist klar. „Etwas Technisches“ ist unklar. Ohne eindeutige Bedeutung bleibt jede grafische Umsetzung Glückssache.

Schritt 2: Referenzen sammeln

Suchen Sie in mindestens drei etablierten Bibliotheken nach bestehenden Symbolen für denselben Zweck. Das verhindert, dass Sie Konventionen brechen, die Ihre Nutzer bereits kennen. Eine Lupe für die Suche lässt sich nicht neu erfinden, ohne Verständlichkeit zu verlieren.

Schritt 3: Raster festlegen

Professionelle Icon-Sets arbeiten auf einem einheitlichen Raster. Der Standard heißt 24 mal 24 Pixel mit 2 Pixel Strichstärke. Alternativen sind 16 mal 16 für kompakte UI-Elemente und 48 mal 48 für größere Illustrationen. Wichtig bleibt nur: Alle Symbole Ihres Sets nutzen dasselbe Raster.

Schritt 4: Skizzieren

Bleistift auf Papier ist dem Wacom-Tablett überlegen, sofern Sie noch früh im Prozess sind. Zeichnen Sie drei bis fünf Varianten des Symbols. Vergleichen Sie die Skizzen nebeneinander. Welche Variante erkennt ein Kollege in zwei Sekunden ohne Erklärung?

Schritt 5: Vektorisieren

Die finale Skizze übertragen Sie in ein Vektorprogramm. Figma, Adobe Illustrator oder das kostenlose Inkscape sind die Standardwerkzeuge. Achten Sie darauf, dass alle Linien auf dem Raster einrasten und die Strichstärke über das gesamte Icon konstant bleibt.

Schritt 6: Im Kontext testen

Legen Sie das fertige Symbol im Browser neben echten Inhalten ab. Wirkt das Icon bei 16 Pixeln noch klar erkennbar? Passt die optische Gewichtung zum Text daneben? Viele Symbole sehen in Figma großartig aus und zerfallen im Live-Kontext auf der Website.

Schritt 7: Exportieren und dokumentieren

Speichern Sie das Symbol als SVG mit currentColor für die Strichfarbe, damit das Icon sich per CSS einfärben lässt. Legen Sie Dateinamen, Raster, Strichstärke und Einsatzzweck in einem Icon-Verzeichnis ab. Ohne Dokumentation erstellt der nächste Designer in zwei Jahren ein leicht abweichendes Symbol für denselben Zweck.

Welche Gestaltungsregeln trennen gute Icons von beliebigen Symbolen?

Sechs Regeln entscheiden darüber, ob Ihr Icon-Set professionell wirkt oder improvisiert.

Regel 1: Ein Stil, keine Mischung

Outline (nur Konturen), Solid (ausgefüllt) oder Duotone (zweifarbig). Entscheiden Sie sich für genau einen Stil und halten Sie ihn durch. Eine Solid-Home-Ikone neben einem Outline-Menü-Symbol wirkt sofort unprofessionell.

Regel 2: Eine Strichstärke, durchgängig

Mischen Sie niemals Symbole mit 1 Pixel und 3 Pixel Strichstärke auf derselben Seite. Die optische Gewichtung weicht sichtbar ab, und das Layout wirkt unruhig.

Regel 3: Eine Akzentfarbe

Icons folgen Ihrer Corporate Identity. SVG-Symbole mit currentColor übernehmen automatisch die Textfarbe des Elternelements. Eine einzige CSS-Klasse genügt, und alle Symbole tragen Ihre Unternehmensfarbe.

Regel 4: Konsistente Metaphern

Speichern Sie immer als Diskette, nie mal als Wolke, mal als Stift. Bleiben Sie im Symbolvokabular Ihres Produkts bei derselben visuellen Sprache.

Regel 5: Optische Korrektur vor mathematischer Exaktheit

Ein kreisrundes Icon wirkt optisch zu klein, sobald das Icon mathematisch exakt gleich groß ist wie ein quadratisches. Profis korrigieren das per Auge, nicht per Formel.

Regel 6: Weniger Details

Ein Symbol funktioniert bei 16 Pixeln oder gar nicht. Alles, was bei dieser Größe verschwindet, gehört nicht hinein. Das ist der Grund, warum gute Icons schlichter aussehen, als Auftraggeber sich das zunächst vorstellen.

Die besten Icons erkennen Sie daran, dass niemand über sie spricht. Sobald ein Kunde ein Symbol hinterfragt, sitzt die Gestaltung nicht.

— Michael Dobler, Herausgeber Dr. Web

Welche Werkzeuge brauchen Designer und Entscheider wirklich?

Das Werkzeug entscheidet nicht über die Qualität. Das Werkzeug entscheidet darüber, wie effizient der Weg zum Ergebnis wird.

Für Designer

Figma ist der aktuelle Industriestandard für UI-Design inklusive Icons. Vektorwerkzeuge, Komponenten-System und Browser-Zugriff machen das Tool zur ersten Wahl für Teams. Die Grundversion ist kostenlos.

Adobe Illustrator bleibt der Profi-Standard für komplexere Vektorarbeiten, insbesondere wenn Sie Symbole für Druck und Web gleichzeitig produzieren. Das Einzelabo kostet ab rund 25 Euro pro Monat.

Affinity Designer bietet ähnliche Funktionalität wie Illustrator als Einmalkauf. Für Freelancer und kleine Studios eine ökonomische Alternative zum Abomodell.

Inkscape ist die kostenlose Open-Source-Lösung. Der Funktionsumfang reicht für professionelle Icon-Arbeit aus. Die Bedienung ist gewöhnungsbedürftig, die Community aber aktiv.

Für Entscheider und Nicht-Designer

Online-Editoren wie der Canva Icon Maker oder Fotor reichen für schnelle Marketing-Icons und Social-Media-Grafiken. Icons online erstellen geht dort in wenigen Klicks. Echte UI-Arbeit verlangt weiterhin nach Vektorprogrammen.

Recraft und PicLumen generieren per Texteingabe einzelne Icons in verschiedenen Stilen. Für die Designphase eines neuen Produkts taugen die Ergebnisse als Ideenfundus. Für das finale Interface greifen Sie weiterhin zu kuratierten Bibliotheken oder handgezeichneten Symbolen.

Welche Icon-Quellen haben sich am Markt bewährt?

Sie wollen keine Symbole selbst zeichnen, aber professionelles Niveau im Ergebnis? Die folgenden Bibliotheken haben sich über Jahre als verlässliche Quellen etabliert. Die Aufzählung nennt die Bibliotheken bewusst nur beim Namen. Prüfen Sie selbst die jeweiligen Lizenzbedingungen, bevor Sie eine Quelle dauerhaft in Ihren Projekten einsetzen.

Lucide: Community-getriebene Weiterentwicklung von Feather Icons, über 1.000 Symbole, MIT-lizenziert. Die erste Empfehlung für minimalistisches Design. Regelmäßige Updates, Integrationen für React, Vue, Svelte und Angular.

Heroicons: Rund 300 handgezeichnete Symbole vom Team hinter Tailwind CSS. Outline, Solid und Mini-Varianten. MIT-Lizenz. Ideal für Tailwind-Projekte.

Tabler Icons: Über 6.000 Symbole auf einem 24-mal-24-Raster mit anpassbarer Strichstärke. MIT-Lizenz. Eine der besten Allround-Bibliotheken überhaupt.

Phosphor Icons: Über 1.200 Basis-Symbole in sechs Gewichtsstufen von Thin bis Duotone. MIT-Lizenz. Einzigartige Flexibilität, visuelle Hierarchien allein über die Gewichtung zu steuern.

Google Material Symbols: Über 2.500 Symbole in vier Varianten (Outlined, Rounded, Sharp, Filled). Apache-2.0-Lizenz. Die erste Wahl für Material-Design-Projekte.

Bootstrap Icons: Über 2.000 Symbole vom Bootstrap-Team. MIT-Lizenz. Besonders geeignet für Bootstrap-basierte Oberflächen.

Font Awesome: Der Urvater unter den Icon-Bibliotheken, über 2.000 kostenlose Symbole in der Free-Version. Kombinierte Lizenz. Die Pro-Version kostet etwa 99 US-Dollar pro Jahr.

Flaticon: Über 18 Millionen Symbole von tausenden Designern. Kostenlos nur mit sichtbarer Namensnennung. Premium-Abo ab rund 10 Euro pro Monat für attributionsfreie Nutzung. Stärke und Schwäche zugleich: riesige Auswahl, Stilkonsistenz muss manuell sichergestellt werden.

Icons8: Über eine Million Symbole, dazu Illustrationen und Fotos. Plugins für Figma, Illustrator und Google Workspace. Kostenlos nur mit Verlinkung auf die Plattform.

The Noun Project: Über 5 Millionen Symbole von Designern weltweit. Enorme stilistische Vielfalt. Kostenlos mit Namensnennung, Pro-Abo für rund 40 US-Dollar pro Jahr.

Simple Icons: Über 3.000 SVG-Symbole ausschließlich für Marken und Logos. CC0-Lizenz (Public Domain). Unverzichtbar, sofern Sie Drittmarken in Ihren Inhalten zeigen wollen.

Iconify: Kein eigenes Set, sondern eine Meta-Plattform mit Zugriff auf über 200.000 Symbole aus mehr als 200 Bibliotheken. Einheitliche API. Ideal für Entwicklerteams, die flexibel zwischen Sets wechseln wollen.

Diese zwölf Quellen decken rund 90 Prozent aller typischen Anwendungsfälle ab. Weitere hochwertige Optionen finden sich bei Hugeicons, Streamline Icons, Iconoir, Remix Icon, Carbon Icons, Ionicons und Iconmonstr. Wer auf deutsche Anbieter Wert legt: Iconmonstr stammt vom deutschen Designer Alexander Kahlkopf und erlaubt kommerzielle Nutzung ohne Namensnennung.

Wo lauern Lizenz-, Performance- und Barrierefreiheitsfallen?

Drei Fehlerquellen machen aus einer guten Icon-Entscheidung einen teuren Nachmittag.

Die Lizenzfalle

Die MIT-Lizenz ist die liberalste verbreitete Open-Source-Lizenz. Das Modell erlaubt kommerzielle Nutzung, Veränderung und Weiterverbreitung. Die einzige Bedingung: Der originale Copyright-Hinweis muss erhalten bleiben, typischerweise irgendwo im Projekt-Repository. Für Unternehmen bedenkenlos einsetzbar.

Apache 2.0 funktioniert ähnlich, enthält zusätzlich einen ausdrücklichen Patentschutz. Auch bedenkenlos.

Gefährlich werden Plattformen wie Flaticon oder The Noun Project. Die „kostenlose“ Nutzung verlangt eine sichtbare Attribution auf Ihrer Website. Vergessen Sie die Namensnennung, verstoßen Sie gegen die Lizenzbedingungen. Abmahnungen sind in Deutschland dokumentiert, nicht hypothetisch.

Creative Commons ist ein Minenfeld eigener Art. CC BY erlaubt kommerzielle Nutzung mit Namensnennung. CC BY-NC verbietet kommerzielle Nutzung komplett. CC BY-ND verbietet Bearbeitungen. Jedes einzelne Symbol braucht eine Einzelprüfung.

Die Performance-Falle

Jede Millisekunde zählt, weil Google die Ladezeit direkt in das Ranking einbezieht. Inline-SVG bindet das Symbol direkt in den HTML-Code ein, ohne zusätzlichen HTTP-Request. Für bis zu 20 Icons die performanteste Lösung. Ab 20 Symbolen lohnt sich ein SVG-Sprite, das alle Icons in einer einzigen Datei bündelt. Moderne Frameworks wie React und Vue unterstützen Tree-Shaking, das automatisch nur die tatsächlich importierten Symbole in den finalen Build aufnimmt. So laden Ihre Nutzer 5 Kilobyte statt 500.

Die Barrierefreiheitsfalle

Der European Accessibility Act verpflichtet seit Juni 2025 alle Unternehmen mit digitalen Produkten zur Barrierefreiheit. Icons spielen dabei eine zentrale Rolle.

Dekorative Symbole, die nur neben bereits vorhandenem Text stehen (beispielsweise ein Telefon-Symbol neben der Telefonnummer), erhalten das Attribut aria-hidden="true". Der Screenreader überspringt das Symbol dann.

Funktionale Symbole, die eine Handlung auslösen (beispielsweise eine Lupe als Suchbutton), brauchen ein beschreibendes aria-label und role="img". Ohne diese Attribute bleibt Ihre Suchfunktion für blinde Nutzer unsichtbar.

Der Kontrast darf WCAG 2.1 nicht unterschreiten: mindestens 3 zu 1 zum Hintergrund für grafische Elemente. Hellgraue Symbole auf weißem Grund sehen elegant aus, fallen durch jeden Barrierefreiheitstest.

Glossar: 15 wichtige Fachbegriffe zum Icon-Design

Apache 2.0

Apache License 2.0 ist eine permissive Open-Source-Lizenz, die freie Nutzung, Veränderung und Verbreitung erlaubt. Anders als die MIT-Lizenz enthält die Apache-Lizenz einen ausdrücklichen Patentschutz. Für Unternehmen relevant, weil sie rechtliche Sicherheit bei der kommerziellen Nutzung von Icon-Bibliotheken bietet.

aria-label

Das HTML-Attribut aria-label weist einem Element einen beschreibenden Text für Screenreader zu. Bei Icon-Buttons ohne sichtbaren Text ist das Attribut Pflicht, damit blinde Nutzer die Funktion erkennen.

Attribution

Attribution bezeichnet die Pflicht zur Namensnennung des Urhebers. Viele Freemium-Icon-Plattformen verlangen eine sichtbare Quellenangabe als Bedingung für die kostenlose Nutzung. Fehlende Attribution kann zu Lizenzverstoß und Abmahnung führen.

Corporate Identity (CI)

Corporate Identity umfasst das Gesamtbild eines Unternehmens: Farben, Schriften, Bildsprache, Sprache. Icons sind Teil der visuellen CI. Inkonsistente Symbole untergraben den einheitlichen Auftritt genauso wie ein falsches Blau im Logo.

Favicon

Das Favicon ist das kleine Symbol, das Browser im Tab, in Lesezeichen und auf dem Home-Screen mobiler Geräte anzeigen. Das Favicon identifiziert Ihre Website auf einen Blick und gehört zum Minimalstandard jedes seriösen Webauftritts.

Icon-Font

Ein Icon-Font ist eine Schriftart, deren Zeichen Symbole statt Buchstaben darstellen. Font Awesome popularisierte den Ansatz. Der Nachteil: Icon-Fonts laden stets die komplette Bibliothek und erschweren Barrierefreiheit. Moderne Projekte bevorzugen einzelne SVG-Dateien.

ICO-Datei

Die ICO-Datei ist ein von Microsoft entwickeltes Containerformat, das mehrere Bildauflösungen in einer Datei bündelt. Das Format kommt hauptsächlich für klassische Favicons und Windows-Desktop-Symbole zum Einsatz.

Inline SVG

Inline SVG bezeichnet SVG-Code, der direkt in das HTML-Dokument eingebettet wird. Der Browser lädt keine zusätzliche Datei, was den Seitenaufbau beschleunigt. Zudem lassen sich Inline-SVGs per CSS und JavaScript direkt manipulieren.

MIT-Lizenz

Die MIT-Lizenz ist eine der liberalsten Open-Source-Lizenzen. Das Modell erlaubt kommerzielle Nutzung, Veränderung und Weiterverbreitung unter der einzigen Bedingung, dass der Copyright-Hinweis erhalten bleibt. Die meisten Open-Source-Icon-Bibliotheken nutzen diese Lizenz.

Piktogramm

Ein Piktogramm ist ein stark vereinfachtes Bildzeichen, das einen Begriff oder eine Handlung darstellt. Im Webkontext werden Piktogramme und Icons oft synonym verwendet. Klassische Piktogramme finden sich an Flughäfen oder Verkehrsschildern.

Raster (Grid)

Das Raster legt die Proportionen eines Icon-Sets fest. Die Standardgröße in der UI-Welt ist 24 mal 24 Pixel mit 2 Pixel Strichstärke. Einheitliches Raster ist die Voraussetzung dafür, dass Icons nebeneinander harmonisch wirken.

Screenreader

Ein Screenreader liest Bildschirminhalte vor und ermöglicht blinden oder sehbehinderten Nutzern den Umgang mit Websites und Apps. Icons ohne aria-Attribute bleiben für Screenreader unsichtbar, was die Bedienbarkeit massiv einschränkt.

SVG

Scalable Vector Graphics ist ein XML-basiertes Dateiformat für zweidimensionale Vektorgrafiken. SVG-Dateien skalieren verlustfrei, sind per CSS stylebar und können direkt in HTML eingebettet werden. Das Standardformat für Icons im modernen Webdesign.

SVG-Sprite

Ein SVG-Sprite fasst mehrere SVG-Icons in einer einzigen Datei zusammen. Einzelne Icons werden über die HTML-Referenz <use> aufgerufen. Das reduziert HTTP-Requests und optimiert die Ladezeit bei Websites mit vielen Icons.

Tree-Shaking

Tree-Shaking ist ein Build-Optimierungsverfahren, das unbenutzten Code automatisch entfernt. Bei Icon-Bibliotheken bedeutet das: Nur die tatsächlich importierten Symbole landen im finalen Bundle. Bibliotheken wie Lucide und Heroicons sind speziell für Tree-Shaking optimiert.

FAQ: Icons erstellen

Quellen

W3C | Scalable Vector Graphics (SVG) 2 | w3.org/TR/SVG2 | besucht am 17.04.2026

W3C | Web Content Accessibility Guidelines (WCAG) 2.1 | w3.org/TR/WCAG21 | besucht am 17.04.2026

Europäische Union | European Accessibility Act (Richtlinie EU 2019/882) | eur-lex.europa.eu | besucht am 17.04.2026

Nielsen Norman Group | Icon Usability | nngroup.com/articles/icon-usability | besucht am 17.04.2026

Lucide | Comparison with Feather Icons | lucide.dev/guide/comparison | besucht am 17.04.2026

Phosphor Icons | GitHub Core Package | github.com/phosphor-icons/core | besucht am 17.04.2026