QR codes as SVG, with a logo in the middle.

Playground

Try it live.

Tweak the QR below, then download it or copy it as an image.

Render

qr-code.tsx

One component. Every knob from the playground above is a prop.

import { QRCodeSVG } from '@zxkit/qrix'

<QRCodeSVG
  value='https://example.com'
  size={256}
  fgColor='#262626'
  logoUrl='/logo.svg'
  logoSize={20}
  quietZone={4}
  errorCorrectionLevel='M'
/>

Utilities

actions.ts

Download or copy the same QR you render — no canvas wiring on your side.

import {
  copyQRCodeToClipboard,
  downloadQRCodePNG,
  downloadQRCodeSVG,
} from '@zxkit/qrix'

await downloadQRCodePNG({ value, size, fgColor, logoUrl })
await downloadQRCodeSVG({ value, size, fgColor, logoUrl })
await copyQRCodeToClipboard({ value, size, fgColor, logoUrl })

SVG-based

Crisp at any size, styleable with className and style like any element.

Logo support

Embed an image or SVG in the center, with size and padding control.

Error correction

Levels L, M, Q, and H — raise it when a logo covers more modules.

Utilities included

Download as PNG or SVG, or copy the QR straight to the clipboard.

Lightweight

Minimal dependencies, React 18 and 19.