Design Customization

Customize the appearance of your QR codes with colors, styles, and logos.

Try the Design Builder

Use the interactive Design Builder to experiment with styles and colors in real time, then copy the JSON directly into your API calls.

Design Object

Pass the design parameter when creating or updating a QR code.

Fields Reference

Field	Type	Description
dots	object	Main dot pattern styling
corners	object	Corner square marker styling
corners_dot	object	Inner corner dot styling
background	object	Background color
logo_url	string	URL to a logo image to embed in the center
margin	number	Margin around the QR code in pixels (default: 10)

Design Object

{
  "design": {
    "dots": { "style": "rounded", "color": "#000000" },
    "corners": { "style": "extra-rounded", "color": "#000000" },
    "corners_dot": { "style": "dot", "color": "#000000" },
    "background": { "color": "#ffffff" },
    "logo_url": "https://example.com/logo.png",
    "margin": 10
  }
}

Dots

The main pattern dots that make up the QR code.

Field	Type	Description
style	string	Dot style (see options)
color	string	Hex color code (e.g., #000000)

Available styles:

• square — Square dots (default)
• rounded — Rounded square dots
• dots — Circular dots
• classy — Classy rounded style
• classy-rounded — Extra rounded classy
• extra-rounded — Very rounded squares

Corners

The large corner markers of the QR code.

Field	Type	Description
style	string	square, extra-rounded, or dot
color	string	Hex color code

Corner Dots

The inner dots of the corner markers.

Field	Type	Description
style	string	square or dot
color	string	Hex color code

Background

Field	Type	Description
color	string	Background hex color (default: #ffffff)

Example: Branded QR Code

curl -X POST "https://integration-api.qr-build.com/qr-codes" \
  -H "X-API-Key: qrb_live_your_api_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Branded QR",
    "type": "url",
    "content": {
      "type": "url",
      "url": "https://example.com"
    },
    "design": {
      "dots": { "style": "rounded", "color": "#6366f1" },
      "corners": { "style": "extra-rounded", "color": "#4f46e5" },
      "corners_dot": { "style": "dot", "color": "#4f46e5" },
      "background": { "color": "#f8fafc" },
      "margin": 12
    }
  }'

Best Practices

1. Maintain contrast — Ensure enough contrast between dots and background for reliable scanning
2. Test scanning — Always test your QR codes with multiple devices after customizing
3. Keep it simple — Complex designs may reduce scan reliability
4. Logo size — Keep logos small to maintain scanability

tip

To control the output image size and format, use the Generate QR Code Image endpoint with size and format query parameters.

Image Export Options

# PNG (default, 300px)
GET /qr-codes/:id/image

# SVG (scalable, ideal for print)
GET /qr-codes/:id/image?format=svg

# High-res PNG (up to 3000px)
GET /qr-codes/:id/image?format=png&size=2000

# JPG (smaller file size)
GET /qr-codes/:id/image?format=jpg&size=1000