Video

A strip of film with sprocket holes.

File: video.svg
viewBox: 0 0 981.8 919.8
Weight: 2 KB

96px

160px

240px +

Use it

React

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

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

Vue

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

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

Astro

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

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

HTML

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 981.8 919.8" fill="currentColor"><path d="M338.9 368.9Q339.9 369.9 340.9 371.4Q341.9 372.9 342.9 374.4Q343.9 375.9 343.9 376.9Q342.9 375.9 340.9 373.9Q338.9 372.9 337.9 371.9Q337.9 371.9 338.4 370.4Q338.9 368.9 338.9 368.9ZM918.9 18.9Q937.9 18.9 950.4 34.9Q962.9 50.9 962.9 73.9V845.9Q962.9 868.9 950.4 884.9Q937.9 900.9 918.9 900.9H903.9V854.9Q903.9 843.9 897.4 835.4Q890.9 826.9 881.9 826.9H807.9Q798.9 826.9 792.4 835.4Q785.9 843.9 785.9 854.9V900.9H195.9V854.9Q195.9 843.9 189.4 835.4Q182.9 826.9 173.9 826.9H99.9Q90.9 826.9 84.4 835.4Q77.9 843.9 77.9 854.9V900.9H62.9Q43.9 900.9 31.4 884.9Q18.9 868.9 18.9 845.9V73.9Q18.9 50.9 31.4 34.9Q43.9 18.9 62.9 18.9H77.9V64.9Q77.9 75.9 84.4 84.4Q90.9 92.9 99.9 92.9H173.9Q179.9 92.9 184.9 88.9Q189.9 84.9 192.9 78.4Q195.9 71.9 195.9 64.9V18.9H785.9V64.9Q785.9 75.9 792.4 84.4Q798.9 92.9 807.9 92.9H881.9Q885.9 92.9 889.4 91.4Q892.9 89.9 895.4 87.4Q897.9 84.9 899.9 81.4Q901.9 77.9 902.9 73.4Q903.9 68.9 903.9 64.9V18.9ZM195.9 725.9V634.9Q195.9 622.9 189.4 614.9Q182.9 606.9 173.9 606.9H99.9Q90.9 606.9 84.4 614.9Q77.9 622.9 77.9 634.9V725.9Q77.9 737.9 84.4 745.9Q90.9 753.9 99.9 753.9H173.9Q182.9 753.9 189.4 745.9Q195.9 737.9 195.9 725.9ZM195.9 505.9V413.9Q195.9 407.9 193.9 402.9Q191.9 397.9 188.9 394.4Q185.9 390.9 181.9 388.9Q177.9 386.9 173.9 386.9H99.9Q90.9 386.9 84.4 394.9Q77.9 402.9 77.9 413.9V505.9Q77.9 516.9 84.4 524.9Q90.9 532.9 99.9 532.9H173.9Q182.9 532.9 189.4 524.9Q195.9 516.9 195.9 505.9ZM195.9 284.9V193.9Q195.9 181.9 189.4 173.9Q182.9 165.9 173.9 165.9H99.9Q90.9 165.9 84.4 173.9Q77.9 181.9 77.9 193.9V284.9Q77.9 296.9 84.4 304.9Q90.9 312.9 99.9 312.9H173.9Q182.9 312.9 189.4 304.9Q195.9 296.9 195.9 284.9ZM903.9 725.9V634.9Q903.9 622.9 897.4 614.9Q890.9 606.9 881.9 606.9H807.9Q798.9 606.9 792.4 614.9Q785.9 622.9 785.9 634.9V725.9Q785.9 737.9 792.4 745.9Q798.9 753.9 807.9 753.9H881.9Q890.9 753.9 897.4 745.9Q903.9 737.9 903.9 725.9ZM903.9 505.9V413.9Q903.9 407.9 902.4 402.9Q900.9 397.9 897.9 394.4Q894.9 390.9 890.9 388.9Q886.9 386.9 881.9 386.9H807.9Q798.9 386.9 792.4 394.9Q785.9 402.9 785.9 413.9V505.9Q785.9 512.9 788.9 519.4Q791.9 525.9 796.9 529.4Q801.9 532.9 807.9 532.9H881.9Q890.9 532.9 897.4 524.9Q903.9 516.9 903.9 505.9ZM903.9 284.9V193.9Q903.9 185.9 900.9 179.4Q897.9 172.9 892.9 169.4Q887.9 165.9 881.9 165.9H807.9Q801.9 165.9 796.9 169.4Q791.9 172.9 788.9 179.4Q785.9 185.9 785.9 193.9V284.9Q785.9 296.9 792.4 304.9Q798.9 312.9 807.9 312.9H881.9Q890.9 312.9 897.4 304.9Q903.9 296.9 903.9 284.9Z"></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/video.svg

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

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

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

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