Text Column Three icon

Used in general type column creation scenarios. The Text Column Three icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 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_text_column_three_24_regular.svg

Text Column Three icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <TextColumnThree24Regular aria-label="Text Column Three" />;
}

Text Column Three icon in SVG

npm install @fluentui/svg-icons

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

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

Text Column Three icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Text Column Three icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.text_column_three_24_regular)

Text Column Three 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="&#xF7C4;" FontSize="24" />

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

Text Column Three 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_text_column_three_24_regular"></i>

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

Text Column Three icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_text_column_three_24_regular

Text Column Three icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .textColumnThree24Regular)

Text Column Three 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 Text Column Three 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 { TextColumnThree24Regular, TextColumnThree24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextColumnThree24Regular aria-label="Text Column Three" />;
}

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_text_column_three_24_regular.svg" width="24" height="24" alt="Text Column Three">

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.75C3 5.33579 3.33579 5 3.75 5H7.25C7.66421 5 8 5.33579 8 5.75C8 6.16421 7.66421 6.5 7.25 6.5H3.75C3.33579 6.5 3 6.16421 3 5.75ZM9.5 5.75C9.5 5.33579 9.83579 5 10.25 5H13.75C14.1642 5 14.5 5.33579 14.5 5.75C14.5 6.16421 14.1642 6.5 13.75 6.5H10.25C9.83579 6.5 9.5 6.16421 9.5 5.75ZM16 5.75C16 5.33579 16.3358 5 16.75 5H20.25C20.6642 5 21 5.33579 21 5.75C21 6.16421 20.6642 6.5 20.25 6.5H16.75C16.3358 6.5 16 6.16421 16 5.75ZM3 9.75C3 9.33579 3.33579 9 3.75 9H7.25C7.66421 9 8 9.33579 8 9.75C8 10.1642 7.66421 10.5 7.25 10.5H3.75C3.33579 10.5 3 10.1642 3 9.75ZM9.5 9.75C9.5 9.33579 9.83579 9 10.25 9H13.75C14.1642 9 14.5 9.33579 14.5 9.75C14.5 10.1642 14.1642 10.5 13.75 10.5H10.25C9.83579 10.5 9.5 10.1642 9.5 9.75ZM16 9.75C16 9.33579 16.3358 9 16.75 9H20.25C20.6642 9 21 9.33579 21 9.75C21 10.1642 20.6642 10.5 20.25 10.5H16.75C16.3358 10.5 16 10.1642 16 9.75ZM3 13.75C3 13.3358 3.33579 13 3.75 13H7.25C7.66421 13 8 13.3358 8 13.75C8 14.1642 7.66421 14.5 7.25 14.5H3.75C3.33579 14.5 3 14.1642 3 13.75ZM9.5 13.75C9.5 13.3358 9.83579 13 10.25 13H13.75C14.1642 13 14.5 13.3358 14.5 13.75C14.5 14.1642 14.1642 14.5 13.75 14.5H10.25C9.83579 14.5 9.5 14.1642 9.5 13.75ZM16 13.75C16 13.3358 16.3358 13 16.75 13H20.25C20.6642 13 21 13.3358 21 13.75C21 14.1642 20.6642 14.5 20.25 14.5H16.75C16.3358 14.5 16 14.1642 16 13.75ZM3 17.75C3 17.3358 3.33579 17 3.75 17H7.25C7.66421 17 8 17.3358 8 17.75C8 18.1642 7.66421 18.5 7.25 18.5H3.75C3.33579 18.5 3 18.1642 3 17.75ZM9.5 17.75C9.5 17.3358 9.83579 17 10.25 17H13.75C14.1642 17 14.5 17.3358 14.5 17.75C14.5 18.1642 14.1642 18.5 13.75 18.5H10.25C9.83579 18.5 9.5 18.1642 9.5 17.75ZM16 17.75C16 17.3358 16.3358 17 16.75 17H20.25C20.6642 17 21 17.3358 21 17.75C21 18.1642 20.6642 18.5 20.25 18.5H16.75C16.3358 18.5 16 18.1642 16 17.75Z" fill="currentColor"/></svg>

Details

NameText Column Three
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_text_column_three_24_regular.svg
Filled fileic_fluent_text_column_three_24_filled.svg
React (Regular)TextColumnThree20Regular, TextColumnThree24Regular
React (Filled)TextColumnThree20Filled, TextColumnThree24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

typetexttypographyeditcreatelayoutalignment

Related icons