Matita/icons

Qr code icon

New Added in v0.4.0

A free pencil-style qr code icon, drawn by code from 3 closed shapes and 5 dots. Use it as an SVG, a React component, or by name. MIT licensed.

Copy the code All 260 icons
qr-code

01Use it

Use qr-code

One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.

React

import { QrCode } from '@matita/icons/react';

<QrCode size={24} />

// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="qr-code" />

JavaScript

import { QrCode, toSvg } from '@matita/icons';

toSvg(QrCode, { size: 24 });   // SVG string

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-qr-code" data-sketch="" aria-hidden="true"><path d="M3.67 3.33Q6.57 3.3 9.46 3.44Q9.61 6.56 9.66 9.68Q6.54 9.3 3.4 9.44Q3.71 6.39 3.67 3.33Q4.53 3.33 5.39 3.36" stroke-width="1.584"/><path d="M14.5 3.37Q17.51 3.59 20.54 3.58Q20.64 6.48 20.44 9.38Q17.47 9.41 14.51 9.57Q14.61 6.47 14.5 3.37Q15.29 3.47 16.08 3.43" stroke-width="1.616"/><path d="M3.31 14.52Q6.44 14.3 9.58 14.37Q9.53 17.48 9.55 20.6Q6.46 20.73 3.38 20.67Q3.11 17.6 3.31 14.52Q4.15 14.49 4.99 14.48" stroke-width="1.552"/><path d="M15.08 15.15l.01 0M19.81 15.06l.01 0M17.55 17.37l.01 0M15.07 19.81l.01 0M19.83 20.07l.01 0" stroke-width="2.48"/></svg>

Pencil variant

import '@matita/icons/pencil.css';
import { QrCode } from '@matita/icons/react';

<QrCode size={32} pencil />

The file is icons/qr-code.svg in the package (pencil/qr-code.svg for the pencil variant). Matita 0.4.0.

02How it's drawn

The recipe for qr-code

Qr code is not stored as a drawing. It is a recipe of 3 closed shapes and 5 dots on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.

A · Recipe
Z 3.5 3.5 9.5 3.5 9.5 9.5 3.5 9.5;
Z 14.5 3.5 20.5 3.5 20.5 9.5 14.5 9.5;
Z 3.5 14.5 9.5 14.5 9.5 20.5 3.5 20.5;
O 15 15;
O 20 15;
O 17.5 17.5;
O 15 20;
O 20 20
B · Plotted
C · Drawn
How it works

03Takes, sizes, pencil

Same icon, every way

Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.

seed 0
seed 1
seed 2
seed 3
seed 4

Five seeds of qr-code. Seed 0 is the default.

wobble 0
wobble 0.25
wobble 0.5
wobble 0.75
wobble 1

qr-code from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/qr-code.svg.

16 px
20 px
24 px
32 px
48 px
96 px

True pixel sizes.

Ink
Pencil