barcode icon
barcode from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- barcode
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
barcodeBoxIcons v2barcodeBoxIcons v2 SolidbarcodeCarbonbarcodeFramework7 IconsbarcodeFont Awesome 6 SolidbarcodeHuge IconsbarcodeIconoirbarcodeLine AwesomebarcodeLucidebarcodeMaterial SymbolsbarcodeMaterial Design Iconsbarcode-fillMingCute IconbarcodeOpenMojibarcodePhosphorbarcodePixelarticonsbarcode-fillRemix Iconbarcode-boldSolarbarcodeTabler Iconsbarcode-outlineTeenyicons
Use the barcode icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M419.13 96H419l-35.05.33L128 96h-.16l-36.74.33C66.93 96.38 48 116.07 48 141.2v230.27c0 25.15 19 44.86 43.2 44.86h.15l36.71-.33l255.92.33h.17l35.07-.33A44.91 44.91 0 0 0 464 371.13V140.87A44.92 44.92 0 0 0 419.13 96M144 320a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Zm64 32a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-16a16 16 0 0 1-32 0V176a16 16 0 0 1 32 0Zm64 16a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-32a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Z"/></svg>
React
import type { SVGProps } from "react";
export function IonBarcode(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M419.13 96H419l-35.05.33L128 96h-.16l-36.74.33C66.93 96.38 48 116.07 48 141.2v230.27c0 25.15 19 44.86 43.2 44.86h.15l36.71-.33l255.92.33h.17l35.07-.33A44.91 44.91 0 0 0 464 371.13V140.87A44.92 44.92 0 0 0 419.13 96M144 320a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Zm64 32a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-16a16 16 0 0 1-32 0V176a16 16 0 0 1 32 0Zm64 16a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-32a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M419.13 96H419l-35.05.33L128 96h-.16l-36.74.33C66.93 96.38 48 116.07 48 141.2v230.27c0 25.15 19 44.86 43.2 44.86h.15l36.71-.33l255.92.33h.17l35.07-.33A44.91 44.91 0 0 0 464 371.13V140.87A44.92 44.92 0 0 0 419.13 96M144 320a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Zm64 32a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-16a16 16 0 0 1-32 0V176a16 16 0 0 1 32 0Zm64 16a16 16 0 0 1-32 0V160a16 16 0 0 1 32 0Zm64-32a16 16 0 0 1-32 0V192a16 16 0 0 1 32 0Z"/></svg> </template>
CSS
.icon-barcode {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M419.13%2096H419l-35.05.33L128%2096h-.16l-36.74.33C66.93%2096.38%2048%20116.07%2048%20141.2v230.27c0%2025.15%2019%2044.86%2043.2%2044.86h.15l36.71-.33l255.92.33h.17l35.07-.33A44.91%2044.91%200%200%200%20464%20371.13V140.87A44.92%2044.92%200%200%200%20419.13%2096M144%20320a16%2016%200%200%201-32%200V192a16%2016%200%200%201%2032%200Zm64%2032a16%2016%200%200%201-32%200V160a16%2016%200%200%201%2032%200Zm64-16a16%2016%200%200%201-32%200V176a16%2016%200%200%201%2032%200Zm64%2016a16%2016%200%200%201-32%200V160a16%2016%200%200%201%2032%200Zm64-32a16%2016%200%200%201-32%200V192a16%2016%200%200%201%2032%200Z%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M419.13%2096H419l-35.05.33L128%2096h-.16l-36.74.33C66.93%2096.38%2048%20116.07%2048%20141.2v230.27c0%2025.15%2019%2044.86%2043.2%2044.86h.15l36.71-.33l255.92.33h.17l35.07-.33A44.91%2044.91%200%200%200%20464%20371.13V140.87A44.92%2044.92%200%200%200%20419.13%2096M144%20320a16%2016%200%200%201-32%200V192a16%2016%200%200%201%2032%200Zm64%2032a16%2016%200%200%201-32%200V160a16%2016%200%200%201%2032%200Zm64-16a16%2016%200%200%201-32%200V176a16%2016%200%200%201%2032%200Zm64%2016a16%2016%200%200%201-32%200V160a16%2016%200%200%201%2032%200Zm64-32a16%2016%200%200%201-32%200V192a16%2016%200%200%201%2032%200Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/barcode.svg?color=%231a73e8&size=48
