Examples

Finder Patterns

The three square corner markers that help scanners orient the QR code. Outer and inner patterns can each be styled independently.

Outer styles

square

pinched-square

rounded-sm

rounded

rounded-lg

circle

inpoint

outpoint

leaf

Inner styles

square

rounded

rounded-lg

circle

microchip

diamond

star

heart

Combined customization

vue

<VueQRCode
  :finder-pattern-outer-settings="{
    style: 'leaf',
    color: '#10b981',
  }"
  :finder-pattern-inner-settings="{
    style: 'microchip',
    color: '#3b82f6',
  }"
  :data-modules-settings="{
    style: 'rounded',
    color: '#6b7585',
  }"
/>