Mic Link icon

Use the Mic Link 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 { MicLink24Regular, MicLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.25 11C17.6297 11 17.9435 11.2822 17.9932 11.6482L18 11.75V12.25C18 13.0389 17.8647 13.7962 17.6159 14.5H15.9948C16.2896 13.8794 16.4662 13.1919 16.4956 12.4664L16.5 12.25V11.75C16.5 11.3358 16.8358 11 17.25 11ZM11 19.25C11 20.1202 11.234 20.9357 11.6425 21.6371C11.5112 21.8546 11.2726 22 11 22C10.6203 22 10.3065 21.7178 10.2568 21.3518L10.25 21.25L10.25 18.9818C6.83323 18.7316 4.12284 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.5H11.25C11.2777 17.5 11.3054 17.4998 11.333 17.4994C11.1181 18.0411 11 18.6318 11 19.25ZM12.665 15.6381C12.9692 15.378 13.3067 15.1557 13.6701 14.9784C14.4865 14.246 15 13.183 15 12V6C15 3.79086 13.2091 2 11 2C8.79086 2 7 3.79086 7 6V12C7 14.2091 8.79086 16 11 16C11.5942 16 12.158 15.8705 12.665 15.6381ZM11 3.5C12.3807 3.5 13.5 4.61929 13.5 6V12C13.5 13.3807 12.3807 14.5 11 14.5C9.61929 14.5 8.5 13.3807 8.5 12V6C8.5 4.61929 9.61929 3.5 11 3.5ZM23 19.25C23 17.1789 21.3211 15.5 19.25 15.5L19.1482 15.5068C18.7822 15.5565 18.5 15.8703 18.5 16.25C18.5 16.6642 18.8358 17 19.25 17L19.404 17.0052C20.5748 17.0844 21.5 18.0591 21.5 19.25C21.5 20.4926 20.4926 21.5 19.25 21.5L19.2466 21.5046L19.1448 21.5119C18.779 21.5633 18.4983 21.8783 18.5 22.258C18.5019 22.6722 18.8392 23.0065 19.2534 23.0046V23L19.4523 22.9948C21.4276 22.8913 23 21.2543 23 19.25ZM16.5 16.25C16.5 15.8358 16.1642 15.5 15.75 15.5L15.5508 15.5052C13.5724 15.6087 12 17.2457 12 19.25C12 21.3211 13.6789 23 15.75 23L15.8518 22.9932C16.2178 22.9435 16.5 22.6297 16.5 22.25C16.5 21.8358 16.1642 21.5 15.75 21.5L15.596 21.4948C14.4252 21.4156 13.5 20.4409 13.5 19.25C13.5 18.0074 14.5074 17 15.75 17L15.8518 16.9932C16.2178 16.9435 16.5 16.6297 16.5 16.25ZM20 19.25C20 18.8358 19.6642 18.5 19.25 18.5H15.75L15.6482 18.5068C15.2822 18.5565 15 18.8703 15 19.25C15 19.6642 15.3358 20 15.75 20H19.25L19.3518 19.9932C19.7178 19.9435 20 19.6297 20 19.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/mic_link_24_regular.svg";

Details

Keywords

microphoneaudiosoundsoundwavemeetingurllink