Art

A painter's palette with colour wells.

File: art.svg
viewBox: 0 0 983.1 982.8
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import art from '@ba-icons/illustrations/media/art';

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

Vue

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

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import art from '@ba-icons/illustrations/media/art';
---

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

HTML

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

<ba-illustration name="media/art" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 983.1 982.8" fill="currentColor"><path d="M340.2 400.5Q341.2 401.5 342.2 403Q343.2 404.5 344.2 406Q345.2 407.5 345.2 408.5Q344.2 407.5 342.2 405.5Q340.2 404.5 339.2 403.5Q339.2 403.5 339.7 402Q340.2 400.5 340.2 400.5ZM397.2 28.5Q507.2 6.5 612.2 35Q717.2 63.5 794.2 127.5Q871.2 191.5 917.7 287Q964.2 382.5 964.2 489.5Q964.2 538.5 929.2 574Q894.2 609.5 845.2 609.5H698.2Q663.2 609.5 634.2 626Q605.2 642.5 590.2 669Q575.2 695.5 571.7 727.5Q568.2 759.5 585.2 791.5Q612.2 842.5 587.7 897Q563.2 951.5 507.2 960.5Q449.2 969.5 385.7 955Q322.2 940.5 263.7 906.5Q205.2 872.5 154.2 820.5Q103.2 768.5 70.7 702.5Q38.2 636.5 24.7 558.5Q11.2 480.5 29.2 394.5Q56.2 257.5 157.7 156.5Q259.2 55.5 397.2 28.5ZM256.2 550.5Q256.2 538.5 251.2 527.5Q246.2 516.5 238.7 508.5Q231.2 500.5 220.2 496Q209.2 491.5 197.2 491.5Q181.2 491.5 167.2 499.5Q153.2 507.5 145.7 521Q138.2 534.5 138.2 550.5Q138.2 575.5 155.2 592.5Q172.2 609.5 196.7 609.5Q221.2 609.5 238.7 592.5Q256.2 575.5 256.2 550.5ZM256.2 373.5Q268.2 373.5 279.2 369Q290.2 364.5 297.7 356.5Q305.2 348.5 310.2 337.5Q315.2 326.5 315.2 314.5Q315.2 289.5 297.7 272.5Q280.2 255.5 255.7 255.5Q231.2 255.5 214.2 272.5Q197.2 289.5 197.2 314Q197.2 338.5 214.2 356Q231.2 373.5 256.2 373.5ZM551.2 196.5Q551.2 180.5 543.2 167Q535.2 153.5 521.7 145.5Q508.2 137.5 492.2 137.5Q476.2 137.5 462.7 145.5Q449.2 153.5 441.2 167Q433.2 180.5 433.2 196.5Q433.2 220.5 450.2 238Q467.2 255.5 491.7 255.5Q516.2 255.5 533.7 238Q551.2 220.5 551.2 196.5ZM728.2 373.5Q744.2 373.5 757.7 365.5Q771.2 357.5 779.2 344Q787.2 330.5 787.2 314.5Q787.2 289.5 770.2 272.5Q753.2 255.5 728.7 255.5Q704.2 255.5 686.7 272.5Q669.2 289.5 669.2 314Q669.2 338.5 686.7 356Q704.2 373.5 728.2 373.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/media/art.svg

<img src="https://icons.atmosphere.africa/svg/media/art.svg" alt="Art" width="160">

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

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

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