React QR Code mit Logo: runde Module, PNG und SVG

Du brauchst einen React QR Code mit Logo für eine Rechnung, ein Ticket oder die WLAN-Karte im Büro. Die erste Version ist ein schwarz-weißes Raster aus einer Library. Dann will das Designteam das Markenzeichen in der Mitte, runde Punkte und das Marken-Orange auf den Eckaugen, das Marketing will ein PNG mit 2048px für den Druck, und jemand hält das Smartphone auf den Bildschirm im Dark Mode, und nichts passiert. Dieser Guide zeigt, was einen gestylten Code scannbar hält, welche Props im QR Code von Wingo UI wichtig sind und wie der Export als PNG und SVG funktioniert, und endet mit einem kompletten Beispiel.

Scannt ein QR Code mit Logo in der Mitte noch?

Ja, denn QR Codes haben eine eingebaute Fehlerkorrektur. Redundante Daten, die über das ganze Raster verteilt sind, erlauben einem Scanner, die Nachricht zu rekonstruieren, wenn ein Teil fehlt, und ein Logo ist ein Schaden, den du absichtlich einbaust. Vier Stufen legen fest, wie viel Redundanz der Code trägt:

Der Preis ist die Dichte: Dieselbe URL braucht bei H mehr Module pro Seite als bei L, also wird jedes Modul kleiner und ist aus der Entfernung schwerer zu lesen. Deshalb tut ein guter React QR Code Generator mit Logo zwei Dinge gleichzeitig: Er räumt nur die Module frei, die das Logo wirklich verdeckt, und er hebt die Stufe gerade so weit an, dass sie den Verlust ausgleicht.

Der QR Code von Wingo UI hebt die Stufe für dich an. Mit Logo wird level mindestens Q, und H, sobald logoSize über 0.2 liegt. Die verwendete Stufe steht am Root als data-level, und der Helfer effectiveQrLevel(level, logoSize) liefert dieselbe Antwort, falls du sie anzeigen willst. Der Standardwert von logoSize ist 0.22 der Codebreite, das Logo-Feld verdeckt also etwa 5% des Rasters (0.22 zum Quadrat). Das freigeräumte Quadrat lässt noch einen Ring Luft drumherum, und auch zusammen bleibt das klar unter den 30%, die H wiederherstellen kann. Weil 0.22 über 0.2 liegt, läuft das Standard-Logo mit H.

Drei Regeln entscheiden, ob der Code scannt:

1. Lass die drei Eckaugen in Ruhe. Über die Finder Patterns findet und orientiert eine Kamera den Code. Färb sie um, runde sie ab, aber verdeck sie nie.
2. Dunkle Module auf hellem Hintergrund. Nicht jeder Scanner liest invertierte Codes (hell auf dunkel). Die Komponente behält im Dark Mode absichtlich #111111 auf #ffffff.
3. Eine Ruhezone. Ein leerer Rand um den Code trennt ihn von der Seite. Der Standardwert von margin ist 2 Module, gezeichnet in einer Kachel, die noch 12px Padding in derselben Farbe ergänzt. Für einen nackten Code auf Papier mit framed={false} setz margin={4}, das ISO-Minimum.

Was bieten die React QR Code Libraries?

Wer nach einem React QR Code mit Logo sucht, stößt auf drei Pakete, jedes mit einem anderen Ansatz. Die Fakten stammen aus dem README des jeweiligen Projekts und seinem neuesten npm-Release, Stand 19. Oktober 2026.

qrcode.react passt, wenn du einen schlichten, kleinen, bekannten Code willst und deinen Download-Button selbst schreibst. react-qrcode-logo ist die bessere Wahl, wenn du ein Canvas, einen Raster-Download und Blob-Helfer willst, die ohne gemountete Komponente laufen. qr-code-styling hat die größte Auswahl beim React QR Code Styling (Formen wie classy und extra-rounded, Verläufe), wenn es dich nicht stört, eine Vanilla-Library in eine Ref zu packen. Achte bei den ersten beiden auf die Standardwerte: qrcode.react startet mit Stufe L ohne Rand, und react-qrcode-logo lässt die Module hinter dem Logo stehen, solange du removeQrCodeBehindLogo nicht einschaltest, also braucht ein Logo dort ein höheres ecLevel. Der Rest dieses Guides behandelt die Komponente von Wingo UI.

