Video Clip Off icon

Use the Video Clip Off icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { VideoClipOff24Regular, VideoClipOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VideoClipOff24Regular aria-label="Video Clip Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_video_clip_off_24_regular.svg" width="24" height="24" alt="Video Clip Off">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L2.92176 3.98244C2.35137 4.568 2 5.36797 2 6.25V17.75C2 19.5449 3.45507 21 5.25 21H18.75C19.1079 21 19.4523 20.9422 19.7743 20.8353L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM18.439 19.5H5.25C4.2835 19.5 3.5 18.7165 3.5 17.75V6.25C3.5 5.78219 3.68356 5.35725 3.98259 5.04328L9 10.0608V14.7501C9 15.5107 9.81546 15.9929 10.4819 15.6263L13.1165 14.1773L18.439 19.5ZM12.8697 9.68773L15.7933 12.6114C16.1487 12.1512 16.0448 11.434 15.4815 11.1242L12.8697 9.68773ZM20.5 6.25V17.3182L21.8643 18.6825C21.9526 18.3871 22 18.0741 22 17.75V6.25C22 4.45507 20.5449 3 18.75 3H6.18209L7.68206 4.5H18.75C19.7165 4.5 20.5 5.2835 20.5 6.25Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/video_clip_off_24_regular.svg";

Details

Keywords

videofilmclipmediacontentcamerarecordingcaptureslash