Video icon

Use the Video 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 { Video24Regular, Video24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.25 5C3.45507 5 2 6.45507 2 8.25V15.75C2 17.5449 3.45507 19 5.25 19H12.75C14.5449 19 16 17.5449 16 15.75V15.438L19.2575 17.6872C20.4183 18.4887 22.0018 17.6578 22.0018 16.2471V7.75204C22.0018 6.34137 20.4183 5.51044 19.2575 6.31197L16 8.56118V8.25C16 6.45507 14.5449 5 12.75 5H5.25ZM16 10.384L20.1098 7.54632C20.2756 7.43181 20.5018 7.55051 20.5018 7.75204V16.2471C20.5018 16.4486 20.2756 16.5673 20.1098 16.4528L16 13.6151V10.384ZM3.5 8.25C3.5 7.2835 4.2835 6.5 5.25 6.5H12.75C13.7165 6.5 14.5 7.2835 14.5 8.25V15.75C14.5 16.7165 13.7165 17.5 12.75 17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V8.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_24_regular.svg";

Details

Keywords

videofilmclipmediacontentcamerarecordingcapture