Barcode

File: barcode.svg
viewBox: 0 0 1008.8 794.8
Weight: 3 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import barcode from '@ba-icons/illustrations/payments/barcode';

<Illustration asset={barcode} size={160} />

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import barcode from '@ba-icons/illustrations/payments/barcode';
</script>

<template>
  <Illustration :asset="barcode" :size="160" />
</template>

Astro

---
import { Illustration } from '@ba-icons/astro';
import barcode from '@ba-icons/illustrations/payments/barcode';
---

<Illustration asset={barcode} size={160} />

HTML

<script src="https://icons.atmosphere.africa/cdn/ba-icons-0.4.0.js" defer></script>

<ba-illustration name="payments/barcode" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 794.8" fill="currentColor"><path d="M395.4 208.4Q397.4 208.4 399.9 209.4Q402.4 210.4 403.9 211.9Q405.4 213.4 406.4 215.4Q407.4 217.4 407.4 220.4V574.4Q407.4 577.4 405.9 580.4Q404.4 583.4 401.4 584.9Q398.4 586.4 395.4 586.4H371.4Q368.4 586.4 366.4 585.4Q364.4 584.4 362.4 582.9Q360.4 581.4 359.4 579.4Q358.4 577.4 358.4 574.4V220.4Q358.4 217.4 359.4 215.4Q360.4 213.4 362.4 211.9Q364.4 210.4 366.4 209.4Q368.4 208.4 371.4 208.4ZM298.4 208.4Q300.4 208.4 302.9 209.4Q305.4 210.4 306.9 211.9Q308.4 213.4 309.4 215.4Q310.4 217.4 310.4 220.4V574.4Q310.4 579.4 306.9 582.9Q303.4 586.4 298.4 586.4H225.4Q220.4 586.4 216.9 582.9Q213.4 579.4 213.4 574.4V220.4Q213.4 215.4 216.9 211.9Q220.4 208.4 225.4 208.4ZM237.4 704.4Q247.4 704.4 254.4 711.4Q261.4 718.4 261.4 728.4V751.4Q261.4 761.4 254.4 768.4Q247.4 775.4 237.4 775.4H43.4Q33.4 775.4 26.4 768.4Q19.4 761.4 19.4 751.4V562.4Q19.4 556.4 22.4 550.9Q25.4 545.4 31.4 542.4Q37.4 539.4 43.4 539.4H67.4Q77.4 539.4 84.9 546.4Q92.4 553.4 92.4 562.4V704.4ZM43.4 255.4Q33.4 255.4 26.4 248.4Q19.4 241.4 19.4 232.4V43.4Q19.4 33.4 26.4 26.4Q33.4 19.4 43.4 19.4H237.4Q247.4 19.4 254.4 26.4Q261.4 33.4 261.4 43.4V66.4Q261.4 76.4 254.4 83.4Q247.4 90.4 237.4 90.4H92.4V232.4Q92.4 241.4 84.9 248.4Q77.4 255.4 67.4 255.4ZM795.4 574.4Q795.4 577.4 794.4 579.4Q793.4 581.4 791.9 582.9Q790.4 584.4 787.9 585.4Q785.4 586.4 783.4 586.4H710.4Q707.4 586.4 704.4 584.9Q701.4 583.4 699.9 580.4Q698.4 577.4 698.4 574.4V220.4Q698.4 215.4 701.9 211.9Q705.4 208.4 710.4 208.4H783.4Q786.4 208.4 789.4 209.9Q792.4 211.4 793.9 214.4Q795.4 217.4 795.4 220.4ZM492.4 208.4Q494.4 208.4 496.9 209.4Q499.4 210.4 500.9 211.9Q502.4 213.4 503.4 215.4Q504.4 217.4 504.4 220.4V574.4Q504.4 579.4 500.9 582.9Q497.4 586.4 492.4 586.4H468.4Q465.4 586.4 463.4 585.4Q461.4 584.4 459.4 582.9Q457.4 581.4 456.4 579.4Q455.4 577.4 455.4 574.4V220.4Q455.4 215.4 459.4 211.9Q463.4 208.4 468.4 208.4ZM965.4 539.4Q975.4 539.4 982.4 546.4Q989.4 553.4 989.4 562.4V751.4Q989.4 761.4 982.4 768.4Q975.4 775.4 965.4 775.4H771.4Q761.4 775.4 754.4 768.4Q747.4 761.4 747.4 751.4V728.4Q747.4 718.4 754.4 711.4Q761.4 704.4 771.4 704.4H916.4V562.4Q916.4 558.4 918.4 553.9Q920.4 549.4 923.9 545.9Q927.4 542.4 931.9 540.9Q936.4 539.4 941.4 539.4ZM965.4 19.4Q975.4 19.4 982.4 26.4Q989.4 33.4 989.4 43.4V232.4Q989.4 241.4 982.4 248.4Q975.4 255.4 965.4 255.4H941.4Q931.4 255.4 923.9 248.4Q916.4 241.4 916.4 232.4V90.4H771.4Q761.4 90.4 754.4 83.4Q747.4 76.4 747.4 66.4V43.4Q747.4 33.4 754.4 26.4Q761.4 19.4 771.4 19.4ZM637.4 208.4Q641.4 208.4 643.9 209.9Q646.4 211.4 648.4 214.4Q650.4 217.4 650.4 220.4V574.4Q650.4 579.4 646.4 582.9Q642.4 586.4 637.4 586.4H565.4Q561.4 586.4 558.9 584.9Q556.4 583.4 554.9 580.4Q553.4 577.4 553.4 574.4V220.4Q553.4 215.4 556.9 211.9Q560.4 208.4 565.4 208.4Z"></path></svg>

From the CDN

Link to the file instead of installing it: for <img>, CSS, emails and docs, with nothing added to your bundle. Served with CORS and cached for an hour.

https://icons.atmosphere.africa/svg/payments/barcode.svg

<img src="https://icons.atmosphere.africa/svg/payments/barcode.svg" alt="Barcode" width="160">

import { illustrationUrl } from '@ba-icons/illustrations';

illustrationUrl('payments/barcode');
// → https://icons.atmosphere.africa/svg/payments/barcode.svg

As an <img> it draws in black. To give it the text colour, use it as a mask:

.mark {
  background-color: currentColor;
  mask: url('https://icons.atmosphere.africa/svg/payments/barcode.svg') center / contain no-repeat;
}

New to the packages? Point your project at the registry first.