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.

Warum ist die Icon-Frage eine Markenentscheidung?

Icons sind die Verkehrszeichen Ihrer Website. Eine Lupe bedeutet Suche, ein Einkaufswagen Shop, ein Schraubenschlüssel 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. Schnellere Orientierung bedeutet weniger Absprünge, mehr Interaktion und am Ende mehr Umsatz.

Der typische Fehler sitzt oben im Menü. Unternehmen mischen Symbole aus verschiedenen Quellen: Neben einem Font-Awesome-Symbol steht ein handgezeichnetes Piktogramm, dazwischen sitzt ein Emoji im Button. Das Ergebnis wirkt wie ein Anzug aus drei verschiedenen Stoffen. Das Menü funktioniert technisch einwandfrei und kostet trotzdem Vertrauen.

Eine eigene Icon-Handschrift ist dagegen ein leiser, aber beständiger Markenbaustein. Kunden nehmen die Handschrift nicht bewusst wahr. Beim fünften Besuch erkennen dieselben Kunden die Seite trotzdem schneller. Diese Wiedererkennung rechtfertigt den Aufwand, Icons bewusst zu erstellen, statt die Symbole irgendwo zusammenzusuchen.

Der Unterschied zwischen Icon und Piktogramm ist dabei fließend. Piktogramme sind 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 braucht 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. Hat eine Grafikdesign-Agentur bereits Logo und Hausfarben entworfen, kann dasselbe Team auch das Icon-Set in der passenden Handschrift zeichnen; eine Auswahl zeigt der Vergleich der Grafikdesign-Agenturen.

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 zeigt Ihre Website denselben Stil wie die Websites Tausender anderer 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. Ein einheitliches Set 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

Eine Kombination der 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 verkürzt und die Core Web Vitals verbessert. 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 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 holt immer die komplette Bibliothek vom Server, auch bei fünf genutzten Symbolen. Außerdem tun sich Screenreader mit Icon-Fonts schwer, was die Barrierefreiheit beeinträchtigt. 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 Sie den ersten Strich ziehen, schreiben Sie in einem Satz auf, was das Icon bedeuten soll. „Ein Zahnrad für Einstellungen“ ist klar, „etwas Technisches“ dagegen nicht. 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. Der Abgleich verhindert, dass Sie mit 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 beruhen auf einem einheitlichen Raster. Der Standard heißt 24 mal 24 Pixel mit 2 Pixel Strichstärke.

Für kompakte UI-Elemente eignen sich auch 16 mal 16 Pixel, für größere Illustrationen 48 mal 48 Pixel. Wichtig bleibt nur, dass alle Symbole Ihres Sets dasselbe Raster nutzen.

Schritt 4: Skizzieren

Bleistift auf Papier ist dem Wacom-Tablett überlegen, solange Sie noch am Anfang des Prozesses stehen. 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

Setzen Sie das fertige Symbol im Browser neben echte Inhalte. Ist 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. Halten Sie Dateinamen, Raster, Strichstärke und Einsatzzweck in einem Icon-Verzeichnis fest. 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

Zur Wahl stehen Outline (nur Konturen), Solid (ausgefüllt) und Duotone (zweifarbig). Entscheiden Sie sich für genau einen Stil und halten Sie ihn durch. Ein ausgefülltes Home-Symbol neben einem Menü-Symbol aus reinen Konturen 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 erscheinen in Ihrer Unternehmensfarbe.

Regel 4: Konsistente Metaphern

Die Funktion Speichern zeigt immer eine Diskette, nie mal eine Wolke und mal einen Stift. Bleiben Sie im Symbolvokabular Ihres Produkts bei derselben visuellen Sprache.

Regel 5: Optische Korrektur vor mathematischer Exaktheit

Ein kreisrundes Icon wirkt neben einem quadratischen optisch zu klein, obwohl beide mathematisch exakt gleich groß sind. Profis korrigieren das nach Augenmaß, 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. Deshalb sehen gute Icons schlichter aus, als Auftraggeber sich die Symbole zunächst vorstellen.

Welche Werkzeuge brauchen Designer und Entscheider wirklich?

Über die Qualität entscheidet das Werkzeug nicht, wohl aber über das Tempo, mit dem Sie zum Ergebnis kommen.

Für Designer

Figma ist Stand April 2026 der 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 kostete im April 2026 ab rund 25 Euro pro Monat.

Affinity Designer bietet ähnliche Funktionen wie Illustrator ohne Abomodell. Für Freelancer und kleine Studios ist das Programm deshalb eine günstige Alternative.

Inkscape ist die kostenlose Open-Source-Lösung, deren Funktionsumfang für professionelle Icon-Arbeit ausreicht. 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 mit 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 verlinkt die Bibliotheken bewusst nicht. Symbolzahlen, Lizenzen und Preise geben den Stand vom April 2026 wieder. Prüfen Sie gerne selbst die jeweiligen Lizenzbedingungen, bevor Sie eine Quelle dauerhaft in Ihren Projekten einsetzen.

