# React QR Code mit Logo: runde Module, PNG und SVG > Bau einen React QR Code mit Logo, der trotzdem scannt: runde oder gepunktete Module, ein freies Feld in der Mitte, die richtige Fehlerkorrektur, PNG und SVG. - Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI - Veröffentlicht: 19. Okt. 2026 - Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components) - Lesezeit: 9 Min. - Kanonische URL: https://wingo-ui.com/de/blog/react-qr-code-with-logo - Englische Fassung: https://wingo-ui.com/blog/react-qr-code-with-logo ## Kurz gesagt Ein React QR Code mit Logo scannt zuverlässig, wenn das Logo auf einem freigeräumten Feld in der Mitte sitzt, nur einen kleinen Teil des Codes verdeckt und die Fehlerkorrektur auf Q oder H angehoben wird, um die verlorenen Module auszugleichen. Setz dunkle Module in beiden Themes auf eine helle Kachel und lass rund um den Code eine Ruhezone frei. Der QR Code von Wingo UI erledigt das alles mit einem einzigen Prop, value, zeichnet runde oder gepunktete Module und exportiert PNG oder SVG mit eingebettetem Logo. 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](https://wingo-ui.com/components/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: | Stufe | Stellt etwa wieder her | Preis | |---|---|---| | L | 7% | kleinstes Raster | | M | 15% | der übliche Standard | | Q | 25% | dichteres Raster | | H | 30% | dichtestes Raster | 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. | Option | Ausgabe | Logo | Styling | Export | |---|---|---|---|---| | [qrcode.react](https://github.com/zpao/qrcode.react) (ISC, 4.2.0) | `QRCodeSVG` oder `QRCodeCanvas` | `imageSettings` mit `src`, `width`, `height` und `excavate` | Farben, level (Standard L), `marginSize` (Standard 0) | nicht eingebaut | | [react-qrcode-logo](https://github.com/gcoro/react-qrcode-logo) (MIT, 4.1.0) | Canvas | `logoImage`, `logoWidth` (Standard size × 0.2), `removeQrCodeBehindLogo` (Standard false) | `qrStyle` squares, dots oder fluid, `eyeRadius`, `ecLevel` (Standard M) | `download()` als png, jpg oder webp, dazu `generateBlob` ohne Mounten | | [qr-code-styling](https://github.com/kozakdenys/qr-code-styling) (MIT, 1.9.2) | Canvas oder SVG, framework-unabhängig | `image` mit `imageSize` (Standard 0.4) und `hideBackgroundDots` (Standard true) | sechs Punktformen, Formen für Eckquadrate und Eckpunkte, Verläufe | `download()` als png, jpeg, webp oder svg | | [Wingo UI QR Code](https://wingo-ui.com/components/qr-code) (Pro) | Inline-SVG, Quellcode in deinem Repo | `logo` als URL oder Node, `logoSize` 0.1 bis 0.3, `excavate` (Standard true) | `moduleStyle`, `finderStyle`, `finderColor` | PNG, SVG, Teilen, Bild kopieren | 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ß. ```bash npx wingo-ui@latest add qr-code ``` ```tsx import { QrCode } from "@/components/ui/qr-code" export function PayInvoice() { return ( ) } ``` Die Props, die du am häufigsten änderst: - **`logo`**: eine Bild-URL oder ein React-Node, etwa ein Inline-`` 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](https://wingo-ui.com/components/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. > Live-Demo (QR Code): Ändere im Playground den Stil von Modulen und Augen und die Logo-Größe: Die Stufenanzeige unter dem Code zeigt, wann das Logo die Stufe auf Q oder H anhebt. Probier sie unter [QR Code](https://wingo-ui.com/components/qr-code) aus und installier sie mit `npx wingo-ui@latest add qr-code`. ## 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. ```tsx ``` 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](https://wingo-ui.com/de/blog/react-color-picker) die Eingabe in HEX und OKLCH. > Live-Demo (QR Code): Probier die kreisrunden Augen mit oranger Finder-Farbe zusammen mit den Punkt-Modulen aus und scann dann den Bildschirm mit der Kamera deines Smartphones. Probier sie unter [QR Code](https://wingo-ui.com/components/qr-code) aus und installier sie mit `npx wingo-ui@latest add qr-code`. ## 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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/file-export) 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 }`: ```tsx "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(null) return (
) } ``` `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: `, 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](https://wingo-ui.com/components/use-clipboard). ## 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](https://wingo-ui.com/de/pricing)). Der [Guide zum React Signature Pad](https://wingo-ui.com/de/blog/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](https://wingo-ui.com/de/blog/category/components), neben dem [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide). ## Komponenten in diesem Artikel - [QR Code](https://wingo-ui.com/components/qr-code) (Pro): A React QR code generator with rounded or dotted modules, soft eyes, a center logo, any colors, a caption and one-tap PNG or SVG export. Installation: `npx wingo-ui@latest add qr-code` - [File export](https://wingo-ui.com/components/file-export) (Pro): File export helpers for React apps: download blobs, text and JSON, turn a canvas or an SVG into a PNG, copy images and name files cleanly. Installation: `npx wingo-ui@latest add file-export` - [useClipboard](https://wingo-ui.com/components/use-clipboard) (Free): A React copy-to-clipboard hook with a copied flag that resets itself, and a fallback for pages without the Clipboard API. Installation: `npx wingo-ui@latest add use-clipboard` ## 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. --- Quelle: https://wingo-ui.com/de/blog/react-qr-code-with-logo