Image Off icon

Use the Image 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 { ImageOff24Regular, ImageOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_image_off_24_regular.svg" width="24" height="24" alt="Image 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.48326 4.54395C3.17684 5.03983 3 5.62426 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C18.3757 21 18.96 20.8232 19.4559 20.5169L20.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.21968ZM11.1189 12.1797C10.8678 12.2864 10.6322 12.4409 10.4258 12.643L4.60326 18.3437C4.53643 18.1583 4.5 17.9584 4.5 17.75V6.25C4.5 6.0437 4.5357 5.84574 4.60125 5.66196L11.1189 12.1797ZM19.5 6.25V16.3183L20.9993 17.8176C20.9998 17.7951 21 17.7726 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25C6.2275 3 6.20505 3.00023 6.18265 3.00068L7.68194 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25ZM18.3305 19.4014C18.1489 19.4653 17.9535 19.5 17.75 19.5H6.25C6.04613 19.5 5.8504 19.4651 5.66845 19.4011L11.4752 13.7148L11.5588 13.644C11.8501 13.4316 12.2596 13.4553 12.5247 13.7148L18.3305 19.4014ZM15.2521 6.5C16.4959 6.5 17.5042 7.50831 17.5042 8.75212C17.5042 9.99592 16.4959 11.0042 15.2521 11.0042C14.0083 11.0042 13 9.99592 13 8.75212C13 7.50831 14.0083 6.5 15.2521 6.5ZM15.2521 8C14.8367 8 14.5 8.33673 14.5 8.75212C14.5 9.1675 14.8367 9.50423 15.2521 9.50423C15.6675 9.50423 16.0042 9.1675 16.0042 8.75212C16.0042 8.33673 15.6675 8 15.2521 8Z" 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/image_off_24_regular.svg";

Details

Keywords

photopicturesnapshotcontent