↑↓ Auswählen↵ ÖffnenEsc Schließen

CSS, Design & IconsSVG, JSX & Tailwind in PNG

Icon-Code in Bild umwandeln

Füge Icon-Code von überall ein: SVG, JSX, Tailwind, CSS-Variablen. Du bekommst PNGs, Favicons und Social Cards.

Auf einen Blick

  • Liest Tailwind-Klassen und CSS-Variablen
  • PNG bis 8192 px
  • Favicon-Paket und Social Card
  • Code bleibt auf deinem Gerät

So wird aus Icon-Code ein Bild

In einer Codebasis ist ein Icon selten eine Datei, die du herunterladen kannst. Es ist ein SVG in einer Komponente, eingefärbt über Tailwind-Klassen, currentColor und CSS-Variablen, die nur in deinem Projekt etwas bedeuten. Füge diesen Code hier unverändert ein, und das Tool ermittelt, wie das Icon aussehen soll: Hintergrund, Form, Innenabstand und jede Farbe.

Es läuft in deinem Browser, dein Code wird also nie hochgeladen. Eingefügter Code gilt als nicht vertrauenswürdig: Skripte, Event-Handler und Links zu anderen Seiten werden entfernt, bevor etwas gezeichnet wird.

Was du einfügen kannst

  • Reines SVG aus einer Datei, einem Design-Tool oder einer Icon-Bibliothek.
  • JSX oder TSX, auch eine ganze Komponente. className, strokeWidth und Prop-Spreads werden umgewandelt.
  • Markup mit Tailwind-Klassen, einschließlich des Elements um das Icon, das ihm Hintergrund und Form gibt.
  • CSS-Variablen wie var(--brand). Füge auch dein Theme ein, dann füllen sie sich von selbst.

Beginne unten mit Schritt 1. Füge deinen Code ein oder probier ein Beispiel. In Schritt 2 legst du jede Farbe fest, die das Tool nicht ermitteln konnte. In Schritt 3 passt du Form und Innenabstand an. In Schritt 4 lädst du ein PNG, ein SVG, ein Favicon-Paket oder eine Social Card herunter (50 Downloads pro Tag, kostenlos).

Schritt 1 von 4

Füge deinen Icon-Code ein

SVG, JSX oder Markup mit Tailwind-Klassen. Das Tool findet das Icon, seinen Hintergrund und seine Farben.

Beispiele

Das ist Beispielcode. Füge deinen eigenen ein, um ihn zu ersetzen.

Theme-Tokens (optional)

Füge deine CSS-Variablen oder dein Tailwind-Theme ein, und jede passende Klasse und jedes var() füllt sich von selbst. 3 Farben aus deinem Theme gelesen.

Schritt 2 von 4

Prüfe die Farben

Jedes Farb-Token in deinem Code und woher sein Wert stammt. Lege die fest, die das Tool nicht ermitteln konnte.

Füge in Schritt 1 Icon-Code ein, um hier seine Farben zu sehen.

Schritt 3 von 4

Wähle die Form

Die Hintergrundform und der Abstand um das Icon. Beide starten mit dem, was dein Code vorgibt.

Hintergrundform
18 %

Vorschau

Hintergrund der Vorschau

Füge in Schritt 1 Icon-Code ein, um hier die Vorschau zu sehen.

Schritt 4 von 4

Export

Ein PNG in beliebiger Größe, ein eigenständiges SVG, ein komplettes Favicon-Paket oder eine Social Card.

Von 16 bis 8192 px. Größen über 4096 px brauchen viel Speicher und können auf Smartphones fehlschlagen.

Optionen für die Social Card

Kostenlos: heute noch 50 von 50 Downloads · Kopieren ist unbegrenzt

Dein Code wird auf diesem Gerät gelesen und gezeichnet und nie hochgeladen.

Leitfaden zu Icon-Code

Vom Icon-Code zur Bilddatei

