Flash icon

Use the Flash 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 { Flash24Regular, Flash24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M7.42505 2.83052C7.60245 2.33254 8.07392 2 8.60256 2H15.0562C15.9094 2 16.5118 2.83587 16.242 3.64528L14.7905 8H18.7492C19.8534 8 20.4153 9.32683 19.647 10.1198L8.586 21.536C7.53226 22.6236 5.71405 21.6422 6.04495 20.1645L7.31418 14.4964L5.74573 14.4904C4.53898 14.4858 3.69895 13.2899 4.10392 12.1532L7.42505 2.83052ZM8.77889 3.5L5.51693 12.6565C5.45908 12.8189 5.57909 12.9898 5.75148 12.9904L8.25277 13C8.47997 13.0009 8.69453 13.1047 8.83621 13.2823C8.97789 13.4599 9.03142 13.6922 8.98177 13.9139L7.50871 20.4923L18.1589 9.5H13.7499C13.5088 9.5 13.2824 9.38411 13.1415 9.18853C13.0005 8.99296 12.9622 8.74154 13.0384 8.51283L14.7093 3.5H8.77889Z" 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/flash_24_regular.svg";

Details

Keywords

lightningflashboltpoweraithunder