Fluent Icons

Table Lightning icon

Used to represent a data table. The Table Lightning icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 4 sizes from 16 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_table_lightning_24_regular.svg

Table Lightning icon in React

npm install @fluentui/react-icons

import { TableLightning24Regular } from "@fluentui/react-icons";

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

Table Lightning icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/table_lightning_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/table_lightning_24_regular.svg" width="24" height="24" alt="Table Lightning">

Table Lightning icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.TableLightning())" />

Table Lightning icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.table_lightning_24_regular)

Table Lightning icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xEC2F;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xEC2F;" FontSize="24" />

Table Lightning icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_table_lightning_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\ec2f";
  font-size: 24px;
}

Table Lightning icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_table_lightning_24_regular" />

// Kotlin
R.drawable.ic_fluent_table_lightning_24_regular

Table Lightning icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .tableLightning24Regular)

Table Lightning icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameTable Lightning
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_table_lightning_24_regular.svg
Filled fileic_fluent_table_lightning_24_filled.svg
React (Regular)TableLightning16Regular, TableLightning20Regular, TableLightning24Regular, TableLightning28Regular
React (Filled)TableLightning16Filled, TableLightning20Filled, TableLightning24Filled, TableLightning28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

cellrowcolumninformationchartsmart

Related icons

TableTable AddTable Arrow UpTable Bottom RowTable CalculatorTable Cell AddTable Cell CrossTable Cell Cross BrushTable Cell EditTable Cells MergeTable Cells SplitTable Checker