Video Chat icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.25V11.8109C2.44425 11.3844 2.94896 11.0204 3.5 10.733V8.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.6564 13.8109 17.4018 12.9281 17.4911C12.8477 18.0175 12.7041 18.5231 12.5054 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.384ZM6.50113 22.0024C9.53932 22.0024 12.0023 19.5395 12.0023 16.5012C12.0023 13.463 9.53932 11 6.50113 11C3.46294 11 1 13.463 1 16.5012C1 17.4692 1.24998 18.3787 1.6889 19.1688L1.02312 21.3553C0.906576 21.7381 1.26436 22.0959 1.64713 21.9795L3.83426 21.3139C4.62421 21.7526 5.53349 22.0024 6.50113 22.0024ZM4.50091 16.0011C4.22471 16.0011 4.00081 15.7772 4.00081 15.501C4.00081 15.2248 4.22471 15.0009 4.50091 15.0009H8.50154C8.77774 15.0009 9.00164 15.2248 9.00164 15.501C9.00164 15.7772 8.77774 16.0011 8.50154 16.0011H4.50091ZM6.50113 18.0015H4.50091C4.22471 18.0015 4.00081 17.7776 4.00081 17.5014C4.00081 17.2252 4.22471 17.0013 4.50091 17.0013H6.50113C6.77733 17.0013 7.00123 17.2252 7.00123 17.5014C7.00123 17.7776 6.77733 18.0015 6.50113 18.0015Z" 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_chat_24_regular.svg";

Details

Keywords

videofilmclipmediacontentcamerarecordingcapturechat