Video icon
flat-ui:video
The Video icon (flat-ui:video) is a free SVG icon from the Flat UI Icons set by Designmodo, Inc.. It is drawn on a 100 × 100 grid. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Flat UI Icons
- Author
- Designmodo, Inc.
- License
- MIT
- Size
- 100 × 100
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#1C3C50" d="M98 10h-4c-1.104 0-9 4.896-9 6H74v26h11c0 1.104 7.896 6 9 6h4a2 2 0 0 0 2-1.999V12a2 2 0 0 0-2-2M69.979 48.569c.006 2.149.015 3.432.021 3.432v-3zM12 58a2.003 2.003 0 0 0 2 2h8.957c1.812 2.618 4.459 6 6.043 6h2c5.523 0 10 4.479 10 10.001V96a4 4 0 0 0 4 4h13a4 4 0 0 0 4-4V66h5c2.209 0 3-.79 3-2.999v-11H12z"/><path fill="#EBEEEF" d="M70 0H12C5.373 0 0 5.373 0 12v28c0 6.628 5.373 12.001 12 12.001h58c-.051 0-.07-52.052 0-52.001"/><path fill="#C8CBCB" d="M27 15h-6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path fill="#23475F" d="M72 0h-2v52h2a2 2 0 0 0 2-2.001V2a2 2 0 0 0-2-2m13 16h-3v26h3z"/><path fill="#fff" d="M54 12a6 6 0 1 0 6 6c0-3.313-2.688-6-6-6"/><path fill="#FF4B39" d="M54 14a4 4 0 1 0 0 8a4 4 0 0 0 0-8"/><path fill="#00BD9C" d="M37 14H13a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/><path fill="#1C3C50" d="M28 13h-6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path fill="#23475F" d="M26 13h-2v10h2z"/><path fill="#BCC4C8" d="M0 36v4c0 6.628 5.373 12.001 12 12.001h58c-.02 0-.033-7.074-.041-16z"/><path fill="#23475F" d="M98 10h-4c-.176 0-.538.135-1 .349v37.302c.462.214.824.349 1 .349h4a2 2 0 0 0 2-1.999V12a2 2 0 0 0-2-2"/><path fill="#00A185" d="M20 21v-5.722c-.595.346-1 .984-1 1.723v5h1.277A2 2 0 0 1 20 21"/><path fill="#23475F" d="M22.957 60c1.812 2.618 4.459 6 6.043 6h38c2.209 0 3-.79 3-2.999"/><path fill="#23475F" d="M22.957 60c1.812 2.618 4.459 6 6.043 6h38c2.209 0 3-.79 3-2.999V60z"/></svg>
How to use the Video icon
React
import { Icon } from "@iconify/react";
<Icon icon="flat-ui:video" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="flat-ui:video" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="flat-ui:video" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--video]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:video"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="flat-ui:video"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/flat-ui/video.svg" alt="Video icon" width="24" height="24">
Video icon in other icon sets
Video icon FAQ
Is the Video icon free for commercial use?
Yes. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Video icon in React?
Install @iconify/react and render <Icon icon="flat-ui:video" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Video icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/video.svg" alt="Video icon">, or paste the SVG code inline to style it with CSS.
Browse all Flat UI Icons →
ICONYZ
