Mic Pulse icon

Use the Mic Pulse 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 { MicPulse24Regular, MicPulse24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.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.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 6ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM16.0147 14.5002C16.2244 14.5064 16.408 14.6428 16.4743 14.8419L17.5277 18.0021L18.5318 15.3244C18.6017 15.1382 18.7752 15.0111 18.9738 15.0007C19.1724 14.9903 19.3583 15.0985 19.4472 15.2764L20.309 17H21C21.2761 17 21.5 17.2239 21.5 17.5C21.5 17.7761 21.2761 18 21 18H20C19.8106 18 19.6375 17.893 19.5528 17.7236L19.0656 16.7492L17.9682 19.6756C17.8938 19.8739 17.7025 20.0038 17.4907 19.9999C17.279 19.996 17.0926 19.8591 17.0257 19.6581L15.9573 16.453L15.4642 17.6857C15.3883 17.8755 15.2045 18 15 18H14C13.7239 18 13.5 17.7761 13.5 17.5C13.5 17.2239 13.7239 17 14 17H14.6615L15.5358 14.8143C15.6137 14.6195 15.805 14.4941 16.0147 14.5002Z" 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_pulse_24_regular.svg";

Details

Keywords

pulseaudiosoundmicrophoneprocessai