Fluent Icons

Table Settings icon

Used to represent a data table. The Table Settings icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and light styles in 5 sizes from 16 to 32 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

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_settings_24_regular.svg

Table Settings icon in React

npm install @fluentui/react-icons

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

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

Table Settings icon in SVG

npm install @fluentui/svg-icons

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

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

Table Settings icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Table Settings icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.table_settings_24_regular)

Table Settings 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="&#xF777;" FontSize="24" />

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

Table Settings 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_settings_24_regular"></i>

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

Table Settings 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_settings_24_regular" />

// Kotlin
R.drawable.ic_fluent_table_settings_24_regular

Table Settings icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .tableSettings24Regular)

Table Settings 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 Settings 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 { TableSettings24Regular, TableSettings24Filled } from "@fluentui/react-icons";

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

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_settings_24_regular.svg" width="24" height="24" alt="Table Settings">

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.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V10H15.5V11.3135C14.9665 11.4858 14.4632 11.7253 14 12.0218L14 10H10L10 14H12.0218C11.7253 14.4632 11.4858 14.9665 11.3135 15.5H10V19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 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.5ZM14.2782 13.9754C14.593 15.0656 13.9386 16.1991 12.837 16.4716L12.2528 16.6161C12.2079 16.9038 12.1846 17.199 12.1846 17.4998C12.1846 17.8145 12.2101 18.123 12.2592 18.4232L12.7986 18.5532C13.9111 18.8211 14.5725 19.9661 14.2486 21.0636L14.0623 21.6949C14.5014 22.0805 15.0019 22.3937 15.5464 22.6165L16.0397 22.0977C16.8283 21.2685 18.1506 21.2687 18.9388 22.0982L19.4375 22.623C19.9811 22.4027 20.4811 22.0925 20.9204 21.7101L20.7223 21.0242C20.4076 19.9339 21.062 18.8005 22.1635 18.528L22.7472 18.3835C22.7922 18.0958 22.8155 17.8006 22.8155 17.4998C22.8155 17.1851 22.7899 16.8765 22.7409 16.5762L22.2019 16.4464C21.0894 16.1785 20.4281 15.0335 20.7519 13.9359L20.9381 13.3051C20.499 12.9193 19.9985 12.6061 19.4539 12.3833L18.9608 12.9018C18.1722 13.7311 16.85 13.7309 16.0617 12.9013L15.5629 12.3765C15.0193 12.5967 14.5194 12.9068 14.0801 13.2892L14.2782 13.9754ZM17.5 18.9998C16.6994 18.9998 16.0504 18.3282 16.0504 17.4998C16.0504 16.6714 16.6994 15.9998 17.5 15.9998C18.3007 15.9998 18.9497 16.6714 18.9497 17.4998C18.9497 18.3282 18.3007 18.9998 17.5 18.9998Z" fill="currentColor"/></svg>

Details

NameTable Settings
StylesRegular (outlined), Filled, Light
Sizes16 px, 20 px, 24 px, 28 px, 32 px
Regular (outlined) fileic_fluent_table_settings_24_regular.svg
Filled fileic_fluent_table_settings_24_filled.svg
React (Regular)TableSettings16Regular, TableSettings20Regular, TableSettings24Regular, TableSettings28Regular
React (Filled)TableSettings16Filled, TableSettings20Filled, TableSettings24Filled, TableSettings28Filled
React (Light)TableSettings32Light
LicenseMIT (© Microsoft Corporation)

Keywords

cellrowcolumninformationchartgear

Related icons

Table Offset SettingsTableTable AddTable Arrow UpTable Bottom RowTable CalculatorTable Cell AddTable Cell CrossTable Cell Cross BrushTable Cell EditTable Cells MergeTable Cells Split