react-qrcode-logo: a React QR code that takes your logo and colors

A canvas QR code with a logo on top

react-qrcode-logo is a React and TypeScript component for generating a customizable QR code, and the design goal is stated in the repository description: a QR code with custom colors and a logo.

The interesting part is what that implies. Putting an image in the middle of a QR code damages it, because the finder patterns and the data modules carry the information, and covering them makes the code unreadable. Any component that offers this feature has to deal with the damage, and this one exposes the knobs for doing so: a padding border around the logo, an opacity setting, and a prop that removes the QR cells behind the logo entirely.

The package is small in dependency terms. The runtime dependencies list contains exactly one package, qrcode-generator at 2.0.4 or newer, which does the actual encoding and rendering of the modules. React and React DOM are peer dependencies at 18 or newer, and the README states the compatibility rule directly: if you are on React 18 or later, use react-qrcode-logo 3.0.0 or newer.

The package version in the repository is 4.1.0, the licence is MIT, the authors are Giulia Coro and Franco Berton, and the repository has no GitHub releases. The last push was on 2026-07-15 and the repository is not archived.

The audience is a React developer who needs a branded QR code in the product itself, with the logo as an asset rather than a design export, and who wants the code to keep scanning when a scanner app is pointed at it.

Install is one command and usage is two lines

The installation section is a single command that saves the package into the project's dependencies.

npm install --save react-qrcode-logo

The usage is a named import and a component with a value prop.

// import
import { QRCode } from 'react-qrcode-logo';

// usage
<QRCode value="https://github.com/gcoro/react-qrcode-logo" />

The export is named rather than default, which is a small thing that matters when the import list grows.

The value prop is the payload, and it has a default of https://reactjs.org/, so a component with no props still renders something valid. The README describes it as the value encoded in the QR code, and notes that when the code is decoded this value is returned, which is the entire contract with the scanner.

Everything else on the component is optional styling. That is the shape of the library: a working QR code by default, with a long list of props for the cases where you need the code to look like your brand rather than like a QR code.

The logo props are where the design decisions live

The logo group of props is the reason to use this component rather than a plain QR generator, and the README documents each one carefully.

The logo image itself is a src attribute, and it can be a url or a path or a base64 value, which covers the three ways you might have a logo: hosted somewhere, bundled in the project, or inlined. The width defaults to size times 0.2, so the logo scales with the code, and the height defaults to the width, which keeps the aspect ratio square unless you override it.

Three props exist purely to protect the code. logoOpacity sets the transparency of the logo, and the README explains the purpose directly, saying it allows you to modify the transparency of your logo so that it will not compromise the readability of the QR code. logoPadding adds a border with no points around the logo, which puts clean space between the image and the surrounding modules. logoPaddingStyle chooses the shape of that padding area, square or circle, and logoPaddingRadius sets its radius when the shape is square, accepting a number, a DOMPointInit or an array of those for per-corner control.

The most aggressive option is removeQrCodeBehindLogo, which removes the QR cells behind the logo, including its padding if one is specified. That is the correct setting when the brand matters more than the data, and it is the one to reach for when a scanner struggles.

There is one event, logoOnLoad, which fires when the logo image has loaded, which is how you know the image is present rather than broken.

Colors, error correction and the module shapes

The rest of the props configure the code itself.

The error correction level, ecLevel, accepts L, M, Q or H and defaults to M. That default is the one to think about, because error correction is what determines how much of the code a logo can cover. The lower the level, the less redundancy the code carries and the less damage it tolerates, and the README leaves the choice to the caller, which means the choice has to be made deliberately when a logo is added.

The size is in pixels and defaults to 150. The quiet zone is in pixels and defaults to 10, and the README notes that it takes the same color as the QR code background color, which is a detail that saves a visual bug when the background is not white. The background color is a CSS color defaulting to #FFFFFF and the foreground color defaults to #000000.

The module style, qrStyle, accepts squares, dots or fluid, with squares as the default. The README's three screenshots show the styles side by side for a React QR code, a Miku themed one and a fluid one, which is a faster way to understand the difference than the prop name.

Two more props are about the eyes, the three positional patterns around the code. eyeRadius takes a corner radius, and eyeColor takes a color, and each links to its own document in the res directory. Both accept either a single value or an array, which is how you can round one eye and square the others.

Finally, pixelRatio sets the scale factor for the rendered canvas and defaults to window.devicePixelRatio, so the code is sharp on high-DPI displays, with the README noting you can force 1 to reduce memory on dense layouts.

Downloading the canvas and the ref requirement

The methods table is short, and it carries a precondition that the README states explicitly: the methods must be called on a valid QRCode ref, with a link to the React documentation on manipulating the DOM with refs.

The method is download, taking an optional file type of png, jpg or webp, and an optional file name. The effect is that the QR code can be downloaded as an image, which is the feature that makes the component usable in flows where the code has to end up in a file, an email or an upload rather than only on screen.

The ref requirement is not incidental, since downloading a canvas is a DOM operation and the component has to hand you the element to act on. There is an id prop for exactly this reason, described as an optional custom id for the QRCode canvas, which the README says you can use if you have multiple QR codes and need to differentiate them.

There is also an enableCORS prop, defaulting to false, that adds the crossorigin attribute to the logo image, and a style prop taking React.CSSProperties that is applied to the canvas.

Between the ref, the id and the CORS flag, the component covers the three situations where a QR code in a page runs into trouble: several codes on one page, a logo served from another origin, and a user who needs the image as a file.

What to check before you depend on it

Three things to weigh.

The first is the test situation, and the package.json is blunt about it. The test script is a placeholder that echoes an error and exits with a failure, which is the default npm test stub rather than a real suite. There is a Storybook setup instead, with a storybook dev script on port 6006, a build-storybook script, and a stories/ directory in the repository, and the dev dependencies include the Storybook React, Vite, interactions and test packages. So the verification story is visual and manual, through Storybook, rather than automated. For a component whose output is a picture, that is defensible, and it means a behaviour change is caught by a human looking at the stories rather than by a test.

The second is the release story. There are no GitHub releases, the repository has a CHANGELOG.md, and the last push was on 2026-07-15. The published version to depend on comes from the registry, and the README's compatibility note, that React 18 or newer needs version 3.0.0 or newer, is the kind of version coupling that a component with a canvas and a ref has, since the rendering and ref semantics changed in React 18.

The third is what the component is not for. It renders a QR code in the browser, and the encoding is done by qrcode-generator. The alternative for a product that does not need a live branded code is to generate the image on the server and serve it as a file, or to use a plain QR library with no logo support. The difference in approach is where the work happens: this component draws the code in the page, which means the code follows the theme, the responsive layout and the dark mode of your app, and which also means the code exists in the DOM, where a marketing team can change it without a rebuild. The cost is that the module is a client side dependency and the branding is limited to what error correction will tolerate.

Editorial conclusion

react-qrcode-logo fits a React product that needs a branded QR code drawn in the page, with the logo as a project asset rather than a design export, and it does not fit a pipeline that needs a server generated image or an offline tool. Before adopting it, set ecLevel deliberately, since the default of M decides how much of the code a logo can cover, and check the download method against a valid ref in your own page.

Frequently asked questions

Official sources

1. gcoro/react-qrcode-logo on GitHub
2. Issues
3. License: MIT
4. README