Was das Tool in deinem Code liest, woher jede Farbe stammt und wofür die exportierten Dateien da sind.

Die Grundlagen

Was das Tool liest

Ein Icon in einem Projekt ist mehr als sein SVG. Das Element drumherum und die Klassen daran bestimmen, wie es aussieht. Das Tool liest vier Dinge.

1

Das Icon

Das erste SVG in deinem Code. Gibt es mehrere, wählst du, welches exportiert wird.

2

Der Wrapper

Das nächste Element um das Icon, das einen Hintergrund hat. Es liefert Hintergrundfarbe, Form und Größe der Box.

3

currentColor

Icons übernehmen ihre Farbe oft von der Textfarbe um sie herum. Das Tool sucht die nächste Textfarben-Klasse oder den nächsten color-Style.

4

Farb-Tokens

Benannte Farben wie bg-ink oder var(--brand). Jede steht in Schritt 2, zusammen mit der Herkunft ihres Werts.

Warum es auf deinem Gerät läuft

Der Code wird in deinem Browser gelesen und gezeichnet. Er wird nie hochgeladen, es gibt kein Konto, und die Dateien entstehen auf deinem eigenen Gerät.

Beispiel

Ein Logo, Schritt für Schritt gelesen

Das ist das erste Beispiel im Tool: ein Logo als Markup mit Tailwind-Klassen, dazu drei Farben aus dem Theme des Projekts.

<span class="grid size-8 place-items-center rounded-full bg-ink text-card">
  <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor">
    …
    <circle cx="12" cy="7" r="1.1" class="fill-brand-500 stroke-none"></circle>
  </svg>
</span>

Das Ergebnis bei 512 px. Der Innenabstand ergibt sich aus den beiden Größen: Ein 20-px-Icon in einer 32-px-Box lässt 6 px auf jeder Seite, das sind 18,8 % der Box.

Was das Tool findet

size-8 am span
Eine 32-px-Box
rounded-full
Kreis
bg-ink
Hintergrund: Token ink
size-5 am svg
Ein 20-px-Icon, also 18,8 % Innenabstand
text-card + currentColor
Linienfarbe: Token card
fill-brand-500
Punkt: Token brand-500
stroke-none
Keine Kontur am Punkt

ink, card und brand-500 sind keine Tailwind-Standardfarben, ohne Hilfe bräuchten sie also einen Wert. Das Theme des Beispiels definiert alle drei als CSS-Variablen, und sie werden von selbst ermittelt.

Farben

Woher jede Farbe stammt

Für jedes Farb-Token nimmt das Tool den ersten Wert, den es in dieser Reihenfolge findet. Schritt 2 zeigt, welchen es verwendet hat.

