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',
  }"
/>