Welche Props braucht ein React QR Code mit Logo?

Nur eins. value ist der Text, den der Code kodiert: eine URL, ein String wie WIFI:T:WPA;S:...;; oder ein Zahlungs-String. Für alles andere gibt es Standardwerte, mit denen der Code scannt: runde Module, runde Augen, 192px, Stufe M, dunkel auf Weiß.

npx wingo-ui@latest add qr-code

import { QrCode } from "@/components/ui/qr-code"

export function PayInvoice() {
  return (
    <QrCode
      value="https://pay.acme.com/invoice/2026-0412?amount=3025.00"
      caption="Scannen und $3,025.00 bezahlen"
      logo="/logo.svg"
      downloadable
      fileName="Rechnung 2026-0412"
    />
  )
}

Die Props, die du am häufigsten änderst:

• logo: eine Bild-URL oder ein React-Node, etwa ein Inline-<svg> mit deinem Markenzeichen. Es sitzt auf einem freigeräumten Feld in der Mitte, mit runden Ecken und in der Farbe von background.
• logoSize: die Breite des Felds als Anteil am Code, begrenzt auf 0.1 bis 0.3.
• excavate: räumt die Module unter dem Logo frei, dazu mindestens ein halbes Modul Luft drumherum (Standard true). Ist es aus, liegt das Feld einfach über den Modulen, was mehr Fehlerkorrektur kostet.
• size: die Codebreite in px (der Rahmen fügt 12px Padding hinzu). Der Code wird nie breiter als sein Container und wird so weit vergrößert, dass jedes Modul mindestens 1,5px misst; in der Entwicklung gibt es dazu eine Warnung.
• caption und showValue: eine Zeile unter dem Code und der kodierte Text mit einem Kopieren-Button und einem Tooltip.
• framed und radius: die Kachel mit ihrem Schatten und ihre Ecken von none bis full.

Bei leerem value erscheint eine leere Kachel, bei einem Text, der für die Stufe zu lang ist, eine Fehlerkachel. Nichts davon wirft eine Exception.

Wie style ich einen QR Code in React, ohne ihn kaputtzumachen?

Ändere die Form jeder Zelle, aber nicht, welche Zellen dunkel sind. moduleStyle hat drei Werte:

• square: klassische, scharfe Quadrate, als durchgehende horizontale Streifen gezeichnet, damit keine Nähte entstehen.
• rounded (Standard): Eine Ecke wird nur rund, wenn keiner der Nachbarn sie berührt, dadurch verschmelzen benachbarte Module zu Pillen und Klecksen.
• dots: Kreise mit 85% der Zellgröße.

finderStyle gibt den drei Augen die Form square, rounded oder circle, jeweils mit äußerem Ring und innerem Auge in derselben Form. finderColor färbt sie in einer zweiten Farbe, und das ist der sicherste Platz für eine Markenfarbe: Die Augen sind groß, also bleibt auch ein Orange mittlerer Helligkeit gut lesbar.

<QrCode
  value="https://acme.com/events/summit-2026"
  moduleStyle="dots"
  finderStyle="circle"
  color="#0B3D2E"
  finderColor="#D63F00"
  background="#F6F1E7"
  radius="lg"
  caption="Acme Summit 2026"
/>

Halte color dunkel und background hell. Eine cremefarbene Kachel mit tiefem Grün funktioniert, Hellgrau auf Weiß nicht. background="transparent" ist für einen Code erlaubt, der auf eine farbige Karte gedruckt wird; dann bist du selbst für den Kontrast verantwortlich. Wenn du die Palette mit einem Picker baust, behandelt der Guide zum React Color Picker die Eingabe in HEX und OKLCH.

Wie lade ich einen React QR Code als PNG oder SVG herunter?

