Chat Video icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_video_24_regular.svg" width="24" height="24" alt="Chat 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="M12 8C13.1046 8 14 8.89543 14 10V14C14 15.1046 13.1046 16 12 16H9C7.89543 16 7 15.1046 7 14V10C7 8.89543 7.89543 8 9 8H12ZM15 13.1619V10.8382L16.7344 9.19628C17.2125 8.7437 18 9.08261 18 9.74093V14.2591C18 14.9174 17.2125 15.2563 16.7344 14.8037L15 13.1619ZM22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.6203 2.38637 15.186 3.11461 16.5922L2.04695 20.4151C1.98549 20.6349 1.98546 20.8676 2.04691 21.0876C2.23258 21.7525 2.92212 22.141 3.58704 21.9553L7.41286 20.888C8.81782 21.6146 10.3817 22 12 22C17.5228 22 22 17.5228 22 12ZM3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C10.5322 20.5 9.12006 20.1281 7.86709 19.4295L7.59755 19.2792L3.61096 20.3914L4.72368 16.4072L4.57303 16.1375C3.87277 14.8834 3.5 13.4696 3.5 12Z" 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/chat_video_24_regular.svg";

Details

Keywords

discussionmessagepost