barcode icon

Code line-round

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3 3L3 13L2 13L2 3L3 3ZM6 3L6 13L4 13L4 3L6 3ZM8 13L7 13L7 3L8 3L8 13ZM11 3L11 13L10 13L10 3L11 3ZM14 13L12 13L12 3L14 3L14 13Z"/></svg>

// Gentleface "barcode" (line-round), MIT. https://gentleface.com/icons/barcode
import type { SVGProps } from 'react';

export function BarcodeIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M3 3L3 13L2 13L2 3L3 3ZM6 3L6 13L4 13L4 3L6 3ZM8 13L7 13L7 3L8 3L8 13ZM11 3L11 13L10 13L10 3L11 3ZM14 13L12 13L12 3L14 3L14 13Z" />
    </svg>
  );
}

Vue: see /icons/barcode.md

Svelte: see /icons/barcode.md

HTML img: see /icons/barcode.md

CSS: see /icons/barcode.md

Data URL: see /icons/barcode.md

Sprite: see /icons/barcode.md

SwiftUI: see /icons/barcode.md

Compose: see /icons/barcode.md

Android XML: see /icons/barcode.md

Flutter: see /icons/barcode.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

barcode, product code, sku, upc, ean

Alternatives

• qr-code: a 2D code that carries a link, ticket or payment
• scan-barcode: the scan action (scanner frame around the bars)

Also fits

• qr code: a 1D product code (SKU, EAN)
• scan barcode: show the barcode of a product (barcode)

Tags

barcode, scan, product, sku, upc, ean, inventory, price

Category

Shopping

Component name

BarcodeIcon

History

• 2026-10-14 added

More shopping icons

cash-register gem gift gift-check handbag hanger package package-alert package-arrow-down package-arrow-right package-arrow-up package-check package-clock package-off package-pencil package-plus · all shopping icons

For agents

Metadata: /icons/barcode.json · Markdown: /icons/barcode.md · SVG: https://gentleface.com/svg/{style}/16/barcode.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/barcode.png