Schalt downloadable ein. Damit ist der übliche Wunsch „React QR Code als PNG herunterladen“ erledigt, ohne dass du einen eigenen Canvas-Helfer brauchst. Ein Download-Button öffnet ein Menü mit einem PNG in exportSize (standardmäßig 1024px) und einem SVG, das in jeder Größe scharf bleibt. Auf Smartphones öffnet sich das Menü über das Dropdown Menu als Bottom Sheet, und wo das Gerät Dateien teilen kann, öffnet eine Zeile „Share“ das Teilen-Menü des Smartphones. Wo die Zwischenablage Bilder annimmt, sitzt daneben ein Button „Copy image“. Die Dateinamen tragen einen Zeitstempel: fileName="Rechnung 2026-0412" wird als Rechnung-2026-0412-2026-10-19-1640.png gespeichert (Leerzeichen werden zu Bindestrichen).

Exporte entstehen aus derselben Geometrie, die der Bildschirm zeigt. Der SVG-Export ist eigenständiger Text mit Inline-Farben, und das PNG ist dieses SVG, von den Export-Helfern auf ein Canvas gezeichnet. Das hat eine Folge für Logos: Eine exportierte Datei kann nur ein Logo einbetten, das der Browser lesen darf. Inline-SVG-Nodes und Data-URLs funktionieren immer, URLs vom selben Origin und URLs mit CORS-Headern werden einmal geladen und eingebettet, und ein Logo von einem fremden Origin ohne CORS fehlt im Export (das freigeräumte Feld und die erhöhte Stufe bleiben). Liegt dein Logo auf einem CDN, übergib es als Inline-SVG oder liefere es mit CORS aus.

Für eigene Buttons gibt dir setApi nach dem Mounten einmal { toSvgString, toBlob, download, copy }:

"use client"

