qr code

The qr code icon in 4 styles and 2 corner shapes, drawn once and generated for every size.

import { QrCodeIcon } from '@uv-foundry/icons-react';

<QrCodeIcon />

Styles

Stroke, roundedSVG

Solid, roundedSVG

Duotone, roundedSVG

Twotone, roundedSVG

Stroke, sharpSVG

Solid, sharpSVG

Duotone, sharpSVG

Twotone, sharpSVG

SVG code

The qr code icon as SVG, stroke style with rounded corners. It uses currentColor, so it takes the colour of the text around it.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.75 2.75h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/><path d="M6.25 6.25v.05"/><path d="M16.25 2.75h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/><path d="M17.75 6.25v.05"/><path d="M4.75 14.25h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2z"/><path d="M6.25 17.75v.05"/><path d="M15 15v.05"/><path d="M20.5 15v.05"/><path d="M17.75 17.75v.05"/><path d="M15 20.5v.05"/><path d="M20.5 20.5v.05"/></svg>

Sizes

Smaller sizes use a heavier stroke so lines stay crisp on screen.

16px

20px

24px

32px

Nearby icons