Shapes, eyes and frames

Every body pattern, eye frame, eye centre and call-to-action frame, drawn live by the qrdx renderer and decoded in your browser.

Every style below is drawn by the same renderer as your downloads, with its option name and the API value to copy. Each tile is decoded with jsQR right here in your browser, one at a time, so the Scans badge is a live result rather than a promise.

All of them are also tested in the package (packages/qrdx/tests/catalog-*.test.ts): each value decodes through a phone-camera model (contrast loss and a quarter-module blur) at 4, 6 and 9 pixels per module, next to every other body, eye and centre, at error correction L, M, Q and H, at 148 px and 1024 px, light-on-dark, with brand colours and with a centre logo; they were also checked with ZXing and in sharp renders. A few pairings are weak together; see Pairs to avoid.

Body patterns

The shape of the data modules (bodyPattern). Connected styles (liquid, classy) merge neighbouring modules into one outline. random-dots and mosaic vary per module but are deterministic: the same value always draws the same code.

Checking 1 of 23 in your browser…

CircleChecking
bodyPattern="circle"Rounded
Circle LargeChecking
bodyPattern="circle-large"Rounded
SquareChecking
bodyPattern="square"Classic
DiamondChecking
bodyPattern="diamond"Decorative
MixedChecking
bodyPattern="circle-mixed"Playful
PacmanChecking
bodyPattern="pacman"Playful
RoundedChecking
bodyPattern="rounded"Rounded
Small SquareChecking
bodyPattern="small-square"Classic
Vertical LineChecking
bodyPattern="vertical-line"Classic
Horizontal LineChecking
bodyPattern="horizontal-line"Classic
LiquidChecking
bodyPattern="liquid"Rounded
Liquid RowsChecking
bodyPattern="liquid-horizontal"Rounded
Liquid ColumnsChecking
bodyPattern="liquid-vertical"Rounded
ClassyChecking
bodyPattern="classy"Decorative
Classy RoundedChecking
bodyPattern="classy-rounded"Decorative
LeafChecking
bodyPattern="leaf"Decorative
PlusChecking
bodyPattern="plus"Playful
HexagonChecking
bodyPattern="hexagon"Decorative
StarChecking
bodyPattern="star"Playful
HeartChecking
bodyPattern="heart"Playful
Random DotsChecking
bodyPattern="random-dots"Rounded
MosaicChecking
bodyPattern="mosaic"Playful
OctagonChecking
bodyPattern="octagon"Classic

Eye frames

The outer ring of the three corner markers (cornerEyePattern). leaf, leaf-reverse, drop and petal turn each eye so it faces the corner of the code. Each tile pairs the eye with its recommended centre.

Checking 1 of 17 in your browser…

SquareChecking
cornerEyePattern="square"Classic
RoundedChecking
cornerEyePattern="rounded"Rounded
GearChecking
cornerEyePattern="gear"Decorative
CircleChecking
cornerEyePattern="circle"Rounded · cautionOnly lenient decoders read circle eyes; many apps miss them
DiyaChecking
cornerEyePattern="diya"Decorative
Extra RoundedChecking
cornerEyePattern="extra-rounded"Rounded
MessageChecking
cornerEyePattern="message"Playful
PointyChecking
cornerEyePattern="pointy"Decorative
LeafChecking
cornerEyePattern="leaf"Decorative
DropChecking
cornerEyePattern="drop"Decorative
OctagonChecking
cornerEyePattern="octagon"Classic
BevelChecking
cornerEyePattern="bevel"Classic
SquircleChecking
cornerEyePattern="squircle"Rounded
CushionChecking
cornerEyePattern="cushion"Rounded
ShieldChecking
cornerEyePattern="shield"Decorative
PetalChecking
cornerEyePattern="petal"Decorative
Leaf ReverseChecking
cornerEyePattern="leaf-reverse"Decorative

Eye centres

The solid centre of each corner marker (cornerEyeDotPattern), shown inside square eyes.

Checking 1 of 21 in your browser…

