🦓 SVG Barcode Generator

Simple one-dimensional barcode generator focused on scalability and themability.
Created to be easy to use, lightweight, and compatible with Tailwind CSS.

Supported formats

| Type key | Standard | Use case | |---|---|---| | upc_a | UPC-A | Retail (North America) | | upc_e | UPC-E | Retail, compact packaging | | ean_13 | EAN-13 | Retail (worldwide) | | ean_8 | EAN-8 | Retail, small packaging | | code_128 | Code 128 | Logistics, shipping | | gs1_128 | GS1-128 | Supply chain, logistics (Code 128 + FNC1) | | code_93 | Code 93 | Industrial, inventory | | code_39 | Code 39 | Industrial, automotive, military | | itf | ITF (Interleaved 2 of 5) | Warehouse, distribution | | itf_14 | ITF-14 | Cartons, pallets (GS1 shipping containers) | | codabar | Codabar | Libraries, blood banks, FedEx | | msi | MSI Plessey | Retail shelf labels, inventory | | pharmacode | Pharmacode | Pharmaceutical packaging |

Why use this library

• Creates responsive SVG graphics that adapt to parent container sizes.
• TypeScript support - includes type definitions out of the box.
• TailwindCSS friendly - no hardcoded colors, so fill-* and text-* classes cascade freely.
• Can be used in the browser (ES2020) and in runtimes such as Node.js, Deno, and Bun.
• Works in frameworks like React, Vue, Svelte, etc.
• Compatible with React Native / Expo, and should work with NativeWind and Unistyles.
• Dependency-free.
• Tree-shakeable.

Usage

Basic

import SvgBarcodeGenerator from "svg-barcode-generator";

const svg = SvgBarcodeGenerator.generate("7423522549551", "ean_13");

console.log(svg); // <svg ...>...</svg>

React + Tailwind CSS

Since the generated SVG has no hardcoded colors, bars inherit the fill CSS property and the background is transparent. You can apply any color using standard CSS or Tailwind classes.

import SvgBarcodeGenerator from "svg-barcode-generator";

export const Barcode = () => {
  const svg = SvgBarcodeGenerator.generate("7423522549551", "ean_13");
  return (
    // Classic: Black bars on white background (safest for physical scanners)
    <div className="bg-white fill-black p-6">
      <div dangerouslySetInnerHTML={{ __html: svg }} />
    </div>
  );
};

Notes on specific formats

• upc_a - alias for ean_13. UPC-A (12 digits) is a subset of EAN-13 (13 digits with a leading 0).
• gs1_128 - Code 128 with an FNC1 character automatically injected at position 1. Physical scanners will prefix decoded output with ]C1 (AIM Symbology Identifier). Software decoders (e.g. ZXing) typically return raw data without this prefix.
• itf_14 - Accepts 13 digits (check digit auto-calculated via Mod 10) or 14 digits directly.
• pharmacode - Accepts numeric values from 3 to 131070.

Materials

• Color Selection for Barcode Symbols
• Barcode Symbologies – Scandit
• Wikipedia – Barcode

License

This project is licensed under the MIT License.