Folder Lightning icon
Used to represent collections of files. The Folder Lightning 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 Folder Lightning 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 { FolderLightning24Regular, FolderLightning24Filled } from "@fluentui/react-icons";
export function Example() {
return <FolderLightning24Regular aria-label="Folder Lightning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_folder_lightning_24_regular.svg" width="24" height="24" alt="Folder Lightning"> 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.5 6.25V8H8.12868C8.32759 8 8.51836 7.92098 8.65901 7.78033L10.1893 6.25L8.65901 4.71967C8.51836 4.57902 8.32759 4.5 8.12868 4.5H5.25C4.2835 4.5 3.5 5.2835 3.5 6.25ZM2 6.25C2 4.45507 3.45507 3 5.25 3H8.12868C8.72542 3 9.29771 3.23705 9.71967 3.65901L11.5607 5.5H18.75C20.5449 5.5 22 6.95507 22 8.75V11H20.5V8.75C20.5 7.7835 19.7165 7 18.75 7H11.5607L9.71967 8.84099C9.29771 9.26295 8.72542 9.5 8.12868 9.5H3.5V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H13.3789C13.6479 19.8024 14.0404 20 14.4974 20H16.2202L15.971 21H5.25C3.45507 21 2 19.5449 2 17.75V6.25ZM17.3177 12H22.1453C22.5277 12 22.7685 12.4118 22.5811 12.7451L20.7502 16H22.2463C22.8909 16 23.2352 16.7593 22.8105 17.2441L17.9867 22.7519C17.4821 23.328 16.544 22.8375 16.7292 22.0945L17.5002 19H14.4977C14.1313 19 13.8893 18.6189 14.0452 18.2873L16.8652 12.2873C16.9476 12.112 17.1239 12 17.3177 12Z" 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/folder_lightning_24_regular.svg";Details
| Name | Folder Lightning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_folder_lightning_24_regular.svg |
| Filled file | ic_fluent_folder_lightning_24_filled.svg |
| React components | FolderLightning24Regular, FolderLightning24Filled |
| License | MIT (© Microsoft Corporation) |