import { useState } from "react"
import { Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { QrCode, type QrCodeApi } from "@/components/ui/qr-code"
import { downloadBlob, timestampedFileName } from "@/lib/file-export"

export function PrintableCode() {
  const [api, setApi] = useState<QrCodeApi | null>(null)

  return (
    <div className="flex flex-col items-center gap-4">
      <QrCode value="https://acme.com/verify/2026-0412" logo="/logo.svg" setApi={setApi} />
      <Button
        variant="soft"
        leftIcon={<Download />}
        disabled={!api}
        onClick={async () => {
          if (!api) return
          const blob = await api.toBlob({ size: 2048 })
          downloadBlob(blob, timestampedFileName("Druck 2048", "png"))
        }}
      >
        PNG für den Druck
      </Button>
    </div>
  )
}

toBlob nimmt außerdem type, quality und background, für ein JPEG mit weißem Hintergrund reicht also eine zusätzliche Option. Ruf api.copy() direkt aus einem Click-Handler auf: Safari erlaubt Schreibzugriffe auf die Zwischenablage nur innerhalb einer Geste des Nutzers. onExport läuft nach jedem abgeschlossenen Download, Teilen oder Kopieren und bekommt Aktion, Format, Dateiname und Blob, dort gehört also dein Analytics-Code hin. Brauchst du denselben SVG-Text ohne gemountete Komponente, nimm qrToSvgString(value, options): Die Funktion nimmt dieselben Optionen wie die Props und braucht weder DOM noch Canvas.

Ist der QR Code barrierefrei?

Der Code ist ein SVG mit role="img" und einem zugänglichen Namen aus labels.image, standardmäßig QR code: <value>, damit Screenreader-Nutzer hören, wohin der Code führt. Downloads und Kopien werden über eine Live-Region (polite) angesagt. Mit Tab erreichst du nacheinander Download und „Copy image“, Enter oder Leertaste öffnet das Menü, mit den Pfeiltasten bewegst du dich darin, und Escape bringt den Fokus zurück zum Auslöser. Alle sichtbaren und angesagten Texte stecken in labels, das über DEFAULT_QR_CODE_LABELS gelegt wird, die Komponente lässt sich also ohne Fork übersetzen.

Mit showValue steht die URL unter dem Code, mit einem Kopieren-Button, für alle, die die Seite auf genau dem Smartphone lesen, mit dem sie den Code sonst scannen würden. Das Kopieren nutzt den kostenlosen use-clipboard-Hook.

Was sind die häufigsten Stolperfallen bei QR Codes?

• Ein Logo ohne Fehlerkorrektur dahinter. Module bei Stufe L oder M zu verdecken, ohne die Stufe anzuheben, ist der häufigste Grund, warum ein Code im Markendesign nicht mehr scannt. Hier wird die Stufe für dich angehoben, anderswo setzt du sie selbst.
• Zu viel Text. Eine lange URL mit Tracking-Parametern wird bei Stufe H zu einem dichten Raster winziger Module. Kürz die URL, bevor du den Code stylst.
• Invertierte Farben im Dark Mode. Ein heller Code auf einer dunklen Seite sieht richtig aus und scheitert an Scannern, die mit invertierten Codes nicht klarkommen. Behalt die helle Kachel.
• Nicht testen. Scann den fertigen Export mit zwei oder drei Smartphones, auf dem Bildschirm und auf Papier, bevor er auf irgendetwas Gedrucktes kommt.

Wie baue ich ihn in mein Projekt ein?

Führ npx wingo-ui@latest add qr-code aus. Die CLI kopiert qr-code.tsx nach components/ui, ergänzt die importierten Komponenten Button, Dropdown Menu, Skeleton und Tooltip, den Clipboard-Hook in hooks/ und die Helfer für Export, Motion und UI-Konfiguration in lib/ und installiert qrcode, motion und lucide-react. Der QR Code ist eine Pro-Komponente (Preise). Der Guide zum React Signature Pad nutzt dieselben Helfer für den Export als PNG und SVG, und weitere Deep Dives zu einzelnen Komponenten findest du in der Kategorie Komponenten-Guides, neben dem Guide zu React-Formularkomponenten.

Häufige Fragen

Wie füge ich in React ein Logo in einen QR Code ein?

Nimm eine QR-Komponente, die ein Logo annimmt und die Module darunter freiräumt, und erhöh dann die Fehlerkorrektur. Beim QR Code von Wingo UI übergibst du logo als Bild-URL oder als Inline-SVG-Node; die Komponente räumt in der Mitte ein Feld frei und hebt die Stufe auf mindestens Q an.

Welche Fehlerkorrektur braucht ein QR Code mit Logo?

Q oder H. Q stellt etwa 25% beschädigter Daten wieder her, H etwa 30%, deshalb lässt sich der Code auch dann noch lesen, wenn ein Logo einige Module verdeckt. Höhere Stufen machen das Raster dichter, halte das Logo also lieber klein, statt dich allein auf H zu verlassen.

Wie groß darf das Logo in einem QR Code sein?

Halte es deutlich unter der Wiederherstellungsgrenze und weg von den drei Eckaugen. Der QR Code von Wingo UI begrenzt das Logo-Feld auf 10% bis 30% der Codebreite und nutzt standardmäßig 22%; ein solches Feld verdeckt etwa 5% der Rasterfläche.

Wie lade ich einen React QR Code als PNG herunter?

Rendere den Code als SVG, zeichne ihn in der gewünschten Größe auf ein Canvas und speichere das Canvas als PNG-Blob. Der QR Code von Wingo UI macht das mit downloadable (ein Download-Menü mit PNG und SVG) oder mit setApi, das dir toBlob, toSvgString, download und copy für eigene Buttons gibt.

Lassen sich gestylte QR Codes mit runden Punkten noch scannen?

Ja, solange die Module in ihren Rasterzellen bleiben, die Finder Patterns ihre Form behalten und der Kontrast hoch ist. Runde und gepunktete Module ändern nur den Umriss jeder Zelle, dunkel bleiben also dieselben Zellen, und die Daten ändern sich nicht.

Ist der QR Code von Wingo UI kostenlos?

Nein, der QR Code ist eine Pro-Komponente, ebenso die Export-Helfer, die er nutzt. Button, Tooltip, Dropdown Menu, Skeleton und der Clipboard-Hook, auf denen er aufbaut, sind kostenlos.