Video Clip Optimize icon

Use the Video Clip Optimize 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 { VideoClipOptimize24Regular, VideoClipOptimize24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.5 7.75C3.5 5.40279 5.40279 3.5 7.75 3.5H8.25C8.66421 3.5 9 3.16421 9 2.75C9 2.33579 8.66421 2 8.25 2H7.75C4.57436 2 2 4.57436 2 7.75V8.25C2 8.66421 2.33579 9 2.75 9C3.16421 9 3.5 8.66421 3.5 8.25V7.75ZM3.5 16.25C3.5 18.5972 5.40279 20.5 7.75 20.5H8.25C8.66421 20.5 9 20.8358 9 21.25C9 21.6642 8.66421 22 8.25 22H7.75C4.57436 22 2 19.4256 2 16.25V15.75C2 15.3358 2.33579 15 2.75 15C3.16421 15 3.5 15.3358 3.5 15.75V16.25ZM16.25 3.5C18.5972 3.5 20.5 5.40279 20.5 7.75V8.25C20.5 8.66421 20.8358 9 21.25 9C21.6642 9 22 8.66421 22 8.25V7.75C22 4.57436 19.4256 2 16.25 2H15.75C15.3358 2 15 2.33579 15 2.75C15 3.16421 15.3358 3.5 15.75 3.5H16.25ZM20.5 16.25C20.5 18.5972 18.5972 20.5 16.25 20.5H15.75C15.3358 20.5 15 20.8358 15 21.25C15 21.6642 15.3358 22 15.75 22H16.25C19.4256 22 22 19.4256 22 16.25V15.75C22 15.3358 21.6642 15 21.25 15C20.8358 15 20.5 15.3358 20.5 15.75V16.25ZM5 8.25C5 6.45507 6.45507 5 8.25 5H15.75C17.5449 5 19 6.45507 19 8.25V15.75C19 17.5449 17.5449 19 15.75 19H8.25C6.45507 19 5 17.5449 5 15.75V8.25ZM8.25 6.5C7.2835 6.5 6.5 7.2835 6.5 8.25V15.75C6.5 16.7165 7.2835 17.5 8.25 17.5H15.75C16.7165 17.5 17.5 16.7165 17.5 15.75V8.25C17.5 7.2835 16.7165 6.5 15.75 6.5H8.25ZM9 14.7501V9.25069C9 8.49009 9.81546 8.00793 10.4819 8.37447L15.4815 11.1242C16.1723 11.5041 16.1723 12.4967 15.4815 12.8766L10.4819 15.6263C9.81546 15.9929 9 15.5107 9 14.7501Z" 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_optimize_24_regular.svg";

Details

Keywords

videoclipplaymediavideocompressoptimize