Table Lightning icon

Use the Table 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 { TableLightning24Regular, TableLightning24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TableLightning24Regular aria-label="Table Lightning" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_table_lightning_24_regular.svg" width="24" height="24" alt="Table 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 6.25C3 4.45507 4.45507 3 6.25 3H17.75C19.5449 3 21 4.45507 21 6.25V11H19.5V10H15.5V11.2426C15.2704 11.3919 15.0816 11.6041 14.9604 11.862L14 13.9053L14 10H10L10 14H13.9555L13.2505 15.5H10V19.5H12.3794C12.6484 19.8024 13.0409 20 13.4979 20H15.2207L14.9715 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25ZM6.25 4.5C5.2835 4.5 4.5 5.2835 4.5 6.25V8.5H8.5V4.5H6.25ZM4.5 10V14H8.5L8.5 10H4.5ZM15.5 8.5H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H15.5V8.5ZM14 4.5H10V8.5H14V4.5ZM4.5 15.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H8.5V15.5H4.5ZM16.3167 12H21.1443C21.5267 12 21.7676 12.4118 21.5801 12.7451L19.7492 16H21.2454C21.8899 16 22.2342 16.7593 21.8096 17.2441L16.9857 22.7519C16.4811 23.328 15.543 22.8375 15.7282 22.0945L16.4992 19H13.4967C13.1303 19 12.8883 18.6189 13.0442 18.2873L15.8642 12.2873C15.9466 12.112 16.1229 12 16.3167 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/table_lightning_24_regular.svg";

Details

Keywords

cellrowcolumninformationchartelectricsmart