HD Off icon

Use the HD 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 { HdOff24Regular, HdOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HdOff24Regular aria-label="HD Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hd_off_24_regular.svg" width="24" height="24" alt="HD 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.22651 2.2266C1.93361 2.51949 1.93361 2.99436 2.22651 3.28726L3.48325 4.544C3.17683 5.03988 3 5.62431 3 6.25004V17.75C3 19.545 4.45507 21 6.25 21H17.75C18.3757 21 18.9602 20.8232 19.456 20.5168L20.7244 21.7852C21.0173 22.0781 21.4922 22.0781 21.7851 21.7852C22.078 21.4923 22.078 21.0174 21.7851 20.7245L3.28717 2.2266C2.99427 1.9337 2.5194 1.9337 2.22651 2.2266ZM18.338 19.3988C18.1543 19.4643 17.9563 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25004C4.5 6.04374 4.53569 5.84578 4.60125 5.662L6.98678 8.04753C6.70241 8.15413 6.5 8.42845 6.5 8.75004V15.25C6.5 15.6643 6.83578 16 7.25 16C7.66421 16 8 15.6643 8 15.25V13H10V15.25C10 15.6643 10.3358 16 10.75 16C11.1642 16 11.5 15.6643 11.5 15.25V12.5607L13 14.0607V15.25C13 15.6643 13.3358 16 13.75 16H14.75C14.8118 16 14.8732 15.9983 14.9342 15.9949L18.338 19.3988ZM8 9.06075L10 11.0607V11.5H8V9.06075ZM18 12.75C18 13.3447 17.8403 13.9021 17.5614 14.3816L16.4281 13.2482C16.4749 13.0903 16.5 12.9231 16.5 12.75V11.25C16.5 10.2835 15.7165 9.50004 14.75 9.50004H14.5V11.3201L13 9.82013V8.75004C13 8.33583 13.3358 8.00004 13.75 8.00004H14.75C16.5449 8.00004 18 9.45512 18 11.25V12.75ZM19.5 6.25004V16.3201L20.9993 17.8194C20.9998 17.7963 21 17.7732 21 17.75V6.25004C21 4.45512 19.5449 3.00004 17.75 3.00004H6.25C6.22682 3.00004 6.2037 3.00028 6.18064 3.00077L7.67991 4.50004H17.75C18.7165 4.50004 19.5 5.28354 19.5 6.25004Z" 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/hd_off_24_regular.svg";

Details