HDR icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hdr_24_regular.svg" width="24" height="24" alt="HDR">

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="M18.75 3.5C20.5449 3.5 22 4.95507 22 6.75V17.2526C22 19.0475 20.5449 20.5026 18.75 20.5026H5.25C3.45507 20.5026 2 19.0475 2 17.2526V6.75C2 4.95507 3.45507 3.5 5.25 3.5H18.75ZM18.75 5H5.25C4.2835 5 3.5 5.7835 3.5 6.75V17.2526C3.5 18.2191 4.2835 19.0026 5.25 19.0026H18.75C19.7165 19.0026 20.5 18.2191 20.5 17.2526V6.75C20.5 5.7835 19.7165 5 18.75 5ZM8.37846 8.99261C8.69226 8.99261 8.95204 9.22387 8.99669 9.52525L9.00346 9.61761V14.3695C9.00346 14.7147 8.72364 14.9945 8.37846 14.9945C8.06466 14.9945 7.80488 14.7632 7.76024 14.4618L7.75346 14.3695L7.75285 12.6356H6.27185V14.3867C6.27185 14.7319 5.99203 15.0117 5.64685 15.0117C5.33306 15.0117 5.07327 14.7805 5.02863 14.4791L5.02185 14.3867V9.63484C5.02185 9.28967 5.30168 9.00984 5.64685 9.00984C5.96065 9.00984 6.22044 9.2411 6.26508 9.54249L6.27185 9.63484V11.3856H7.75285L7.75346 9.61761C7.75346 9.27243 8.03328 8.99261 8.37846 8.99261ZM17.2012 9.01513C18.1977 9.01513 19.0055 9.82298 19.0055 10.8195C19.0055 11.4374 18.695 11.9827 18.2215 12.3079L18.9602 14.1412C19.0893 14.4614 18.9343 14.8255 18.6142 14.9545C18.326 15.0706 18.0023 14.9567 17.8463 14.6994L17.8009 14.6084L17.0006 12.6231L16.2585 12.6235L16.2592 14.3748C16.2592 15.1301 15.2321 15.201 15.0399 14.5867L15.0168 14.484L15.0092 14.3755L15.0036 9.64086C15.0033 9.3268 15.2346 9.06663 15.5362 9.02192L15.6286 9.01513H17.2012ZM11.3754 9.00547C12.7694 9.00547 13.9096 10.0921 13.9952 11.4645L14.0004 11.6305V12.3721C14.0004 13.7661 12.9138 14.9063 11.5414 14.9919L11.3754 14.9971H10.6246C10.3108 14.9971 10.051 14.7659 10.0064 14.4645L9.99959 14.3721V9.63047C9.99959 9.31667 10.2309 9.05688 10.5322 9.01224L10.6246 9.00547H11.3754ZM11.3754 10.2555H11.249V13.7465L11.3754 13.7471C12.0901 13.7471 12.6775 13.2018 12.7441 12.5045L12.7504 12.3721V11.6305C12.7504 10.9157 12.2051 10.3284 11.5078 10.2618L11.3754 10.2555ZM16.2545 10.2645L16.2555 11.3735L17.2012 11.3739C17.5073 11.3739 17.7555 11.1257 17.7555 10.8195C17.7555 10.5439 17.5545 10.3153 17.2911 10.2724L17.2012 10.2651L16.2545 10.2645Z" 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_24_regular.svg";

Details

Keywords

videovideogamestvsettinghighdynamicrange