Calendar Video icon

Use the Calendar 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 { CalendarVideo24Regular, CalendarVideo24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_video_24_regular.svg" width="24" height="24" alt="Calendar 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="M4.5 1.25C2.70507 1.25 1.25 2.70507 1.25 4.5V13.5C1.25 15.2949 2.70507 16.75 4.5 16.75H5.25V15.25H4.5C3.5335 15.25 2.75 14.4665 2.75 13.5V7H15.25V9.25H15.5C15.935 9.25 16.3548 9.31536 16.75 9.4368V4.5C16.75 2.70507 15.2949 1.25 13.5 1.25H4.5ZM15.25 5.5H2.75V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H13.5C14.4665 2.75 15.25 3.5335 15.25 4.5V5.5ZM9.5 10.25C7.70507 10.25 6.25 11.7051 6.25 13.5V19.5C6.25 21.2949 7.70507 22.75 9.5 22.75H15.5C17.2439 22.75 18.6671 21.3764 18.7465 19.6521L21.2207 21.4515C22.3774 22.2928 24 21.4665 24 20.0362V12.9638C24 11.5335 22.3774 10.7072 21.2207 11.5485L18.7465 13.3479C18.6671 11.6236 17.2439 10.25 15.5 10.25H9.5ZM18.75 15.2001L22.103 12.7616C22.2682 12.6414 22.5 12.7594 22.5 12.9638V20.0362C22.5 20.2406 22.2682 20.3586 22.103 20.2384L18.75 17.7999V15.2001ZM7.75 13.5C7.75 12.5335 8.5335 11.75 9.5 11.75H15.5C16.4665 11.75 17.25 12.5335 17.25 13.5V19.5C17.25 20.4665 16.4665 21.25 15.5 21.25H9.5C8.5335 21.25 7.75 20.4665 7.75 19.5V13.5Z" 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/calendar_video_24_regular.svg";

Details

Keywords

timedateplanning