Flash Auto icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.42407 2.83052C7.60147 2.33254 8.07295 2 8.60158 2H15.0552C15.9084 2 16.5109 2.83587 16.2411 3.64528L14.7895 8H18.7483C19.8524 8 20.4143 9.32683 19.646 10.1198L18.9754 10.8119C18.6709 10.3266 18.1772 10.0582 17.665 10.0088L18.1579 9.5H13.7489C13.5078 9.5 13.2815 9.38411 13.1405 9.18853C12.9995 8.99296 12.9612 8.74154 13.0374 8.51283L14.7084 3.5H8.77791L5.51596 12.6565C5.4581 12.8189 5.57811 12.9898 5.7505 12.9904L8.25179 13C8.47899 13.0009 8.69355 13.1047 8.83523 13.2823C8.97691 13.4599 9.03044 13.6922 8.9808 13.9139L7.50773 20.4923L15.366 12.3816L13.9293 16.0201L8.58502 21.536C7.53128 22.6236 5.71307 21.6422 6.04398 20.1645L7.31321 14.4964L5.74476 14.4904C4.53801 14.4858 3.69797 13.2899 4.10294 12.1532L7.42407 2.83052ZM18.1945 11.4745L21.9441 20.9704C22.0963 21.3557 21.9073 21.7913 21.522 21.9434C21.1688 22.0829 20.7733 21.9357 20.5927 21.6134L20.549 21.5213L19.551 18.996H15.441L14.4449 21.5213C14.3054 21.8745 13.9277 22.0627 13.569 21.9744L13.4718 21.9434C13.1187 21.804 12.9304 21.4263 13.0187 21.0676L13.0497 20.9704L16.7993 11.4745C16.8875 11.2512 17.0561 11.1067 17.2484 11.041C17.4254 10.9806 17.6226 10.9869 17.7954 11.0601C17.9354 11.1194 18.0594 11.2225 18.144 11.3695L18.1945 11.4745ZM16.033 17.496H18.959L17.496 13.791L16.033 17.496Z" 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_auto_24_regular.svg";

Details

Keywords

lightningflashboltpoweraithunder