Book Open Microphone icon

Use the Book Open 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 { BookOpenMicrophone24Regular, BookOpenMicrophone24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BookOpenMicrophone24Regular aria-label="Book Open Microphone" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_book_open_microphone_24_regular.svg" width="24" height="24" alt="Book Open 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 16ZM10 4C10.788 4 11.4986 4.33129 12 4.8623C12.5014 4.33129 13.212 4 14 4H20.25C21.2165 4 22 4.7835 22 5.75V15.0195C21.8235 15.0452 21.6555 15.096 21.5 15.1699V14.25C21.5 13.3292 21.1153 12.4996 20.5 11.9082V5.75C20.5 5.61193 20.3881 5.5 20.25 5.5H14C13.3096 5.5 12.75 6.05964 12.75 6.75V15.8516C12.5922 16.1144 12.5 16.4211 12.5 16.75C12.5 17.9332 12.8579 19.0324 13.4707 19.9463C12.8968 19.8343 12.3861 19.5466 12 19.1377C11.4986 19.6687 10.788 20 10 20H3.75C2.7835 20 2 19.2165 2 18.25V5.75C2 4.7835 2.7835 4 3.75 4H10ZM18.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 12ZM3.75 5.5C3.61193 5.5 3.5 5.61193 3.5 5.75V18.25C3.5 18.3881 3.61193 18.5 3.75 18.5H10C10.6904 18.5 11.25 17.9404 11.25 17.25V6.75C11.25 6.05964 10.6904 5.5 10 5.5H3.75Z" 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/book_open_microphone_24_regular.svg";

Details

Keywords

readknowledgerecord