Skip to content

Last updated: June 8, 2023 | at 09:10 PM

QR Code Generator 📸

About 📝

After trying to create a nice qr code with a logo for my work I quickly became frustrated by how limited most tools online were and how they all wanted me to signup and added bloat to the process. So I decided to create my own tool that would be simple, easy, feature rich and free to use.😎

If you find this project useful please consider giving it a star ⭐

If you use the code please give me credit and link back to this repo 🙏

Enjoy! 😁

Features 🎉

- Simple and easy UI 🤩
- Smart themes based on the QR Code URL 🎨
- Add a logo to your QR code 🖼️
- Colouring and styling options 👨‍🎨
- Right click the QR code to save it as an image 📸

Coming Soon™ 🚧

- Auto recommend icons for all brands 👀
- Favicon scraping 🤞 (Unsure how CORS will go)
- More themes 🎨
- QR code frames and text options 🖼️
- Svg download option 📸
- Copy to clipboard option 📋
- Abillity to scan QR codes 📱

Built with 🧰

  • React QR Code Logo 📦

  • A very nice and easy to use QR code package with logo options.

  • Next.js 🚀

  • Because it's the best React framework out there.

  • Tailwind CSS 🍃

  • Nextjs starter had it already so why not.

  • React Palette 🎨

  • A nice package to get the dominant color of an image.

  • Simple Icons 🖼️

  • The best package for all brand icons.

  • Hero Icons 🦸‍♂️

  • A really pretty collection of icons.

  • jsQR 📸

  • A QR code scanner library.

Getting Started 🛠️

Install with

yarn

Then, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More 📖

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!