Lucide: Die Community-getriebene Weiterentwicklung von Feather Icons umfasst über 1.000 Symbole unter MIT-Lizenz und ist die erste Empfehlung für minimalistisches Design. Das Projekt erhält regelmäßige Updates und bietet Integrationen für React, Vue, Svelte und Angular.

Heroicons: Rund 300 handgezeichnete Symbole stammen vom Team hinter Tailwind CSS, jeweils als Outline-, Solid- und Mini-Variante. Mit ihrer MIT-Lizenz passen Heroicons ideal zu Tailwind-Projekten.

Tabler Icons: Über 6.000 Symbole liegen auf einem 24-mal-24-Raster mit anpassbarer Strichstärke, ebenfalls unter MIT-Lizenz. Tabler zählt damit zu den besten Allround-Bibliotheken überhaupt.

Phosphor Icons: Phosphor liefert über 1.200 Basis-Symbole in sechs Gewichtsstufen von Thin bis Duotone, unter MIT-Lizenz. Visuelle Hierarchien steuern Sie damit allein über die Gewichtung, was eine einzigartige Flexibilität schafft.

Google Material Symbols: Über 2.500 Symbole stehen in vier Varianten (Outlined, Rounded, Sharp, Filled) unter Apache-2.0-Lizenz bereit. Für Material-Design-Projekte ist die Bibliothek die erste Wahl.

Bootstrap Icons: Das Bootstrap-Team stellt über 2.000 Symbole unter MIT-Lizenz bereit, besonders geeignet für Bootstrap-basierte Oberflächen.

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

Flaticon: Über 18 Millionen Symbole von Tausenden Designern dürfen Sie kostenlos nur mit sichtbarer Namensnennung verwenden. Das Premium-Abo für die Nutzung ohne Namensnennung kostet ab rund 10 Euro pro Monat. Stärke und Schwäche liegen hier nah beieinander: Flaticon bietet Symbole wie Sand am Meer, die Stilkonsistenz müssen Sie selbst sicherstellen.

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

The Noun Project: Über 5 Millionen Symbole von Designern weltweit sorgen für enorme stilistische Vielfalt. Mit Namensnennung ist die Nutzung kostenlos, das Pro-Abo kostet rund 40 US-Dollar pro Jahr.

Simple Icons: Über 3.000 SVG-Symbole zeigen ausschließlich Marken und Logos, unter CC0-Lizenz (Public Domain). Sobald Sie Drittmarken in Ihren Inhalten zeigen wollen, ist die Sammlung unverzichtbar.

Iconify: Iconify ist kein eigenes Set, sondern eine Meta-Plattform, die über eine einheitliche API Zugriff auf über 200.000 Symbole aus mehr als 200 Bibliotheken gibt. Entwicklerteams, die flexibel zwischen Sets wechseln wollen, finden hier die passende Lösung.

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. Auch ein deutscher Anbieter steht zur Wahl: 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 eine der liberalsten verbreiteten Open-Source-Lizenzen. Das Modell erlaubt kommerzielle Nutzung, Veränderung und Weiterverbreitung. Die einzige Bedingung: Der originale Copyright-Hinweis muss erhalten bleiben, typischerweise irgendwo im Projekt-Repository. Unternehmen setzen die Lizenz bedenkenlos ein. Apache 2.0 funktioniert ähnlich und enthält zusätzlich einen ausdrücklichen Patentschutz, auch diese Lizenz eignet sich ohne Einschränkung für Unternehmen.

Gefährlich werden Plattformen wie Flaticon oder The Noun Project. Für die „kostenlose“ Nutzung verlangen die Plattformen eine sichtbare Attribution auf Ihrer Website. Vergessen Sie die Namensnennung, verstoßen Sie gegen die Lizenzbedingungen. Abmahnungen wegen fehlender Namensnennung sind in Deutschland dokumentiert. Creative Commons ist ein Minenfeld eigener Art. CC BY erlaubt kommerzielle Nutzung mit Namensnennung. CC BY-NC verbietet kommerzielle Nutzung komplett, CC BY-ND jede Bearbeitung. Unter Creative Commons prüfen Sie deshalb jedes Symbol einzeln.

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. Bis zu 20 Icons bleibt Inline-SVG 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 viele Unternehmen mit digitalen Produkten und Dienstleistungen zur Barrierefreiheit.

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 den Mindestwert der 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 aber 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. Unternehmen gewinnen damit rechtliche Sicherheit bei der kommerziellen Nutzung von Icon-Bibliotheken.

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 auf 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. Ein 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 gestaltbar und können direkt in HTML eingebettet werden. SVG ist 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. Ein Sprite 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