Mic Record icon

Use the Mic Record 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 { MicRecord24Regular, MicRecord24Filled } from "@fluentui/react-icons";

export function Example() {
  return <MicRecord24Regular aria-label="Mic Record" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_mic_record_24_regular.svg" width="24" height="24" alt="Mic Record">

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="M11 17.5C11 18.596 11.2713 19.6287 11.7503 20.5345L11.75 21.25C11.75 21.6642 11.4142 22 11 22C10.6203 22 10.3065 21.7178 10.2568 21.3518L10.25 21.25L10.25 18.9818C6.83323 18.7316 4.12283 15.938 4.00406 12.4863L4 12.25V11.75C4 11.3358 4.33579 11 4.75 11C5.1297 11 5.44349 11.2822 5.49315 11.6482L5.5 11.75V12.25C5.5 15.077 7.73445 17.3821 10.5336 17.4956L10.75 17.5H11ZM15 6V11.4982C14.4464 11.729 13.9315 12.0343 13.4679 12.4014C13.489 12.2707 13.5 12.1366 13.5 12V6C13.5 4.61929 12.3807 3.5 11 3.5C9.61929 3.5 8.5 4.61929 8.5 6V12C8.5 13.3807 9.61929 14.5 11 14.5C11.2808 14.5 11.5508 14.4537 11.8028 14.3683C11.5244 14.8737 11.3113 15.4202 11.1748 15.9962C11.1169 15.9987 11.0586 16 11 16C8.79086 16 7 14.2091 7 12V6C7 3.79086 8.79086 2 11 2C13.2091 2 15 3.79086 15 6ZM20 17.5C20 18.8807 18.8807 20 17.5 20C16.1193 20 15 18.8807 15 17.5C15 16.1193 16.1193 15 17.5 15C18.8807 15 20 16.1193 20 17.5ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM13.5 17.5C13.5 19.7091 15.2909 21.5 17.5 21.5C19.7091 21.5 21.5 19.7091 21.5 17.5C21.5 15.2909 19.7091 13.5 17.5 13.5C15.2909 13.5 13.5 15.2909 13.5 17.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/mic_record_24_regular.svg";

Details

Keywords

microphoneaudiosoundsoundwavemeeting