Headset VR Off icon

Use the Headset VR Off 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 { HeadsetVrOff24Regular, HeadsetVrOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HeadsetVrOff24Regular aria-label="Headset VR Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_headset_vr_off_24_regular.svg" width="24" height="24" alt="Headset VR Off">

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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L19.2402 20.3008C18.8497 20.4288 18.4334 20.5 18 20.5H16.4541C15.6873 20.4999 14.9361 20.2789 14.291 19.8643L12.1348 18.4785C12.0526 18.4258 11.9474 18.4258 11.8652 18.4785L9.70898 19.8643C9.06392 20.2789 8.31275 20.4999 7.5459 20.5H6C3.79088 20.5 2.00003 18.7091 2 16.5V14H1.75C1.33581 14 1.00003 13.6642 1 13.25V9.75001C1 9.33579 1.33579 9.00001 1.75 9.00001H2C2 7.39359 2.94829 6.01125 4.31445 5.375L2.21973 3.28028C1.92685 2.98739 1.92687 2.51262 2.21973 2.21973ZM5.49121 6.55176C4.35447 6.78678 3.5 7.79363 3.5 9.00001V16.5C3.50003 17.8807 4.61931 19 6 19H7.5459C8.02512 18.9999 8.49434 18.8617 8.89746 18.6026L11.0537 17.2168C11.6302 16.8462 12.3698 16.8462 12.9463 17.2168L15.1025 18.6026C15.5057 18.8617 15.9749 18.9999 16.4541 19H17.9395L5.49121 6.55176ZM14.25 3C14.6642 3 15 3.33579 15 3.75V5H18C20.2091 5 22 6.79087 22 9.00001H22.25C22.6642 9.00001 23 9.33579 23 9.75001V13.25C23 13.6642 22.6642 14 22.25 14H22V16.5C22 17.1715 21.8334 17.8038 21.541 18.3594L20.3945 17.2129C20.4617 16.9868 20.5 16.7479 20.5 16.5V9.00001C20.5 7.61929 19.3807 6.50001 18 6.50001H9.68164L8.18164 5H9V3.75C9 3.33579 9.33579 3 9.75 3H14.25ZM9.25 11.5C9.66421 11.5 10 11.8358 10 12.25C9.99997 12.6642 9.66419 13 9.25 13H6.75C6.33581 13 6.00003 12.6642 6 12.25C6 11.8358 6.33579 11.5 6.75 11.5H9.25ZM17.25 11.5C17.6642 11.5 18 11.8358 18 12.25C18 12.6642 17.6642 13 17.25 13H16.1816L14.6846 11.5029C14.7061 11.5011 14.728 11.5 14.75 11.5H17.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/headset_vr_off_24_regular.svg";

Details