Skip to main content

Logos

<QrCodeSvg
  value={url}
  logo={{
    source: <Image source={logoImage} style={{ width: '80%', height: '80%' }} />,
    cells: 6, // side of the cleared area, in modules
    style: { alignItems: 'center', justifyContent: 'center' },
  }}
/>

The modules behind the logo are cleared and a background-colored square is drawn there. The code still scans because error correction restores the hidden data, so:

  • With a logo, the error correction level defaults to H (instead of M). Pass errorCorrectionLevel to choose another one.
  • In development you get a warning when the logo hides more data than the level reliably restores. The limits come from the scan tests.
👋
Short value, 6 modules
🚀
Longer value, 12 modules

Bigger codes have more room: a 12-module logo is fine for a URL, but would break Hello world!. If you need a bigger logo, use a longer value (such as a full URL) rather than a lower level.

The level is also raised automatically whenever that fits into the same size, so you usually get more redundancy than you asked for at no cost.