video background effect icon
video-background-effect-48-filled from Fluent UI System Icons by Microsoft Corporation · 48 Filled · MIT Free for personal and commercial use.
- Name
- video-background-effect-48-filled
- Set
- Fluent UI System Icons
- Style
- 48 Filled
- Viewbox
- 48×48
- License
- MIT
11 other variants in Fluent UI System Icons
video-background-effect-16-filledvideo-background-effect-16-regularvideo-background-effect-20-filledvideo-background-effect-20-regularvideo-background-effect-24-filledvideo-background-effect-24-regularvideo-background-effect-28-filledvideo-background-effect-28-regularvideo-background-effect-32-filledvideo-background-effect-32-regularvideo-background-effect-48-regular
Related icons in Fluent UI System Icons
video-360-20-filledvideo-360-off-20-filledvideo-add-20-filledvideo-background-effect-horizontal-16-filledvideo-bluetooth-16-filledvideo-chat-16-filledvideo-clip-16-filledvideo-clip-multiple-16-filledvideo-clip-off-16-filledvideo-clip-optimize-16-filledvideo-clip-wand-16-filledvideo-link-24-filledvideo-multiple-16-filledvideo-off-16-filledvideo-people-32-filledvideo-person-12-filledvideo-person-call-16-filledvideo-person-clock-16-filledvideo-person-off-20-filledvideo-person-pulse-16-filledvideo-person-sparkle-16-filledvideo-person-sparkle-off-20-filledvideo-person-star-20-filledvideo-person-star-off-20-filled
Use the video background effect icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M4 15.232L11.232 8h3.536L4 18.768zm0 12.536v-3.536L20.232 8h3.536zm.1 8.9a4.3 4.3 0 0 1-.1-.918v-2.518L16.082 21.15c.137.95.44 1.845.88 2.656zm26.196-11.732q-.454.578-1.004 1.064h1.458c.605 0 1.186.102 1.727.29L44 14.769V12.25q0-.474-.1-.918zm.366-9.366a8 8 0 0 1 1.09 2.446l9.673-9.673A4.2 4.2 0 0 0 39.75 8h-1.518zM32.768 8l-4.962 4.962a8 8 0 0 0-2.656-.88L29.232 8zm-23 32H8.25a4.2 4.2 0 0 1-1.675-.343L12 34.232v3.536zM36 31.25v.518l8-8v-3.536l-8.593 8.593A5.2 5.2 0 0 1 36 31.25m.768 8.75H36v-2.768l8-8v3.536zM14 31.25V40h20v-8.75A3.25 3.25 0 0 0 30.75 28h-13.5A3.25 3.25 0 0 0 14 31.25M24 26a6 6 0 1 0 0-12a6 6 0 0 0 0 12"/></svg>
React
import type { SVGProps } from "react";
export function FluentVideoBackgroundEffect48Filled(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M4 15.232L11.232 8h3.536L4 18.768zm0 12.536v-3.536L20.232 8h3.536zm.1 8.9a4.3 4.3 0 0 1-.1-.918v-2.518L16.082 21.15c.137.95.44 1.845.88 2.656zm26.196-11.732q-.454.578-1.004 1.064h1.458c.605 0 1.186.102 1.727.29L44 14.769V12.25q0-.474-.1-.918zm.366-9.366a8 8 0 0 1 1.09 2.446l9.673-9.673A4.2 4.2 0 0 0 39.75 8h-1.518zM32.768 8l-4.962 4.962a8 8 0 0 0-2.656-.88L29.232 8zm-23 32H8.25a4.2 4.2 0 0 1-1.675-.343L12 34.232v3.536zM36 31.25v.518l8-8v-3.536l-8.593 8.593A5.2 5.2 0 0 1 36 31.25m.768 8.75H36v-2.768l8-8v3.536zM14 31.25V40h20v-8.75A3.25 3.25 0 0 0 30.75 28h-13.5A3.25 3.25 0 0 0 14 31.25M24 26a6 6 0 1 0 0-12a6 6 0 0 0 0 12"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M4 15.232L11.232 8h3.536L4 18.768zm0 12.536v-3.536L20.232 8h3.536zm.1 8.9a4.3 4.3 0 0 1-.1-.918v-2.518L16.082 21.15c.137.95.44 1.845.88 2.656zm26.196-11.732q-.454.578-1.004 1.064h1.458c.605 0 1.186.102 1.727.29L44 14.769V12.25q0-.474-.1-.918zm.366-9.366a8 8 0 0 1 1.09 2.446l9.673-9.673A4.2 4.2 0 0 0 39.75 8h-1.518zM32.768 8l-4.962 4.962a8 8 0 0 0-2.656-.88L29.232 8zm-23 32H8.25a4.2 4.2 0 0 1-1.675-.343L12 34.232v3.536zM36 31.25v.518l8-8v-3.536l-8.593 8.593A5.2 5.2 0 0 1 36 31.25m.768 8.75H36v-2.768l8-8v3.536zM14 31.25V40h20v-8.75A3.25 3.25 0 0 0 30.75 28h-13.5A3.25 3.25 0 0 0 14 31.25M24 26a6 6 0 1 0 0-12a6 6 0 0 0 0 12"/></svg> </template>
CSS
.icon-video-background-effect-48-filled {
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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2015.232L11.232%208h3.536L4%2018.768zm0%2012.536v-3.536L20.232%208h3.536zm.1%208.9a4.3%204.3%200%200%201-.1-.918v-2.518L16.082%2021.15c.137.95.44%201.845.88%202.656zm26.196-11.732q-.454.578-1.004%201.064h1.458c.605%200%201.186.102%201.727.29L44%2014.769V12.25q0-.474-.1-.918zm.366-9.366a8%208%200%200%201%201.09%202.446l9.673-9.673A4.2%204.2%200%200%200%2039.75%208h-1.518zM32.768%208l-4.962%204.962a8%208%200%200%200-2.656-.88L29.232%208zm-23%2032H8.25a4.2%204.2%200%200%201-1.675-.343L12%2034.232v3.536zM36%2031.25v.518l8-8v-3.536l-8.593%208.593A5.2%205.2%200%200%201%2036%2031.25m.768%208.75H36v-2.768l8-8v3.536zM14%2031.25V40h20v-8.75A3.25%203.25%200%200%200%2030.75%2028h-13.5A3.25%203.25%200%200%200%2014%2031.25M24%2026a6%206%200%201%200%200-12a6%206%200%200%200%200%2012%22%2F%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%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2015.232L11.232%208h3.536L4%2018.768zm0%2012.536v-3.536L20.232%208h3.536zm.1%208.9a4.3%204.3%200%200%201-.1-.918v-2.518L16.082%2021.15c.137.95.44%201.845.88%202.656zm26.196-11.732q-.454.578-1.004%201.064h1.458c.605%200%201.186.102%201.727.29L44%2014.769V12.25q0-.474-.1-.918zm.366-9.366a8%208%200%200%201%201.09%202.446l9.673-9.673A4.2%204.2%200%200%200%2039.75%208h-1.518zM32.768%208l-4.962%204.962a8%208%200%200%200-2.656-.88L29.232%208zm-23%2032H8.25a4.2%204.2%200%200%201-1.675-.343L12%2034.232v3.536zM36%2031.25v.518l8-8v-3.536l-8.593%208.593A5.2%205.2%200%200%201%2036%2031.25m.768%208.75H36v-2.768l8-8v3.536zM14%2031.25V40h20v-8.75A3.25%203.25%200%200%200%2030.75%2028h-13.5A3.25%203.25%200%200%200%2014%2031.25M24%2026a6%206%200%201%200%200-12a6%206%200%200%200%200%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/video-background-effect-48-filled.svg?color=%231a73e8&size=48
