Slide Microphone icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_microphone_24_regular.svg" width="24" height="24" alt="Slide Microphone">

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="M22.25 16C22.6642 16 23 16.3358 23 16.75C23 19.1181 21.2669 21.0808 19 21.4404V22.25C19 22.6642 18.6642 23 18.25 23C17.8358 23 17.5 22.6642 17.5 22.25V21.4404C15.2331 21.0808 13.5 19.1181 13.5 16.75C13.5 16.3358 13.8358 16 14.25 16C14.6642 16 15 16.3358 15 16.75C15 18.5449 16.4551 20 18.25 20C20.0449 20 21.5 18.5449 21.5 16.75C21.5 16.3358 21.8358 16 22.25 16ZM19.25 4C20.7688 4 22 5.23122 22 6.75V15.0195C21.8235 15.0452 21.6555 15.096 21.5 15.1699V14.25C21.5 13.3292 21.1153 12.4996 20.5 11.9082V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5H4.75C4.05964 5.5 3.5 6.05964 3.5 6.75V17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H12.7725C12.9445 19.0387 13.1923 19.5434 13.5059 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75C2 5.23122 3.23122 4 4.75 4H19.25ZM18.25 12C19.4926 12 20.5 13.0074 20.5 14.25V16.75C20.5 17.9926 19.4926 19 18.25 19C17.0074 19 16 17.9926 16 16.75V14.25C16 13.0074 17.0074 12 18.25 12ZM12.25 14C12.6642 14 13 14.3358 13 14.75C13 15.1642 12.6642 15.5 12.25 15.5H6.75C6.33579 15.5 6 15.1642 6 14.75C6 14.3358 6.33579 14 6.75 14H12.25ZM14.25 11C14.6642 11 15 11.3358 15 11.75C15 12.1642 14.6642 12.5 14.25 12.5H6.75C6.33579 12.5 6 12.1642 6 11.75C6 11.3358 6.33579 11 6.75 11H14.25ZM11.25 8C11.6642 8 12 8.33579 12 8.75C12 9.16421 11.6642 9.5 11.25 9.5H6.75C6.33579 9.5 6 9.16421 6 8.75C6 8.33579 6.33579 8 6.75 8H11.25Z" 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/slide_microphone_24_regular.svg";

Details

Keywords

slidelandscapedocumentpresentationaudiomeetingrecord