qr code icon
qr-code-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.
- Name
- qr-code-solid
- Set
- HeroIcons
- Style
- Solid 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
The same icon in other sets
qr-codeBootstrap Iconsqr-codeCarbonqr-code-outlineFlowbite Iconsqr-code-20-filledFluent UI System Iconsqr-codeHealth Iconsqr-codeHuge Iconsqr-codeIconoirqr-codeIonIconsqr-codeJam Iconsqr-codeLucideqr-codeMage Iconsqr-codeMajesticonsqr-codeMaterial Symbolsqr-codeMaterial Symbols Lightqr-codeOpenMojiqr-codePhosphorqr-codePixelarticonsqr-code-fillRemix Iconqr-code-boldSolarqr-code-outlineTeenyiconsqr-code-outlinedWeUI Icon
Use the qr code icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375zM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function HeroiconsQrCodeSolid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fillRule="evenodd" d="M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375zM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75z" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375zM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/></svg> </template>
CSS
.icon-qr-code-solid {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%204.875C3%203.839%203.84%203%204.875%203h4.5c1.036%200%201.875.84%201.875%201.875v4.5c0%201.036-.84%201.875-1.875%201.875h-4.5A1.875%201.875%200%200%201%203%209.375zM4.875%204.5a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zm7.875.375c0-1.036.84-1.875%201.875-1.875h4.5C20.16%203%2021%203.84%2021%204.875v4.5c0%201.036-.84%201.875-1.875%201.875h-4.5a1.875%201.875%200%200%201-1.875-1.875zm1.875-.375a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zM6%206.75A.75.75%200%200%201%206.75%206h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75A.75.75%200%200%201%206%207.5zm9.75%200A.75.75%200%200%201%2016.5%206h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zM3%2014.625c0-1.036.84-1.875%201.875-1.875h4.5c1.036%200%201.875.84%201.875%201.875v4.5c0%201.035-.84%201.875-1.875%201.875h-4.5A1.875%201.875%200%200%201%203%2019.125zm1.875-.375a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zm7.875-.75a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zM6%2016.5a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm9.75%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm-3%203a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%204.875C3%203.839%203.84%203%204.875%203h4.5c1.036%200%201.875.84%201.875%201.875v4.5c0%201.036-.84%201.875-1.875%201.875h-4.5A1.875%201.875%200%200%201%203%209.375zM4.875%204.5a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zm7.875.375c0-1.036.84-1.875%201.875-1.875h4.5C20.16%203%2021%203.84%2021%204.875v4.5c0%201.036-.84%201.875-1.875%201.875h-4.5a1.875%201.875%200%200%201-1.875-1.875zm1.875-.375a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zM6%206.75A.75.75%200%200%201%206.75%206h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75A.75.75%200%200%201%206%207.5zm9.75%200A.75.75%200%200%201%2016.5%206h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zM3%2014.625c0-1.036.84-1.875%201.875-1.875h4.5c1.036%200%201.875.84%201.875%201.875v4.5c0%201.035-.84%201.875-1.875%201.875h-4.5A1.875%201.875%200%200%201%203%2019.125zm1.875-.375a.375.375%200%200%200-.375.375v4.5c0%20.207.168.375.375.375h4.5a.375.375%200%200%200%20.375-.375v-4.5a.375.375%200%200%200-.375-.375zm7.875-.75a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zM6%2016.5a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm9.75%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm-3%203a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%200%201%20.75.75v.75a.75.75%200%200%201-.75.75h-.75a.75.75%200%200%201-.75-.75z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/qr-code-solid.svg?color=%231a73e8&size=48
