Mic Sync icon

Use the Mic Sync 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 { MicSync24Regular, MicSync24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.5 12C20.5376 12 23 14.4624 23 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 12ZM4.75 11C5.1297 11 5.4435 11.2824 5.49316 11.6484L5.5 11.75V12.25C5.5 15.0769 7.73423 17.3824 10.5332 17.4961L10.75 17.5H11C11 18.5952 11.2716 19.6269 11.75 20.5322V21.25C11.75 21.6642 11.4142 22 11 22C10.6203 22 10.3065 21.7176 10.2568 21.3516L10.25 21.25V18.9814C6.83323 18.7313 4.12268 15.938 4.00391 12.4863L4 12.25V11.75C4 11.3358 4.33579 11 4.75 11ZM14.5 18C14.2239 18 14 18.2239 14 18.5V20.5C14 20.7761 14.2239 21 14.5 21C14.7761 21 15 20.7761 15 20.5V19.9492C15.6349 20.5971 16.5203 21 17.5 21C18.5731 21 19.5336 20.5162 20.1748 19.7568C20.3528 19.546 20.3268 19.231 20.1162 19.0527C19.9053 18.8747 19.5893 18.9006 19.4111 19.1113C18.9518 19.6553 18.2663 20 17.5 20C16.6827 20 15.9567 19.6079 15.5 19H16.5C16.7761 19 17 18.7761 17 18.5C17 18.2239 16.7761 18 16.5 18H14.5ZM20.5 14C20.2239 14 20 14.2239 20 14.5V15.0508C19.3651 14.4029 18.4797 14 17.5 14C16.3324 14 15.2981 14.5721 14.6631 15.4492C14.5012 15.6729 14.5517 15.9855 14.7754 16.1475C14.9991 16.3093 15.3117 16.2598 15.4736 16.0361C15.9287 15.4075 16.6666 15 17.5 15C18.3173 15 19.0433 15.3921 19.5 16H18.5C18.2239 16 18 16.2239 18 16.5C18 16.7761 18.2239 17 18.5 17H20.5C20.7761 17 21 16.7761 21 16.5V14.5C21 14.2239 20.7761 14 20.5 14ZM11 2C13.2091 2 15 3.79086 15 6V11.498C14.4444 11.7297 13.9287 12.0374 13.4639 12.4062C13.4855 12.2739 13.5 12.1385 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.2819 14.5 11.5519 14.4503 11.8047 14.3643C11.5255 14.8703 11.3136 15.4181 11.1768 15.9951C11.1181 15.9977 11.0592 16 11 16C8.79086 16 7 14.2091 7 12V6C7 3.79086 8.79086 2 11 2Z" 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_sync_24_regular.svg";

Details

Keywords

microphoneaudiosoundsoundwavemeeting