Patterns

Change the shape of QR code elements for unique designs. See every option drawn live (and decoded in your browser) in Shapes, eyes and frames.

Body Patterns

Control the shape of data dots. There are 23 body patterns:

• Classic: square, small-square, horizontal-line, vertical-line, octagon
• Rounded: circle (default), circle-large, rounded, liquid, liquid-horizontal, liquid-vertical, random-dots
• Decorative: classy, classy-rounded, leaf, diamond, hexagon
• Playful: mosaic, plus, star, heart, pacman, circle-mixed

liquid, classy and classy-rounded join neighbouring modules into one smooth outline (liquid-horizontal and liquid-vertical join them in rows or columns only). random-dots and mosaic vary per module but always draw the same code for the same value. Alignment patterns are always drawn as solid squares, whatever the pattern, so decoders find them reliably.

import { QRCode } from 'qrdx';

<QRCode value="https://example.com" bodyPattern="circle" size={256} />
<QRCode value="https://example.com" bodyPattern="liquid" size={256} />
<QRCode value="https://example.com" bodyPattern="classy-rounded" size={256} />

Module scale

moduleScale (0.5 to 1, default 1) shrinks each data module around its centre for a lighter, more spaced look; connected patterns get thinner lines instead. Each pattern stops shrinking at the smallest size that still decodes in our tests (for example 0.95 for circle, 0.7 for classy; see MODULE_SCALE_FLOOR), and alignment patterns keep full size.

<QRCode value="https://example.com" bodyPattern="liquid" moduleScale={0.8} />

Corner Eye Patterns

Control the shape of corner markers. There are 17 corner eye patterns (the React component defaults to gear; the CLI defaults to square): square, rounded, extra-rounded, squircle, cushion, bevel, octagon, leaf, leaf-reverse, drop, petal, shield, gear, circle, diya, message and pointy.

leaf, leaf-reverse, drop and petal turn each of the three eyes to face its corner of the code. circle eyes may be missed by some scanner apps; the scan score warns about them.

<QRCode value="https://example.com" cornerEyePattern="square" />
<QRCode value="https://example.com" cornerEyePattern="leaf" />
<QRCode value="https://example.com" cornerEyePattern="squircle" />

Corner Eye Dot Patterns

Control the dot inside each corner marker. There are 21 corner eye dot patterns (the React component defaults to circle; the CLI defaults to square): square, rounded, extra-rounded, circle, squircle, octagon, hexagon, dots, leaf, leaf-reverse, drop, drop-reverse, plus, cross-rounded, flower, heart, message, message-reverse, diya, diya-reverse and rounded-triangle.

<QRCode value="https://example.com" cornerEyeDotPattern="square" />
<QRCode value="https://example.com" cornerEyeDotPattern="flower" />
<QRCode value="https://example.com" cornerEyeDotPattern="heart" />

Pairs to avoid and retired shapes

diamond bodies next to square eyes, pacman next to rounded and small-square next to square or rounded eyes are missed up close; the playground won't combine them, they ship as WEAK_BODY_EYES, and getStylePairRisk(props) returns the warning the scan score shows.

curly eyes and diamond, star and banner centres were retired because they don't scan reliably. Designs saved with them still render, but they are no longer offered or listed (see Retired shapes).

Per-eye colors

eyeColor and dotColor color all three eyes. eyeColors overrides them per eye (topLeft, topRight, bottomLeft), each with an outer (frame) and inner (dot) color or gradient:

<QRCode
  value="https://example.com"
  eyeColor="#111827"
  eyeColors={{
    topLeft: { outer: "#dc2626", inner: "#1d4ed8" },
    topRight: { outer: "#16a34a" },
  }}
/>

Keep every eye dark against the background: decoders find the code by its three eyes.

Combine Patterns

Mix different patterns for unique designs:

<QRCode
  value="https://example.com"
  bodyPattern="rounded"
  cornerEyePattern="circle"
  cornerEyeDotPattern="circle"
  size={256}
/>

Performance

Fast Patterns

• circle — Excellent performance
• square — Very fast

Medium Patterns

• rounded — Good balance
• diamond — Moderate

Complex Patterns

• pacman — Higher processing
• circle-mixed — Variable complexity

Pattern Selection

For Brand Identity

// Minimal, professional
<QRCode
  value="https://example.com"
  bodyPattern="rounded"
  cornerEyePattern="square"
/>

// Modern, tech-focused
<QRCode
  value="https://example.com"
  bodyPattern="circle"
  cornerEyePattern="rounded"
/>

For Marketing

// Eye-catching
<QRCode
  value="https://example.com"
  bodyPattern="liquid"
  cornerEyePattern="leaf"
  cornerEyeDotPattern="leaf"
/>

// Elegant
<QRCode
  value="https://example.com"
  bodyPattern="diamond"
  cornerEyePattern="rounded"
/>

For Print

// High contrast
<QRCode
  value="https://example.com"
  bodyPattern="square"
  cornerEyePattern="square"
/>

// Smooth, professional
<QRCode
  value="https://example.com"
  bodyPattern="rounded"
  cornerEyePattern="rounded"
/>

Next Steps

• Colors & Gradients — Add colors to patterns
• Templates — Pre-configured patterns
• Logos — Combine patterns with logos