Video Clip Wand icon

Use the Video Clip Wand 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 { VideoClipWand24Regular, VideoClipWand24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M4.25 2C2.45507 2 1 3.45507 1 5.25V16.75C1 18.5449 2.45507 20 4.25 20H11.5251L13.0252 18.5H4.25C3.2835 18.5 2.5 17.7165 2.5 16.75V5.25C2.5 4.2835 3.2835 3.5 4.25 3.5H17.75C18.7165 3.5 19.5 4.2835 19.5 5.25V9.3138C19.8958 9.58964 20.1741 10.026 20.2369 10.5362L20.3759 11.6658C20.4379 12.1692 20.6642 12.6201 21 12.9636V5.25C21 3.45507 19.5449 2 17.75 2H4.25ZM19.5 12.3384C19.7048 13.0115 20.1206 13.5908 20.6711 14C21.1115 14.3274 21.6382 14.5459 22.212 14.6166L23.3416 14.7556C23.7176 14.8019 24 15.1212 24 15.5C24 15.8788 23.7176 16.1981 23.3416 16.2444L22.212 16.3834C20.7318 16.5656 19.5656 17.7318 19.3834 19.212L19.2444 20.3416C19.1981 20.7176 18.8788 21 18.5 21C18.1212 21 17.8019 20.7176 17.7556 20.3416L17.6166 19.212C17.4344 17.7318 16.2682 16.5656 14.788 16.3834L13.6584 16.2444C13.2824 16.1981 13 15.8788 13 15.5C13 15.1212 13.2824 14.8019 13.6584 14.7556L14.788 14.6166C16.2682 14.4344 17.4344 13.2682 17.6166 11.788L17.7556 10.6584C17.8019 10.2824 18.1212 10 18.5 10C18.8788 10 19.1981 10.2824 19.2444 10.6584L19.3834 11.788C19.4067 11.977 19.446 12.161 19.5 12.3384ZM16.7745 15.5C17.4893 15.915 18.085 16.5107 18.5 17.2255C18.915 16.5107 19.5107 15.915 20.2255 15.5C19.5107 15.085 18.915 14.4893 18.5 13.7745C18.085 14.4893 17.4893 15.085 16.7745 15.5ZM14.7197 18.2197C15.0126 17.9268 15.4874 17.9268 15.7803 18.2197C16.0732 18.5126 16.0732 18.9875 15.7803 19.2804L11.2803 23.7803C10.9874 24.0732 10.5126 24.0732 10.2197 23.7803C9.92678 23.4874 9.92678 23.0126 10.2197 22.7197L14.7197 18.2197ZM8 13.7501V8.2507C8 7.4901 8.81546 7.00794 9.48191 7.37448L14.4815 10.1242C15.1723 10.5041 15.1723 11.4967 14.4815 11.8766L9.48191 14.6263C8.81546 14.9929 8 14.5107 8 13.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_wand_24_regular.svg";

Details

Keywords

videofilmclipmediacontentcamerarecordingcapturemagicwandenhanceoptimize