HDR Off icon

Use the HDR 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 { HdrOff24Regular, HdrOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hdr_off_24_regular.svg" width="24" height="24" alt="HDR 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L3.18232 4.243C2.46023 4.8391 2 5.74108 2 6.75055V17.2531C2 19.0481 3.45507 20.5031 5.25 20.5031H18.75C18.9659 20.5031 19.1768 20.4821 19.3809 20.4419L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM17.9422 19.0031H5.25C4.2835 19.0031 3.5 18.2196 3.5 17.2531V6.75055C3.5 6.15496 3.79753 5.62886 4.25208 5.31278L8.03508 9.09586C7.86543 9.20762 7.75346 9.39981 7.75346 9.61816L7.75285 11.3862H6.27185V9.63539L6.26508 9.54304C6.22044 9.24165 5.96065 9.01039 5.64685 9.01039C5.30168 9.01039 5.02185 9.29022 5.02185 9.63539V14.3873L5.02863 14.4796C5.07327 14.781 5.33306 15.0123 5.64685 15.0123C5.99203 15.0123 6.27185 14.7324 6.27185 14.3873V12.6362H7.75285L7.75346 14.37L7.76024 14.4624C7.80488 14.7638 8.06466 14.995 8.37846 14.995C8.72364 14.995 9.00346 14.7152 9.00346 14.37V10.0643L9.99959 11.0604V14.3727L10.0064 14.465C10.051 14.7664 10.3108 14.9977 10.6246 14.9977H11.3754L11.5414 14.9925C12.1842 14.9524 12.7644 14.6809 13.1995 14.2604L17.9422 19.0031ZM11.249 12.3098L12.3154 13.3762C12.0695 13.6066 11.7389 13.7477 11.3754 13.7477L11.249 13.747V12.3098ZM16.2587 13.0769L15.0062 11.8244L15.0036 9.64141C15.0033 9.32735 15.2346 9.06718 15.5362 9.02247L15.6286 9.01568H17.2012C18.1977 9.01568 19.0055 9.82352 19.0055 10.8201C19.0055 11.4379 18.695 11.9832 18.2215 12.3084L18.9602 14.1417C19.0893 14.4619 18.9343 14.826 18.6142 14.9551C18.4518 15.0205 18.278 15.0129 18.1294 14.9477L17.811 14.6293L17.8009 14.609L17.0006 12.6237L16.2585 12.624L16.2587 13.0769ZM16.2555 11.374L17.2012 11.3744C17.5073 11.3744 17.7555 11.1262 17.7555 10.8201C17.7555 10.5445 17.5545 10.3159 17.2911 10.2729L17.2012 10.2657L16.2545 10.265L16.2555 11.374ZM20.4988 17.3172C20.4996 17.2959 20.5 17.2746 20.5 17.2531V6.75055C20.5 5.78405 19.7165 5.00055 18.75 5.00055H8.18248L6.68251 3.50055H18.75C20.5449 3.50055 22 4.95562 22 6.75055V17.2531C22 17.7139 21.9041 18.1524 21.7312 18.5495L20.4988 17.3172Z" 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/hdr_off_24_regular.svg";

Details

Keywords

videovideogamestvsettinghighdynamicrange