Cleaning mist

A spray bottle releasing mist.

File: cleaning-mist.svg
Original name: Cleaning Product C
viewBox: 0 0 1010 1009
Weight: 3 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import cleaningMist from '@ba-icons/illustrations/cleaning/cleaning-mist';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import cleaningMist from '@ba-icons/illustrations/cleaning/cleaning-mist';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import cleaningMist from '@ba-icons/illustrations/cleaning/cleaning-mist';
---

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

HTML

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1010 1009" fill="currentColor"><path d="M163.7 986.5Q121.7 974.5 67.7 913.5Q52.7 896.5 42.2 884Q31.7 871.5 26.2 863Q20.7 854.5 19.7 849.5Q18.7 842.5 21.2 799Q23.7 755.5 27.7 730.5Q53.7 546.5 158.7 363.5Q170.7 342.5 169.2 340.5Q167.7 338.5 163.7 333.5Q160.7 329.5 161.7 322.5Q162.7 315.5 169.7 294.5Q177.7 272.5 181.2 267Q184.7 261.5 191.7 255.5Q197.7 251.5 201.2 250.5Q204.7 249.5 220.7 249.5Q237.7 249.5 242.7 248Q247.7 246.5 247.7 240.5Q247.7 237.5 246.7 235.5Q245.7 233.5 241.2 232.5Q236.7 231.5 229.7 231Q222.7 230.5 208.7 230.5H176.7L164.7 221.5Q131.7 198.5 81.7 181.5Q61.7 174.5 57.7 167.5Q52.7 159.5 58.7 150.5Q64.7 141.5 97.7 108.5Q133.7 73.5 147.7 63.5Q161.7 53.5 182.7 50.5Q189.7 49.5 415.2 61Q640.7 72.5 643.7 74.5Q645.7 75.5 642.2 83Q638.7 90.5 639.7 91.5Q640.7 92.5 658.7 93.5Q669.7 93.5 673.2 94.5Q676.7 95.5 676.7 96.5Q675.7 99.5 662.7 132.5L649.7 164.5L629.7 165.5L609.7 166.5L606.7 174.5L602.7 183.5H574.7H545.7L547.7 205.5Q553.7 290.5 599.7 373.5Q608.7 391.5 609.2 397.5Q609.7 403.5 602.7 408.5Q589.7 417.5 575.7 409.5Q569.7 406.5 555.7 388.5Q541.7 370.5 526.2 347Q510.7 323.5 501.7 305.5Q480.7 266.5 467.7 224.5Q461.7 203.5 460.7 202.5Q459.7 201.5 445.7 210Q431.7 218.5 422.7 224.5Q413.7 231.5 403.7 240.5L393.7 250.5L400.7 255.5Q407.7 261.5 411.2 267.5Q414.7 273.5 422.7 294.5Q429.7 315.5 430.7 323Q431.7 330.5 426.7 336.5L421.7 342.5L437.7 370.5Q535.7 541.5 563.7 723.5Q572.7 786.5 572.7 835.5V854.5L558.7 873.5Q527.7 914.5 494.2 945Q460.7 975.5 434.7 984.5L423.7 989.5H298.7Q173.7 989.5 163.7 986.5ZM450.7 618.5Q466.7 614.5 478.7 609Q490.7 603.5 489.7 600.5Q488.7 597.5 474.7 559.5Q445.7 472.5 394.7 382.5L383.7 363.5H350.7H318.7V486.5V608.5L341.7 614.5Q364.7 620.5 378.7 621.5Q416.7 625.5 450.7 618.5ZM126.7 589.5Q192.7 576.5 268.7 592.5L273.7 593.5V478.5V363.5H240.7H208.7L195.7 387.5Q144.7 476.5 113.7 568.5Q105.7 592.5 107.7 593.5Q108.7 593.5 110.7 592.5Q114.7 591.5 126.7 589.5ZM945.7 246.5Q936.7 239.5 937.2 231Q937.7 222.5 948.7 216.5Q964.7 207.5 981.7 219.5Q989.7 225.5 989.7 232.5Q989.7 239.5 981.7 245.5Q973.7 251.5 963.2 251.5Q952.7 251.5 945.7 246.5ZM844.7 202.5Q831.7 198.5 828.7 188.5Q825.7 178.5 835.7 171.5Q844.7 163.5 857.2 164.5Q869.7 165.5 877.2 175Q884.7 184.5 876.7 193.5Q863.7 208.5 844.7 202.5ZM751.7 152.5Q744.7 149.5 741.2 143.5Q737.7 137.5 739.2 132.5Q740.7 127.5 747.7 122Q754.7 116.5 765.2 116.5Q775.7 116.5 782.7 121.5Q801.7 136.5 781.7 150.5Q767.7 159.5 751.7 152.5ZM948.7 151.5Q937.7 145.5 937.2 137Q936.7 128.5 945.7 121.5Q952.7 116.5 963.2 116.5Q973.7 116.5 981.7 122.5Q989.7 128.5 989.7 135.5Q989.7 142.5 981.7 148.5Q964.7 161.5 948.7 151.5ZM840.7 103.5Q828.7 97.5 827.7 89Q826.7 80.5 836.7 73.5Q843.7 68.5 854.7 68.5Q865.7 68.5 871.7 73.5Q884.7 84.5 877.7 94.5Q875.7 97.5 871.7 100.5Q867.7 103.5 862.7 105.5Q857.7 107.5 853.7 107.5Q848.7 107.5 840.7 103.5ZM948.7 54.5Q937.7 48.5 937.2 40.5Q936.7 32.5 945.2 25.5Q953.7 18.5 965.2 19.5Q976.7 20.5 984.7 27.5Q997.7 40.5 981.7 52.5Q965.7 64.5 948.7 54.5Z"></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/cleaning-mist.svg

<img src="https://icons.atmosphere.africa/svg/cleaning/cleaning-mist.svg" alt="Cleaning mist" width="160">

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

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

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