Stopwatch

A stopwatch.

File: stopwatch.svg
viewBox: 0 0 811.9 925.6
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import stopwatch from '@ba-icons/illustrations/concepts/stopwatch';

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

Vue

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

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import stopwatch from '@ba-icons/illustrations/concepts/stopwatch';
---

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

HTML

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

<ba-illustration name="concepts/stopwatch" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 811.9 925.6" fill="currentColor"><path d="M371.1 903.8Q301.1 897.8 241.1 871.8Q126.1 822.8 63.1 719.8Q40.1 681.8 28.1 634.8Q16.1 587.8 18.1 544.8Q22.1 451.8 74.1 373.8Q88.1 351.8 88.1 347.8Q88.1 343.8 57.1 315.8Q43.1 302.8 38.6 299.3Q34.1 295.8 29.1 288.3Q24.1 280.8 24.1 279.3Q24.1 277.8 27.6 271.3Q31.1 264.8 35.1 261.8Q39.1 258.8 50.1 248.8Q75.1 225.8 83.6 226.3Q92.1 226.8 121.1 253.8Q151.1 280.8 156.6 280.8Q162.1 280.8 183.1 267.8Q247.1 225.8 330.1 210.8Q355.1 205.8 357.6 202.8Q360.1 199.8 360.1 172.8Q360.1 152.8 360.6 147.8Q361.1 142.8 366.1 138.8Q371.1 134.8 376.6 134.3Q382.1 133.8 407.1 133.8Q441.1 133.8 446.6 138.8Q452.1 143.8 454.1 173.8Q454.1 177.8 454.1 182.8Q454.1 199.8 457.1 203.3Q460.1 206.8 478.1 209.8Q483.1 210.8 487.1 211.8Q565.1 226.8 632.1 268.8Q651.1 280.8 655.6 280.8Q660.1 280.8 691.1 253.8Q706.1 239.8 712.6 234.8Q719.1 229.8 722.6 227.8Q726.1 225.8 731.1 225.8Q738.1 225.8 743.1 229.3Q748.1 232.8 765.1 247.8Q775.1 256.8 778.6 259.8Q782.1 262.8 785.6 269.3Q789.1 275.8 789.1 277.3Q789.1 278.8 784.1 286.3Q779.1 293.8 774.6 297.3Q770.1 300.8 757.1 312.8Q725.1 341.8 725.1 347.3Q725.1 352.8 736.1 368.8Q773.1 422.8 788.1 488.8Q794.1 515.8 794.1 554.8Q794.1 593.8 788.1 619.8Q762.1 731.8 676.1 807.8Q638.1 839.8 589.1 863.8Q540.1 887.8 490.1 897.8Q483.1 898.8 462.6 901.3Q442.1 903.8 423.6 905.8Q405.1 907.8 403.1 907.8Q402.1 906.8 371.1 903.8ZM460.1 833.8Q581.1 813.8 655.1 726.3Q729.1 638.8 718.1 528.8Q707.1 422.8 622.1 349.8Q557.1 293.8 464.1 276.8Q437.1 271.8 396.1 272.8Q340.1 274.8 294.1 289.8Q230.1 312.8 183.1 356.8Q136.1 400.8 113.6 453.8Q91.1 506.8 94.1 567.8Q97.1 628.8 128.1 683.8Q163.1 744.8 224.6 784.8Q286.1 824.8 360.1 833.8Q379.1 836.8 385.1 837.8Q409.1 841.8 460.1 833.8ZM384.1 598.8Q352.1 585.8 352.1 553.8Q352.1 542.8 348.1 536.8Q343.1 530.8 268.1 453.8Q225.1 409.8 225.1 407.8Q225.1 404.8 230.6 401.3Q236.1 397.8 239.1 398.8Q243.1 399.8 311.1 452.8L378.1 506.8L397.1 505.8Q435.1 503.8 453.1 528.8Q461.1 541.8 461.1 555.3Q461.1 568.8 452.6 581.3Q444.1 593.8 429.1 598.8Q406.1 608.8 384.1 598.8ZM306.1 49.8V17.8H407.1H507.1V49.8V81.8H407.1H306.1Z"></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/concepts/stopwatch.svg

<img src="https://icons.atmosphere.africa/svg/concepts/stopwatch.svg" alt="Stopwatch" width="160">

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

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

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