Surface Earbuds icon

Use the Surface Earbuds 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 { SurfaceEarbuds24Regular, SurfaceEarbuds24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SurfaceEarbuds24Regular aria-label="Surface Earbuds" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_surface_earbuds_24_regular.svg" width="24" height="24" alt="Surface Earbuds">

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 10C20.3137 10 23 12.6863 23 16C23 19.3137 20.3137 22 17 22C16.4153 22 15.8502 21.9164 15.3159 21.7604C15.172 21.8309 15.0261 21.8917 14.8822 21.9413L14.6731 22.0058L12.059 22.8736C10.9154 23.2531 9.6657 22.843 8.96664 21.8784L8.86599 21.7296L8.4353 21.0461C7.80691 20.0488 7.88704 18.7696 8.61547 17.8609L8.74287 17.713L10.7138 15.5817C10.8184 15.4676 10.9288 15.3595 11.0448 15.2578C11.4108 12.2945 13.9374 10 17 10ZM11.1464 17.3234L9.84418 18.7314C9.49221 19.112 9.4147 19.6658 9.63646 20.1241L9.70438 20.2465L10.1351 20.93C10.4181 21.3791 10.9502 21.5965 11.4597 21.4848L11.5864 21.4499L13.4445 20.8336C12.3019 19.9917 11.4686 18.7543 11.1464 17.3234ZM17 11.5C15.1538 11.5 13.5673 12.6118 12.8734 14.2024L12.8093 14.3591L12.7247 14.5932L12.653 14.8332C12.6044 15.0141 12.5669 15.1996 12.5412 15.3888L12.5115 15.6753C12.5039 15.7825 12.5 15.8908 12.5 16L12.5049 16.2118C12.5852 17.944 13.6448 19.4205 15.1428 20.1001L15.1445 20.0989C15.3013 20.1706 15.4631 20.2334 15.6292 20.2867L15.721 20.314L15.8709 20.3568C15.9891 20.3875 16.1093 20.4134 16.2311 20.4345L16.4151 20.4623C16.5 20.4733 16.5856 20.482 16.672 20.4882C16.7549 20.4942 16.8385 20.4979 16.9227 20.4993L17 20.5C19.4853 20.5 21.5 18.4853 21.5 16C21.5 13.5147 19.4853 11.5 17 11.5ZM7.00003 1C7.75336 1 8.47426 1.13883 9.13855 1.39231L9.93573 1.13738C10.976 0.803732 12.1067 1.11908 12.8244 1.92147L12.9467 2.0681L13.0803 2.25573L13.6046 3.06122C14.2177 4.00301 14.192 5.21443 13.5454 6.14521L13.4248 6.30643L13.2895 6.45994L12.9956 6.76783L13.0001 7.00003C13.0001 10.3137 10.3137 13.0001 7.00003 13.0001C3.6863 13.0001 1 10.3137 1 7.00003C1 3.6863 3.6863 1 7.00003 1ZM5.72991 2.68152L5.57767 2.72941C3.78943 3.32471 2.5 5.01179 2.5 7.00003C2.5 9.48532 4.51473 11.5001 7.00003 11.5001C8.89384 11.5001 10.5144 10.3302 11.1785 8.67369C10.9239 8.94056 10.639 9.17504 10.3255 9.37048C8.40666 10.5668 5.86592 10.0239 4.6451 8.14847C3.45993 6.32781 3.95723 3.92677 5.72991 2.68152ZM10.5323 2.52987L10.3937 2.56577L7.44117 3.51106C7.18734 3.57933 6.9438 3.68488 6.71664 3.8265C5.49639 4.58728 5.13622 6.15343 5.90221 7.33014C6.67453 8.51657 8.3021 8.86436 9.53195 8.0976C9.68531 8.00198 9.82885 7.8914 9.96271 7.76642L10.0933 7.63667L12.1826 5.44812L12.2756 5.34299C12.584 4.95857 12.6353 4.43003 12.4145 3.99554L12.3475 3.87955L11.8407 3.09988L11.7572 2.98315L11.6774 2.89021C11.4159 2.61748 11.045 2.47925 10.6721 2.51025L10.5323 2.52987ZM10.9298 3.6836L10.9982 3.77117L11.2482 4.1446C11.4787 4.4888 11.3864 4.95463 11.0422 5.18506C10.7293 5.39455 10.3159 5.33737 10.0702 5.06665L10.0018 4.97907L9.75177 4.60565C9.52134 4.26145 9.61356 3.79562 9.95776 3.56518C10.2707 3.3557 10.6841 3.41287 10.9298 3.6836Z" 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/surface_earbuds_24_regular.svg";

Details

Keywords

devicephysicalproductaudioheadphonessound