Microphone Chat icon

Use the Microphone 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 { MicrophoneChat24Regular, MicrophoneChat24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_microphone_chat_24_regular.svg" width="24" height="24" alt="Microphone 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="M21.7497 12.75C22.1638 12.7502 22.4997 13.0859 22.4997 13.5C22.4997 16.5595 20.2091 19.0818 17.2497 19.4512V21.25C17.2497 21.6641 16.9138 21.9998 16.4997 22C16.0856 21.9999 15.7497 21.6641 15.7497 21.25V19.4512C12.7903 19.0819 10.4997 16.5595 10.4997 13.5C10.4997 13.0859 10.8356 12.7501 11.2497 12.75C11.6638 12.7502 11.9997 13.0859 11.9997 13.5C11.9997 15.9852 14.0146 17.9999 16.4997 18C18.9848 17.9998 20.9997 15.9852 20.9997 13.5C20.9997 13.0859 21.3356 12.7501 21.7497 12.75ZM10.0007 2C12.0976 2.00016 14.0058 2.80775 15.4323 4.12793C14.8811 4.26211 14.3695 4.49814 13.9187 4.81445C12.8293 3.99004 11.4722 3.50014 10.0007 3.5C6.41113 3.5004 3.5007 6.41046 3.5007 10C3.5007 11.0906 3.77132 12.117 4.24582 13.0195C4.33124 13.1824 4.35381 13.3714 4.3093 13.5498L3.59445 16.4082L6.45382 15.6934L6.58859 15.6719C6.72452 15.6635 6.86197 15.6928 6.9841 15.7568C7.88554 16.2302 8.91116 16.4999 10.0007 16.5C10.058 16.5 10.1156 16.4966 10.1726 16.4951C10.4167 17.0097 10.7221 17.4895 11.0788 17.9258C10.7263 17.9733 10.3663 18 10.0007 18C8.76559 17.9999 7.59626 17.7145 6.55148 17.2139L3.55441 17.9648C2.63923 18.1933 1.81021 17.3644 2.03879 16.4492L2.78781 13.4512C2.28655 12.4059 2.00071 11.2363 2.00071 10C2.00071 5.58192 5.58285 2.00043 10.0007 2ZM16.4997 5C18.4326 5.00008 19.9997 6.56705 19.9997 8.5V13.5C19.9997 15.4329 18.4326 16.9999 16.4997 17C14.5668 16.9999 12.9997 15.4329 12.9997 13.5V8.5C12.9997 6.56709 14.5668 5.00014 16.4997 5ZM16.4997 6.5C15.3953 6.50014 14.4997 7.39552 14.4997 8.5V13.5C14.4997 14.6045 15.3953 15.4999 16.4997 15.5C17.6042 15.4999 18.4997 14.6045 18.4997 13.5V8.5C18.4997 7.39548 17.6042 6.50008 16.4997 6.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/microphone_chat_24_regular.svg";

Details