Flashlight Off icon
Used in physical scenarios, where a light is turned on. The Flashlight Off icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Flashlight 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 { FlashlightOff24Regular, FlashlightOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <FlashlightOff24Regular aria-label="Flashlight Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_flashlight_off_24_regular.svg" width="24" height="24" alt="Flashlight 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="M9.53033 14.4697C9.82322 14.7626 9.82322 15.2374 9.53033 15.5303L8.03033 17.0303C7.73744 17.3232 7.26256 17.3232 6.96967 17.0303C6.67678 16.7374 6.67678 16.2626 6.96967 15.9697L8.46967 14.4697C8.76256 14.1768 9.23744 14.1768 9.53033 14.4697ZM3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L8.24977 9.31055V10.6893L3.0301 15.909C2.15142 16.7877 2.15142 18.2123 3.0301 19.091L4.90878 20.9697C5.78746 21.8483 7.21208 21.8483 8.09076 20.9697L13.3104 15.75H14.6891L20.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.21968ZM8.99977 12.0606L11.9391 15L7.0301 19.909C6.73721 20.2019 6.26234 20.2019 5.96944 19.909L4.09076 18.0303C3.79787 17.7374 3.79787 17.2626 4.09076 16.9697L8.99977 12.0606ZM17.8443 14.0948L19.4088 12.5303C19.7017 12.2374 19.7017 11.7626 19.4088 11.4697L12.5301 4.59098C12.2372 4.29808 11.7623 4.29808 11.4694 4.59098L9.90504 6.15538L8.84439 5.09471L10.4088 3.53032C11.2875 2.65164 12.7121 2.65164 13.5908 3.53032L20.4694 10.409C21.3481 11.2877 21.3481 12.7123 20.4694 13.591L18.9049 15.1555L17.8443 14.0948Z" 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/flashlight_off_24_regular.svg";Details
| Name | Flashlight Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_flashlight_off_24_regular.svg |
| Filled file | ic_fluent_flashlight_off_24_filled.svg |
| React components | FlashlightOff24Regular, FlashlightOff24Filled |
| License | MIT (© Microsoft Corporation) |