video icon
video-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.
- Name
- video-20
- Set
- Fluent UI System Color Icons
- Style
- 20
- Viewbox
- 20×20
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
videoAkar IconsvideoBoxIcons v2videoBoxIcons v2 SolidvideoCarbonvideoCatppuccin Iconsvideo-fillEva IconsvideoFont Awesome 6 SolidvideoFont Awesome SolidvideoFeather Iconsvideo-16-filledFluent UI System IconsvideoHealth IconsvideoIconParkvideoIconPark OutlinevideoIconPark SolidvideoIconPark TwoTonevideoLine AwesomevideoLucidevideoMage IconsvideoMajesticonsvideoMaterial Icon ThemevideoMaterial Design Iconsvideo-fillMingCute IconvideoMyna UI Iconsvideo-16Octicons
Use the video icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGt450OcIl1)" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGYJ7AMbzm1)" fill-opacity=".75" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGpWnt0dYD1)" d="M2 7a3 3 0 0 1 3-3h5.001a3 3 0 0 1 3 3v6.001a3 3 0 0 1-3 3h-5a3 3 0 0 1-3.001-3z"/><path fill="url(#SVGjKGeucOF1)" d="M3 12a2 2 0 0 1 2-2h5a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2" opacity=".5"/><path fill="#babaff" d="M5 11a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm5 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><defs><radialGradient id="SVGt450OcIl1" cx="0" cy="0" r="1" gradientTransform="matrix(2.99999 11.99999 -25.19577 6.29892 14 4)" gradientUnits="userSpaceOnUse"><stop offset=".081" stop-color="#f08af4"/><stop offset=".341" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGpWnt0dYD1" cx="0" cy="0" r="1" gradientTransform="rotate(45.1 -5.419 2.25)scale(17.9321 37.6787)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".341" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><linearGradient id="SVGYJ7AMbzm1" x1="11.644" x2="17.991" y1="10.001" y2="9.762" gradientUnits="userSpaceOnUse"><stop stop-color="#312a9a"/><stop offset="1" stop-color="#312a9a" stop-opacity="0"/></linearGradient><linearGradient id="SVGjKGeucOF1" x1="2.796" x2="4.154" y1="10" y2="15.344" gradientUnits="userSpaceOnUse"><stop stop-color="#3b148a"/><stop offset="1" stop-color="#4b20a0"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorVideo20(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGt450OcIl1)" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGYJ7AMbzm1)" fillOpacity=".75" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGpWnt0dYD1)" d="M2 7a3 3 0 0 1 3-3h5.001a3 3 0 0 1 3 3v6.001a3 3 0 0 1-3 3h-5a3 3 0 0 1-3.001-3z"/><path fill="url(#SVGjKGeucOF1)" d="M3 12a2 2 0 0 1 2-2h5a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2" opacity=".5"/><path fill="#babaff" d="M5 11a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm5 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><defs><radialGradient id="SVGt450OcIl1" cx="0" cy="0" r="1" gradientTransform="matrix(2.99999 11.99999 -25.19577 6.29892 14 4)" gradientUnits="userSpaceOnUse"><stop offset=".081" stopColor="#f08af4"/><stop offset=".341" stopColor="#9c6cfe"/><stop offset="1" stopColor="#4e44db"/></radialGradient><radialGradient id="SVGpWnt0dYD1" cx="0" cy="0" r="1" gradientTransform="rotate(45.1 -5.419 2.25)scale(17.9321 37.6787)" gradientUnits="userSpaceOnUse"><stop stopColor="#f08af4"/><stop offset=".341" stopColor="#9c6cfe"/><stop offset="1" stopColor="#4e44db"/></radialGradient><linearGradient id="SVGYJ7AMbzm1" x1="11.644" x2="17.991" y1="10.001" y2="9.762" gradientUnits="userSpaceOnUse"><stop stopColor="#312a9a"/><stop offset="1" stopColor="#312a9a" stopOpacity="0"/></linearGradient><linearGradient id="SVGjKGeucOF1" x1="2.796" x2="4.154" y1="10" y2="15.344" gradientUnits="userSpaceOnUse"><stop stopColor="#3b148a"/><stop offset="1" stopColor="#4b20a0"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGt450OcIl1)" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGYJ7AMbzm1)" fill-opacity=".75" d="m16.04 14.777l-2.038-1.406L9.2 9.8L13.4 7l2.64-1.776A1.25 1.25 0 0 1 18 6.252v7.497a1.25 1.25 0 0 1-1.96 1.028"/><path fill="url(#SVGpWnt0dYD1)" d="M2 7a3 3 0 0 1 3-3h5.001a3 3 0 0 1 3 3v6.001a3 3 0 0 1-3 3h-5a3 3 0 0 1-3.001-3z"/><path fill="url(#SVGjKGeucOF1)" d="M3 12a2 2 0 0 1 2-2h5a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2" opacity=".5"/><path fill="#babaff" d="M5 11a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm5 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2"/><defs><radialGradient id="SVGt450OcIl1" cx="0" cy="0" r="1" gradientTransform="matrix(2.99999 11.99999 -25.19577 6.29892 14 4)" gradientUnits="userSpaceOnUse"><stop offset=".081" stop-color="#f08af4"/><stop offset=".341" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><radialGradient id="SVGpWnt0dYD1" cx="0" cy="0" r="1" gradientTransform="rotate(45.1 -5.419 2.25)scale(17.9321 37.6787)" gradientUnits="userSpaceOnUse"><stop stop-color="#f08af4"/><stop offset=".341" stop-color="#9c6cfe"/><stop offset="1" stop-color="#4e44db"/></radialGradient><linearGradient id="SVGYJ7AMbzm1" x1="11.644" x2="17.991" y1="10.001" y2="9.762" gradientUnits="userSpaceOnUse"><stop stop-color="#312a9a"/><stop offset="1" stop-color="#312a9a" stop-opacity="0"/></linearGradient><linearGradient id="SVGjKGeucOF1" x1="2.796" x2="4.154" y1="10" y2="15.344" gradientUnits="userSpaceOnUse"><stop stop-color="#3b148a"/><stop offset="1" stop-color="#4b20a0"/></linearGradient></defs></g></svg> </template>
CSS
.icon-video-20 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGt450OcIl1)%22%20d%3D%22m16.04%2014.777l-2.038-1.406L9.2%209.8L13.4%207l2.64-1.776A1.25%201.25%200%200%201%2018%206.252v7.497a1.25%201.25%200%200%201-1.96%201.028%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGYJ7AMbzm1)%22%20fill-opacity%3D%22.75%22%20d%3D%22m16.04%2014.777l-2.038-1.406L9.2%209.8L13.4%207l2.64-1.776A1.25%201.25%200%200%201%2018%206.252v7.497a1.25%201.25%200%200%201-1.96%201.028%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpWnt0dYD1)%22%20d%3D%22M2%207a3%203%200%200%201%203-3h5.001a3%203%200%200%201%203%203v6.001a3%203%200%200%201-3%203h-5a3%203%200%200%201-3.001-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGjKGeucOF1)%22%20d%3D%22M3%2012a2%202%200%200%201%202-2h5a2%202%200%201%201%200%204H5a2%202%200%200%201-2-2%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20fill%3D%22%23babaff%22%20d%3D%22M5%2011a1%201%200%201%200%200%202h2a1%201%200%201%200%200-2zm5%202a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGt450OcIl1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(2.99999%2011.99999%20-25.19577%206.29892%2014%204)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.081%22%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.341%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGpWnt0dYD1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(45.1%20-5.419%202.25)scale(17.9321%2037.6787)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.341%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGYJ7AMbzm1%22%20x1%3D%2211.644%22%20x2%3D%2217.991%22%20y1%3D%2210.001%22%20y2%3D%229.762%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23312a9a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23312a9a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGjKGeucOF1%22%20x1%3D%222.796%22%20x2%3D%224.154%22%20y1%3D%2210%22%20y2%3D%2215.344%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233b148a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234b20a0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGt450OcIl1)%22%20d%3D%22m16.04%2014.777l-2.038-1.406L9.2%209.8L13.4%207l2.64-1.776A1.25%201.25%200%200%201%2018%206.252v7.497a1.25%201.25%200%200%201-1.96%201.028%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGYJ7AMbzm1)%22%20fill-opacity%3D%22.75%22%20d%3D%22m16.04%2014.777l-2.038-1.406L9.2%209.8L13.4%207l2.64-1.776A1.25%201.25%200%200%201%2018%206.252v7.497a1.25%201.25%200%200%201-1.96%201.028%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGpWnt0dYD1)%22%20d%3D%22M2%207a3%203%200%200%201%203-3h5.001a3%203%200%200%201%203%203v6.001a3%203%200%200%201-3%203h-5a3%203%200%200%201-3.001-3z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGjKGeucOF1)%22%20d%3D%22M3%2012a2%202%200%200%201%202-2h5a2%202%200%201%201%200%204H5a2%202%200%200%201-2-2%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20fill%3D%22%23babaff%22%20d%3D%22M5%2011a1%201%200%201%200%200%202h2a1%201%200%201%200%200-2zm5%202a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVGt450OcIl1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(2.99999%2011.99999%20-25.19577%206.29892%2014%204)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.081%22%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.341%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGpWnt0dYD1%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(45.1%20-5.419%202.25)scale(17.9321%2037.6787)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23f08af4%22%2F%3E%3Cstop%20offset%3D%22.341%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234e44db%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGYJ7AMbzm1%22%20x1%3D%2211.644%22%20x2%3D%2217.991%22%20y1%3D%2210.001%22%20y2%3D%229.762%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23312a9a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23312a9a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGjKGeucOF1%22%20x1%3D%222.796%22%20x2%3D%224.154%22%20y1%3D%2210%22%20y2%3D%2215.344%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%233b148a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234b20a0%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/video-20.svg?color=%231a73e8&size=48
