Flashlight icon

Use the Flashlight 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 { Flashlight24Regular, Flashlight24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.4998 2C17.4998 1.58579 17.164 1.25 16.7498 1.25C16.3356 1.25 15.9998 1.58579 15.9998 2V3C15.9998 3.41421 16.3356 3.75 16.7498 3.75C17.164 3.75 17.4998 3.41421 17.4998 3V2ZM21.5301 2.46967C21.2372 2.17678 20.7623 2.17678 20.4694 2.46967L18.4694 4.46967C18.1765 4.76256 18.1765 5.23744 18.4694 5.53033C18.7623 5.82322 19.2372 5.82322 19.5301 5.53033L21.5301 3.53033C21.823 3.23744 21.823 2.76256 21.5301 2.46967ZM8.0301 17.0303L9.5301 15.5303C9.823 15.2374 9.823 14.7626 9.5301 14.4697C9.23721 14.1768 8.76234 14.1768 8.46944 14.4697L6.96944 15.9697C6.67655 16.2626 6.67655 16.7374 6.96944 17.0303C7.26234 17.3232 7.73721 17.3232 8.0301 17.0303ZM8.24977 6V10.6893L3.0301 15.909C2.15142 16.7877 2.15142 18.2123 3.0301 19.091L4.90878 20.9697C5.78746 21.8484 7.21208 21.8483 8.09076 20.9697L13.3104 15.75H17.9998C18.1987 15.75 18.3895 15.671 18.5301 15.5303L20.4694 13.591C21.3481 12.7123 21.3481 11.2877 20.4694 10.409L13.5908 3.53033C12.7121 2.65165 11.2875 2.65165 10.4088 3.53033L8.46944 5.46967C8.32879 5.61032 8.24977 5.80109 8.24977 6ZM11.4694 4.59099C11.7623 4.2981 12.2372 4.2981 12.5301 4.59099L19.4088 11.4697C19.7017 11.7626 19.7017 12.2374 19.4088 12.5303L17.9998 13.9393L10.0604 6L11.4694 4.59099ZM9.74977 7.81066L16.1891 14.25H13.3104L9.74977 10.6893V7.81066ZM8.99977 12.0607L11.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.0607ZM20.9998 8H21.9998C22.414 8 22.7498 7.66421 22.7498 7.25C22.7498 6.83579 22.414 6.5 21.9998 6.5H20.9998C20.5856 6.5 20.2498 6.83579 20.2498 7.25C20.2498 7.66421 20.5856 8 20.9998 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/flashlight_24_regular.svg";

Details

Keywords

lightshinebrightfocusanalog