Mic Sparkle icon

Use the Mic Sparkle 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 { MicSparkle24Regular, MicSparkle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.75 11C6.1297 11 6.4435 11.2824 6.49316 11.6484L6.5 11.75V12.25C6.5 15.0769 8.73423 17.3824 11.5332 17.4961L11.75 17.5H12.25C15.0769 17.5 17.3824 15.2658 17.4961 12.4668L17.5 12.25V11.75C17.5 11.7022 17.5051 11.6556 17.5137 11.6104C17.6105 11.6804 17.7165 11.7386 17.8301 11.7793C18.2058 11.8982 18.8366 11.9602 18.9805 12.3994C18.9853 12.4147 18.9903 12.4299 18.9951 12.4453C18.8965 15.9155 16.1808 18.7298 12.751 18.9814L12.75 21.25C12.75 21.6642 12.4142 22 12 22C11.6203 22 11.3065 21.7176 11.2568 21.3516L11.25 21.25V18.9814C7.83323 18.7313 5.12268 15.938 5.00391 12.4863L5 12.25V11.75C5 11.3358 5.33579 11 5.75 11ZM12 2C12.623 2 13.2126 2.14245 13.7383 2.39648C13.6281 2.46217 13.5117 2.51765 13.3896 2.55859L12.0498 2.99902C11.7202 3.11667 11.4468 3.33378 11.2617 3.61035C10.2413 3.92524 9.5 4.87624 9.5 6V12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12V7.34277C14.5351 7.409 14.5659 7.47745 14.5898 7.54883L15 8.99902C15.1614 9.4715 15.5395 9.82904 16 9.97559V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6C8 3.79086 9.79086 2 12 2ZM20.4844 8C20.5469 8 20.6081 8.01957 20.6592 8.05566C20.7101 8.09167 20.7487 8.14242 20.7695 8.20117L21.0186 8.9668C21.0959 9.19921 21.2271 9.41079 21.4004 9.58398C21.5737 9.75703 21.7851 9.88761 22.0176 9.96484L22.7832 10.2129L22.7979 10.2168C22.8568 10.2376 22.9082 10.2762 22.9443 10.3271C22.9805 10.3782 23 10.4394 23 10.502C23 10.5645 22.9805 10.6257 22.9443 10.6768C22.9082 10.7276 22.8567 10.7664 22.7979 10.7871L22.0332 11.0352C21.8005 11.1124 21.5884 11.2428 21.415 11.416C21.2417 11.5892 21.1116 11.8008 21.0342 12.0332L20.7852 12.7988C20.7643 12.8575 20.7257 12.9083 20.6748 12.9443C20.6237 12.9804 20.5626 13 20.5 13C20.4374 13 20.3763 12.9804 20.3252 12.9443C20.2743 12.9083 20.2357 12.8575 20.2148 12.7988L19.9658 12.0332C19.889 11.8002 19.7592 11.5879 19.5859 11.4141C19.4125 11.2401 19.1999 11.1089 18.9668 11.0312L18.2021 10.7832C18.1432 10.7624 18.0918 10.7238 18.0557 10.6729C18.0195 10.6218 18 10.5606 18 10.498C18 10.4355 18.0195 10.3743 18.0557 10.3232C18.0918 10.2724 18.1433 10.2337 18.2021 10.2129L18.9668 9.96484C19.1966 9.88555 19.4056 9.75415 19.5762 9.58105C19.7468 9.40795 19.8753 9.19762 19.9512 8.9668L20.1992 8.20117C20.22 8.14249 20.2588 8.0917 20.3096 8.05566C20.3606 8.01962 20.4219 8.00006 20.4844 8ZM16.4727 0C16.5852 4.37205e-05 16.6952 0.0346543 16.7871 0.0996094C16.879 0.164603 16.9479 0.257194 16.9854 0.363281L17.4336 1.73926C17.5728 2.15781 17.808 2.5387 18.1201 2.85059C18.4322 3.16235 18.8127 3.39703 19.2314 3.53613L20.6094 3.9834L20.6367 3.99023C20.7429 4.02767 20.8353 4.0976 20.9004 4.18945C20.9653 4.28125 21 4.39149 21 4.50391C20.9999 4.61615 20.9652 4.72572 20.9004 4.81738C20.8353 4.90923 20.7429 4.97917 20.6367 5.0166L19.2588 5.46387C18.8401 5.603 18.4595 5.83765 18.1475 6.14941C17.8353 6.4613 17.6002 6.84219 17.4609 7.26074L17.0137 8.63672C17.0096 8.64816 17.0048 8.65981 17 8.6709C16.9605 8.7627 16.8965 8.84241 16.8145 8.90039C16.7225 8.96535 16.6126 9 16.5 9C16.3874 9 16.2775 8.96535 16.1855 8.90039C16.0936 8.83539 16.0238 8.74283 15.9863 8.63672L15.5391 7.26074C15.4379 6.95368 15.2848 6.66647 15.0879 6.41211C15.0157 6.3188 14.9373 6.22953 14.8535 6.14551C14.5415 5.83257 14.1606 5.59683 13.7412 5.45703L12.3633 5.00977C12.2571 4.97233 12.1647 4.9024 12.0996 4.81055C12.0347 4.71875 12 4.60851 12 4.49609C12.0001 4.38386 12.0348 4.27428 12.0996 4.18262C12.1647 4.09077 12.2571 4.02083 12.3633 3.9834L13.7412 3.53613C14.1548 3.39339 14.5299 3.15721 14.8369 2.8457C15.1356 2.54257 15.3623 2.17566 15.5 1.77344L15.5117 1.73926L15.959 0.363281C15.9964 0.257169 16.0663 0.164605 16.1582 0.0996094C16.2501 0.0347125 16.3601 0 16.4727 0Z" 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_sparkle_24_regular.svg";

Details

Keywords

microphoneaudiosoundsoundwavemeeting