SquareChecking
cornerEyeDotPattern="square"Classic
RoundedChecking
cornerEyeDotPattern="rounded"Rounded
CircleChecking
cornerEyeDotPattern="circle"Rounded
MessageChecking
cornerEyeDotPattern="message"Playful
Message ReverseChecking
cornerEyeDotPattern="message-reverse"Playful
DiyaChecking
cornerEyeDotPattern="diya"Decorative
Diya ReverseChecking
cornerEyeDotPattern="diya-reverse"Decorative
Rounded TriangleChecking
cornerEyeDotPattern="rounded-triangle"Playful
LeafChecking
cornerEyeDotPattern="leaf"Decorative
DropChecking
cornerEyeDotPattern="drop"Decorative
PlusChecking
cornerEyeDotPattern="plus"Playful
Rounded CrossChecking
cornerEyeDotPattern="cross-rounded"Playful
HexagonChecking
cornerEyeDotPattern="hexagon"Decorative
OctagonChecking
cornerEyeDotPattern="octagon"Classic
FlowerChecking
cornerEyeDotPattern="flower"Playful
HeartChecking
cornerEyeDotPattern="heart"Playful
SquircleChecking
cornerEyeDotPattern="squircle"Rounded
DotsChecking
cornerEyeDotPattern="dots"Playful
Extra RoundedChecking
cornerEyeDotPattern="extra-rounded"Rounded
Leaf ReverseChecking
cornerEyeDotPattern="leaf-reverse"Decorative
Drop ReverseChecking
cornerEyeDotPattern="drop-reverse"Decorative

Frames

Call-to-action frames are drawn around the code, so the code and its quiet zone are never covered and the downloaded image grows to fit. Every frame takes text (up to 24 characters), color, textColor and fontScale (0.5 to 1.5). banner-top-bottom, circle and menu-card also show secondaryText; gradient-border runs from color to secondaryColor.

Checking 1 of 20 in your browser…

NoneChecking
frame={{ style: "none" }}Classic
BannerChecking
frame={{ style: "banner-bottom" }}Classic
Top bannerChecking
frame={{ style: "banner-top" }}Classic
BorderChecking
frame={{ style: "border" }}Classic
RoundedChecking
frame={{ style: "rounded-border" }}Rounded
BubbleChecking
frame={{ style: "speech-bubble" }}Rounded
Two bannersChecking
frame={{ style: "banner-top-bottom" }}Classic
Bubble topChecking
frame={{ style: "speech-bubble-top" }}Rounded
ChatChecking
frame={{ style: "chat-bubble" }}Rounded
CircleChecking
frame={{ style: "circle" }}Rounded
PolaroidChecking
frame={{ style: "polaroid" }}Decorative
PhoneChecking
frame={{ style: "phone" }}Playful
TicketChecking
frame={{ style: "ticket" }}Playful
RibbonChecking
frame={{ style: "badge" }}Decorative
EnvelopeChecking
frame={{ style: "envelope" }}Playful
TagChecking
frame={{ style: "tag" }}Playful
Menu cardChecking
frame={{ style: "menu-card" }}Playful
StickerChecking
frame={{ style: "sticker" }}Decorative
GradientChecking
frame={{ style: "gradient-border" }}Decorative
FocusChecking
frame={{ style: "focus" }}Classic

import { QRCode } from "qrdx";

<QRCode
  value="https://example.com"
  bodyPattern="liquid"
  cornerEyePattern="leaf"
  cornerEyeDotPattern="leaf"
  frame={{ style: "circle", text: "Scan me", secondaryText: "example.com" }}
/>;

Pairs to avoid

A few pairings of shapes that scan on their own fail together in our decode tests. The playground won't let you pick them together, and the scan score warns about them (style-pair):

diamond bodies next to square eyes, pacman next to rounded, and small-square next to square or rounded eyes (missed up close).

circle eyes read in both decoders we test (jsQR and ZXing) but are marked caution: some scanner apps miss them. The pairs ship in the package as WEAK_BODY_EYES, and getStylePairRisk(props) returns the warning for a style.

Retired shapes

curly eyes and diamond, star and banner centres were removed because they don't scan reliably: ZXing (the decoder in most Android scanners) misses curly eyes and diamond and star centres at phone distances, and jsQR misses banner centres in every sharp render. Codes saved with them still load and render exactly as before, and the image API still draws them for existing links, but no picker, preset or AI theme offers them, and their names are kept only as deprecated values (RETIRED_CORNER_EYE_PATTERNS, RETIRED_CORNER_EYE_DOT_PATTERNS).