Touch control

A finger pressing, with focus corners.

File: touch-control.svg
Original name: Hand Bell
viewBox: 0 0 795.4 1008.9
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import touchControl from '@ba-icons/illustrations/smart-home/touch-control';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import touchControl from '@ba-icons/illustrations/smart-home/touch-control';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import touchControl from '@ba-icons/illustrations/smart-home/touch-control';
---

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

HTML

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

<ba-illustration name="smart-home/touch-control" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 795.4 1008.9" fill="currentColor"><path d="M442.4 988.4Q360.4 981.4 346.4 973.4Q334.4 968.4 330.9 956.9Q327.4 945.4 323.4 902.4L318.4 848.4L290.4 818.4Q238.4 763.4 199.4 727.4Q175.4 706.4 161.4 687.4Q145.4 667.4 126.4 621.4Q116.4 598.4 92.4 551.4Q75.4 515.4 69.4 507.4Q63.4 499.4 47.4 485.4Q30.4 471.4 24.9 462.4Q19.4 453.4 19.4 439.4Q19.4 429.4 28.4 421.4Q35.4 416.4 38.9 415.4Q42.4 414.4 55.4 415.4Q88.4 418.4 119.9 438.9Q151.4 459.4 195.4 508.4Q226.4 543.4 237.4 553.4L247.4 563.4L252.4 545.4Q263.4 504.4 251.4 461.4Q245.4 441.4 236.4 408.4Q222.4 355.4 218.4 287.4Q214.4 207.4 225.4 161.4Q238.4 111.4 281.4 110.4Q303.4 110.4 318.4 129.4Q326.4 139.4 329.9 154.4Q333.4 169.4 340.4 225.4Q359.4 384.4 364.4 397.4L367.4 407.4L380.4 399.4Q400.4 389.4 429.4 387.9Q458.4 386.4 484.4 395.4Q501.4 401.4 515.4 398.4Q537.4 393.4 569.9 395.4Q602.4 397.4 623.4 406.4Q638.4 411.4 666.4 413.4Q749.4 416.4 772.4 476.4Q785.4 509.4 751.4 697.4Q738.4 767.4 718.4 814.4Q684.4 894.4 683.4 938.4Q682.4 957.4 678.9 965.4Q675.4 973.4 665.9 977.4Q656.4 981.4 634.4 984.4Q615.4 987.4 537.9 988.9Q460.4 990.4 442.4 988.4ZM114.4 273.4V247.4H133.4H153.4V258.4V269.4L168.4 270.4H184.4V285.4V300.4L151.4 301.4Q118.4 302.4 116.4 300.4Q114.4 298.4 114.4 273.4ZM372.4 285.4V269.4H389.4H405.4V258.4V247.4H423.4H441.4V274.4V302.4H406.4H372.4ZM197.4 222.4Q164.4 193.4 164.9 153.9Q165.4 114.4 198.4 87.4Q213.4 74.4 231.4 67.4Q249.4 60.4 278.9 60.4Q308.4 60.4 325.4 67.4Q351.4 77.4 370.4 99.9Q389.4 122.4 392.4 145.4Q396.4 175.4 377.4 202.4Q364.4 220.4 351.4 227.4Q349.4 229.4 349.4 227.4Q349.4 221.4 346.4 202.9Q343.4 184.4 340.4 166.4Q337.4 148.4 335.4 143.4Q327.4 121.4 309.4 110.9Q291.4 100.4 268.4 104.4Q241.4 110.4 228.4 133.4Q215.4 156.4 210.4 206.4Q208.4 229.4 206.4 229.4Q204.4 229.4 197.4 222.4ZM114.4 45.4V19.4H150.4H185.4V34.4V49.4H169.4H153.4L152.4 61.4L151.4 73.4H135.4Q118.4 74.4 116.4 72.9Q114.4 71.4 114.4 45.4ZM405.4 62.4V49.4H389.4H372.4V34.4V19.4H406.4H441.4V46.4V74.4H423.4H405.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/smart-home/touch-control.svg

<img src="https://icons.atmosphere.africa/svg/smart-home/touch-control.svg" alt="Touch control" width="160">

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

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

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