Gateway

a hand-drawn archway with a path running through it.

File: gateway.svg
viewBox: 0 0 981.6 793.8
Weight: 2 KB

96px

160px

240px +

Use it

React

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

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

Vue

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

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

Astro

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

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

HTML

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 981.6 793.8" fill="currentColor"><path d="M338.3 305.9Q339.3 306.9 340.3 308.4Q341.3 309.9 342.3 311.4Q343.3 312.9 343.3 313.9Q342.3 312.9 340.3 310.9Q338.3 309.9 337.3 308.9Q337.3 308.9 337.8 307.4Q338.3 305.9 338.3 305.9ZM600.3 737.9Q568.3 722.9 543.8 711.4Q519.3 699.9 517.3 698.9Q510.3 695.9 533.3 674.9Q546.3 663.9 551.3 662.9Q557.3 662.9 608.3 684.9L659.3 706.9L657.3 441.9L655.3 177.9L635.3 133.9Q622.3 104.9 613.8 94.4Q605.3 83.9 587.3 73.9Q563.3 60.9 531.3 58.9Q499.3 56.9 472.3 66.9Q458.3 71.9 442.3 86.9Q426.3 101.9 413.8 122.4Q401.3 142.9 396.3 162.9Q390.3 183.9 387.8 250.9Q385.3 317.9 386.8 375.9Q388.3 433.9 394.3 431.9Q401.3 429.9 417.3 425.9L432.3 421.9L434.3 325.9Q435.3 246.9 441.8 221.9Q448.3 196.9 469.3 178.9Q486.3 165.9 522.8 165.9Q559.3 165.9 575.3 178.9Q586.3 187.9 591.3 195.4Q596.3 202.9 601.3 213.4Q606.3 223.9 607.3 251.9Q608.3 279.9 609.3 310.4Q610.3 340.9 611.3 407.9L612.3 586.9L585.3 603.9Q494.3 662.9 414.3 726.9L376.3 758.9L334.3 735.9L292.3 712.9L324.3 690.9Q355.3 668.9 472.3 604.9L589.3 540.9V484.9Q589.3 428.9 581.3 428.9Q575.3 428.9 531.3 440.4Q487.3 451.9 432.8 467.9Q378.3 483.9 343.3 494.9Q274.3 517.9 181.3 558.9L87.3 599.9L49.3 579.9Q15.3 559.9 19.3 553.9Q26.3 548.9 132.3 510.9Q238.3 472.9 271.3 463.9Q309.3 452.9 330.3 446.9L352.3 440.9V308.9Q352.3 196.9 358.8 158.4Q365.3 119.9 389.3 84.9Q417.3 44.9 468.8 29.9Q520.3 14.9 573.3 31.9Q605.3 41.9 626.8 62.9Q648.3 83.9 665.3 122.9L684.3 164.9L686.3 432.9Q687.3 700.9 691.8 700.9Q696.3 700.9 718.3 684.9L739.3 668.9L738.3 407.9L736.3 146.9L719.3 109.9Q703.3 73.9 677.3 44.9Q655.3 18.9 660.3 18.9Q662.3 18.9 665.3 19.9Q726.3 40.9 757.3 129.9Q765.3 152.9 768.3 178.9Q771.3 204.9 772.3 270.9L775.3 375.9L825.3 373.9L875.3 371.9L826.3 380.9Q776.3 389.9 775.3 390.4Q774.3 390.9 774.3 425.9Q774.3 429.9 773.3 435.9Q773.3 456.9 782.3 457.9Q791.3 458.9 844.3 440.9Q860.3 435.9 869.3 432.9Q969.3 400.9 962.3 407.9Q959.3 410.9 935.3 420.9Q892.3 439.9 834.3 467.9L776.3 494.9L775.3 594.9L773.3 693.9L746.3 718.9Q719.3 742.9 699.3 758.9L678.3 774.9ZM579.3 396.9Q582.3 396.9 584.3 394.9Q586.3 392.9 587.3 384.4Q588.3 375.9 588.8 363.4Q589.3 350.9 589.3 323.9Q589.3 251.9 583.3 235.9Q574.3 208.9 538.3 197.9L525.3 192.9V298.9V404.9L547.3 400.9Q569.3 396.9 579.3 396.9Z"></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/gateway.svg

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

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

illustrationUrl('payments/gateway');
// → https://icons.atmosphere.africa/svg/payments/gateway.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/gateway.svg') center / contain no-repeat;
}

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