RangQuelleWas das ist
1Von dirEine Farbe, die du in Schritt 2 gewählt oder eingetippt hast. Sie hat immer Vorrang.
2ThemeCSS-Variablen oder ein Tailwind-Farbobjekt, das du unter Theme-Tokens eingefügt hast. --color-ink und ink sind dasselbe Token.
3var()-FallbackDer zweite Wert in var(--brand, #0f766e), wenn der Code einen angibt.
4Tailwind-StandardDie Palette von Tailwind 4, für Klassen wie bg-indigo-600 oder text-white.
5Braucht einen WertNichts definiert sie. Die Vorschau nutzt einen Platzhalter, bis du sie festlegst.

In den Dateien, die du herunterlädst, stehen Farben als einfache Hex-Codes, bei Bedarf mit eigener Deckkraft, nicht als CSS-Variablen oder Klassen. Die Dateien hängen also nicht vom Stylesheet deines Projekts ab.

Favicon-Paket

Wofür jede Favicon-Datei da ist

Das Paket ist ein ZIP mit zehn Dateien. Kopier sie ins Hauptverzeichnis deiner Website und füge dann die Zeilen aus head-snippet.html in den head deiner Seite ein.

DateiGrößeVerwendung
favicon.ico16, 32, 48 pxBrowser-Tabs und Lesezeichen sowie alles, was /favicon.ico anfragt.
favicon.svgBeliebigBrowser, die ein SVG-Icon akzeptieren. Bleibt in jeder Größe scharf.
favicon-16x16.png, favicon-32x32.png16, 32 pxPNG-Versionen des Tab-Icons.
apple-touch-icon.png180 pxHomescreens von iPhone und iPad. Ein volles Quadrat ohne Transparenz.
icon-192.png, icon-512.png192, 512 pxAndroid-Homescreens und installierte Web-Apps.
icon-maskable-512.png512 pxAdaptive Icons unter Android. Ein volles Quadrat mit zusätzlichem Platz, damit der Zuschnitt auf einen Kreis das Icon nicht anschneidet.
site.webmanifestListet die Icons für installierte Web-Apps auf. Trag dort den Namen deiner Website ein.
head-snippet.htmlDie link- und meta-Tags zum Einfügen in den head deiner Seite.

Gut zu wissen

Was es liest und was nicht

Das Tool liest Code, es führt ihn nicht aus. Alles, was es erst gibt, wenn dein Projekt läuft, musst du von Hand festlegen.

SVG, JSX und TSX

Reines SVG oder eine ganze React-Komponente. JSX-Attribute werden in SVG-Attribute umgewandelt.

Tailwind-Farbklassen

Hintergrund, Text, Füllung und Kontur, mit Deckkraft-Modifikatoren, beliebigen Werten und CSS-Variablen.

Größen und Ecken

Die Klassen size, w, h und rounded oder width, height und border-radius in einem style-Attribut.

Dark-Varianten

dark:-Klassen bleiben standardmäßig außen vor. Schalte Dark-Variante verwenden ein, um die dunkle Version zu exportieren.

Was es nicht lesen kann

Grenze 1

Deine eigenen CSS-Klassen

Eine Klasse wie .icon-primary ist in einem Stylesheet definiert, das das Tool nie sieht. Schreib die Farbe in den Code oder nutz eine CSS-Variable und leg sie in Schritt 2 fest.

Grenze 2

Per JavaScript gesetzte Werte

fill={color} oder eine zur Laufzeit gebaute Klasse hat im Code selbst keinen Wert, das Attribut entfällt also. Leg die Farbe in Schritt 2 fest.

Grenze 3

Verläufe und Hintergrundbilder

Ein Wrapper mit Verlauf oder Hintergrundbild wird übersprungen. Die Hintergrundform hat genau eine Volltonfarbe.

Häufige Fragen

Icon-Code in Bild: häufige Fragen

Kurze Antworten zu SVG und JSX, Tailwind-Farben, Favicons, Transparenz, Datenschutz und Limits.

Wie wandle ich SVG-Code in ein PNG um?

Füge den SVG-Code in Schritt 1 ein, wähl in Schritt 4 eine Größe und klick auf PNG herunterladen. Du kannst jede Größe von 16 bis 8192 Pixel exportieren. Bereiche, die das Icon nicht bedeckt, bleiben transparent. Nutzt das SVG CSS-Variablen oder currentColor, listet das Tool jede Farbe in Schritt 2 auf, damit du sie vor dem Export festlegen kannst.

Wie mache ich aus einem React-Icon (JSX) ein Bild?

Füge die Komponente unverändert ein, samt der Funktion drumherum. Das Tool findet das Markup, wandelt className in class und Attribute wie strokeWidth in stroke-width um und ignoriert Prop-Spreads und andere JavaScript-Ausdrücke. Werte, die es erst zur Laufzeit gibt, etwa fill={color}, lassen sich nicht lesen. Leg diese Farben in Schritt 2 selbst fest oder schreib sie in den Code.

Warum steht bei einer Farbe „braucht einen Wert“?

Der Code nennt eine Farbe, die das Tool nicht nachschlagen kann, etwa eine eigene Tailwind-Farbe (bg-ink) oder eine CSS-Variable (var(--brand)), die an anderer Stelle in deinem Projekt definiert ist. Füge deine CSS-Variablen oder dein Tailwind-Theme unter Theme-Tokens ein, dann füllen sie sich von selbst, oder wähl die Farbe von Hand. Bis dahin nutzt die Vorschau einen Platzhalter.

Welche Tailwind-Klassen versteht das Tool?

Farbklassen für Hintergrund, Text, Füllung und Kontur (bg-, text-, fill-, stroke-), mit Deckkraft-Modifikatoren wie bg-black/50, beliebigen Werten wie bg-[#123456] und fill-[var(--x)] sowie der Tailwind-4-Kurzform bg-(--x). Es liest außerdem Konturstärken (stroke-2), Größen (size-8, w-8, h-8) und abgerundete Ecken (rounded-full, rounded-2xl). Standardfarben wie indigo-600 stammen aus der Tailwind-4-Palette. Klassen mit einer Variante wie hover: oder md: werden ignoriert, und dark:-Klassen gelten nur, wenn du Dark-Variante verwenden einschaltest.

Was ist im Favicon-Paket?

Ein ZIP mit zehn Dateien: favicon.ico (16, 32 und 48 px), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest und head-snippet.html. Leg die Dateien ins Hauptverzeichnis deiner Website und füge die Zeilen aus head-snippet.html in den head deiner Seite ein.

Warum sehen Apple-Touch- und Maskable-Icon anders aus als mein Icon?

Smartphones schneiden Homescreen-Icons auf ihre eigene Form zu, und iOS füllt transparente Bereiche schwarz. Deshalb sind diese beiden Dateien immer ein volles Quadrat in der Hintergrundfarbe deines Icons (Weiß, wenn es keine hat), mit zusätzlichem Platz um das Icon: mindestens 14 % beim Apple-Touch-Icon und 24 % beim Maskable-Icon. Die anderen Dateien behalten die Form, die du gewählt hast.

Bekomme ich ein PNG mit transparentem Hintergrund?

Ja. Alles außerhalb der Hintergrundform ist transparent, ein Kreis oder ein abgerundetes Quadrat hat also transparente Ecken. Wähl in Schritt 3 Keine, um die Hintergrundform ganz wegzulassen und nur das Icon zu exportieren.

Wie groß ist die Social Card?

1200 × 630 Pixel, die Größe für Link-Vorschauen (Open-Graph-Bilder) in den meisten sozialen Netzwerken und Chat-Apps. Sie zeigt dein Icon auf einer Farbe deiner Wahl, auf Wunsch mit einem Titel daneben.

Wird mein Code hochgeladen?

Nein. Der Code wird in deinem Browser gelesen und gezeichnet, auf deinem Gerät. Die Seite schickt ihn nirgendwohin, und er ist weg, sobald du den Tab schließt oder neu lädst.

Ist es sicher, Code einzufügen, den ich woanders kopiert habe?

Eingefügter Code gilt als nicht vertrauenswürdig. Bevor etwas gezeichnet wird, entfernt das Tool script-Elemente, Event-Handler wie onload, eingebettete Seiten, Links zu anderen Websites und Bilder, die von anderen Websites geladen werden. Die Dateien, die du herunterlädst, enthalten nur die Zeichnung.

Ist das Tool kostenlos?

Ja, ohne Anmeldung. Du hast 50 Downloads pro Tag für PNG, SVG, Favicon-Paket und Social Card zusammen, und der Zähler wird um Mitternacht zurückgesetzt. SVG-Code kopieren und PNG kopieren zählen nicht mit.

Ähnliche Tools

Weitere Tools, die in deinem Browser laufen

Setz dein Logo auf Preisschilder, wandle Markdown in HTML um oder gib einem Foto einen Retro-Look. Auch hier wird nichts hochgeladen. Den Digicam-Filter gibt es auf Deutsch, Price Tag Maker und Markdown to HTML bisher nur auf Englisch.