Headset VR icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M13 9C13 9.55228 12.5523 10 12 10C11.4477 10 11 9.55228 11 9C11 8.44771 11.4477 8 12 8C12.5523 8 13 8.44771 13 9ZM6.75 11.5C6.33579 11.5 6 11.8358 6 12.25C6 12.6642 6.33579 13 6.75 13H9.25C9.66421 13 10 12.6642 10 12.25C10 11.8358 9.66421 11.5 9.25 11.5H6.75ZM14 12.25C14 11.8358 14.3358 11.5 14.75 11.5H17.25C17.6642 11.5 18 11.8358 18 12.25C18 12.6642 17.6642 13 17.25 13H14.75C14.3358 13 14 12.6642 14 12.25ZM9.75 3C9.33579 3 9 3.33579 9 3.75V5H6C3.79086 5 2 6.79086 2 9H1.75C1.33579 9 1 9.33579 1 9.75V13.25C1 13.6642 1.33579 14 1.75 14H2V16.5C2 18.7091 3.79086 20.5 6 20.5H7.54547C8.31248 20.5 9.06331 20.2795 9.7085 19.8647L11.8648 18.4785C11.9472 18.4256 12.0528 18.4256 12.1352 18.4785L14.2915 19.8647C14.9367 20.2795 15.6875 20.5 16.4545 20.5H18C20.2091 20.5 22 18.7091 22 16.5V14H22.25C22.6642 14 23 13.6642 23 13.25V9.75C23 9.33579 22.6642 9 22.25 9H22C22 6.79086 20.2091 5 18 5H15V3.75C15 3.33579 14.6642 3 14.25 3H9.75ZM6 6.5H18C19.3807 6.5 20.5 7.61929 20.5 9V16.5C20.5 17.8807 19.3807 19 18 19H16.4545C15.9752 19 15.5059 18.8622 15.1026 18.6029L12.9463 17.2167C12.3699 16.8462 11.6301 16.8462 11.0537 17.2167L8.89736 18.6029C8.49412 18.8622 8.02485 19 7.54547 19H6C4.61929 19 3.5 17.8807 3.5 16.5V9C3.5 7.61929 4.61929 6.5 6 6.5Z" 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_24_regular.svg";

Details

Keywords

virtualrealitymeta3ddevicephysical