Recycle bin

A bin.

File: recycle-bin.svg
Original name: Recycle Bin
viewBox: 0 0 794.8 1008.8
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import recycleBin from '@ba-icons/illustrations/cleaning/recycle-bin';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import recycleBin from '@ba-icons/illustrations/cleaning/recycle-bin';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import recycleBin from '@ba-icons/illustrations/cleaning/recycle-bin';
---

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

HTML

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

<ba-illustration name="cleaning/recycle-bin" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 794.8 1008.8" fill="currentColor"><path d="M143.4 987.4Q114.4 976.4 105.4 953.4Q102.4 944.4 77.9 632.4Q53.4 320.4 53.4 314.4V309.4H398.4H742.4L741.4 322.4Q740.4 334.4 717.4 641.4Q699.4 863.4 695.9 906.9Q692.4 950.4 688.4 957.4Q677.4 978.4 655.4 985.4Q647.4 988.4 613.9 988.9Q580.4 989.4 396.4 989.4Q149.4 989.4 143.4 987.4ZM252.4 890.4Q253.4 890.4 254.4 889.4Q261.4 885.4 260.9 859.9Q260.4 834.4 251.4 683.4Q251.4 678.4 250.9 676.4Q250.4 674.4 250.4 670.4Q250.4 666.4 250.4 663.4Q250.4 660.4 249.9 656.4Q249.4 652.4 249.4 649.4Q235.4 423.4 232.4 415.4Q229.4 405.4 217.4 401.4Q205.4 397.4 195.4 403.4Q194.4 404.4 193.4 405.4Q184.4 409.4 184.9 434.4Q185.4 459.4 194.4 606.4Q196.4 633.4 197.4 648.4Q197.4 659.4 199.4 681.4Q208.4 835.4 211.4 861.4Q214.4 887.4 223.4 891.4Q224.4 891.4 225.4 892.4Q239.4 898.4 252.4 890.4ZM409.4 892.4Q415.4 889.4 419.4 883.4Q422.4 879.4 422.9 847.9Q423.4 816.4 423.4 647.4Q423.4 417.4 420.4 411.4Q414.4 402.4 401.4 400.9Q388.4 399.4 379.4 407.4L373.4 413.4L372.4 645.4Q372.4 877.4 376.4 883.4Q381.4 891.4 390.9 893.9Q400.4 896.4 409.4 892.4ZM572.4 890.4Q573.4 890.4 573.4 890.4Q581.4 886.4 583.9 859.4Q586.4 832.4 596.4 675.4Q597.4 662.4 598.4 655.4Q612.4 434.4 612.4 424.4Q612.4 414.4 605.4 408.4Q596.4 399.4 583.4 400.4Q570.4 401.4 564.4 411.4Q561.4 417.4 547.4 634.4Q533.4 851.4 533.4 865.9Q533.4 880.4 538.9 886.4Q544.4 892.4 548.4 893.4Q560.4 898.4 572.4 890.4ZM19.4 244.4V209.4H37.4H56.4L72.4 194.4Q89.4 178.4 105.4 169.4Q168.4 129.4 273.4 112.4L281.4 111.4L282.4 98.4Q283.4 85.4 291.4 70.4Q311.4 32.4 355.4 22.4Q365.4 19.4 395.4 19.4Q425.4 19.4 437.4 21.4Q466.4 27.4 487.9 48.4Q509.4 69.4 513.4 97.4L516.4 111.4L533.4 114.4Q664.4 137.4 723.4 195.4L739.4 209.4H757.4H775.4V244.4V280.4H397.4H19.4ZM458.4 102.4Q458.4 95.4 450.9 85.9Q443.4 76.4 433.4 72.4Q425.4 69.4 399.9 69.4Q374.4 69.4 363.4 72.4Q346.4 77.4 338.4 94.4Q334.4 104.4 340.4 104.4Q344.4 104.4 360.4 104.4Q385.4 102.4 421.9 103.4Q458.4 104.4 458.4 102.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/cleaning/recycle-bin.svg

<img src="https://icons.atmosphere.africa/svg/cleaning/recycle-bin.svg" alt="Recycle bin" width="160">

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

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

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