Camera Off icon

Use the Camera 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 { CameraOff24Regular, CameraOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_camera_off_24_regular.svg" width="24" height="24" alt="Camera 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.28032L4.13545 5.19615C2.88949 5.651 2 6.84663 2 8.25V17.75C2 19.5449 3.45507 21 5.25 21H18.75C19.1079 21 19.4523 20.9422 19.7743 20.8353L20.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.21968ZM18.439 19.5H5.25C4.2835 19.5 3.5 18.7165 3.5 17.75V8.25C3.5 7.2835 4.2835 6.5 5.25 6.5H5.43928L8.54993 9.61072C7.89459 10.3924 7.5 11.4001 7.5 12.5C7.5 14.9853 9.51472 17 12 17C13.0998 17 14.1075 16.6054 14.8892 15.9501L18.439 19.5ZM9.61678 10.6776L13.8224 14.8833C13.3172 15.2701 12.6854 15.5 12 15.5C10.3431 15.5 9 14.1569 9 12.5C9 11.8145 9.22989 11.1828 9.61678 10.6776ZM11.2449 8.06307L12.7858 9.60397C13.8111 9.8815 14.6185 10.689 14.896 11.7143L16.4369 13.2552C16.4784 13.0096 16.5 12.7573 16.5 12.5C16.5 10.0147 14.4853 8 12 8C11.7427 8 11.4904 8.0216 11.2449 8.06307ZM20.5 8.25V17.3183L21.8642 18.6826C21.9526 18.3872 22 18.0741 22 17.75V8.25C22 6.45508 20.5449 5 18.75 5H16.6793L15.8647 3.61342C15.4607 2.92553 14.7225 2.50305 13.9247 2.50305H10.1224C9.34026 2.50305 8.61425 2.90921 8.205 3.5757L7.65437 4.47243L8.74493 5.56301L9.48325 4.3606L9.54793 4.27084C9.6892 4.10252 9.89892 4.00305 10.1224 4.00305H13.9247C14.1906 4.00305 14.4367 4.14388 14.5714 4.37317L15.6033 6.12988C15.738 6.35918 15.9841 6.5 16.25 6.5H18.75C19.7165 6.5 20.5 7.2835 20.5 8.25Z" 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/camera_off_24_regular.svg";

Details

Keywords

imagephotographypicture