Fluent Icons

Text Box Settings icon

The Text Box Settings 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
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_text_box_settings_24_regular.svg

Text Box Settings icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <TextBoxSettings24Regular aria-label="Text Box Settings" />;
}

Text Box Settings icon in SVG

npm install @fluentui/svg-icons

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

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

Text Box 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.TextBoxSettings())" />

Text Box Settings icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.text_box_settings_24_regular)

Text Box 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="&#xECD4;" FontSize="24" />

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

Text Box 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_text_box_settings_24_regular"></i>

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

Text Box 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_text_box_settings_24_regular" />

// Kotlin
R.drawable.ic_fluent_text_box_settings_24_regular

Text Box Settings icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .textBoxSettings24Regular)

Text Box 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 Text Box 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 { TextBoxSettings24Regular, TextBoxSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextBoxSettings24Regular aria-label="Text Box 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_text_box_settings_24_regular.svg" width="24" height="24" alt="Text Box 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="M18.25 3C19.7688 3 21 4.23122 21 5.75V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5H5.75C5.05964 4.5 4.5 5.05964 4.5 5.75V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75C3 4.23122 4.23122 3 5.75 3H18.25ZM14.25 11.5C14.4124 11.5 14.5627 11.5516 14.6855 11.6393C13.9801 11.9786 13.3455 12.4416 12.8096 13H6.75C6.33579 13 6 12.6642 6 12.25C6 11.8703 6.28215 11.5565 6.64823 11.5068L6.75 11.5H14.25ZM6.75 15.5H11.3135C11.159 15.9782 11.0585 16.4805 11.0189 17H6.75C6.33579 17 6 16.6642 6 16.25C6 15.8703 6.28215 15.5565 6.64823 15.5068L6.75 15.5ZM17.25 7.5H6.75L6.64823 7.50685C6.28215 7.55651 6 7.8703 6 8.25C6 8.66421 6.33579 9 6.75 9H17.25L17.3518 8.99315C17.7178 8.94349 18 8.6297 18 8.25C18 7.83579 17.6642 7.5 17.25 7.5ZM12.5002 15.6285L12.9474 16.0588C13.7651 16.8456 13.7651 18.1544 12.9474 18.9412L12.5002 19.3715C12.7007 19.945 12.9908 20.4742 13.353 20.9409L13.9549 20.7631C15.0524 20.4388 16.1976 21.0998 16.4659 22.2122L16.6385 22.9281C16.9189 22.9754 17.2067 23 17.5 23C17.7933 23 18.0811 22.9754 18.3614 22.9281L18.5341 22.2122C18.8024 21.0998 19.9476 20.4388 21.0451 20.7631L21.647 20.9409C22.0092 20.4742 22.2993 19.945 22.4998 19.3715L22.0526 18.9412C21.2349 18.1544 21.2349 16.8456 22.0526 16.0588L22.4998 15.6285C22.2993 15.055 22.0092 14.5258 21.647 14.0591L21.0451 14.2369C19.9476 14.5612 18.8024 13.9002 18.5341 12.7878L18.3614 12.0719C18.0811 12.0246 17.7933 12 17.5 12C17.2067 12 16.9189 12.0246 16.6385 12.0719L16.4659 12.7878C16.1976 13.9002 15.0524 14.5612 13.9549 14.2369L13.353 14.0591C12.9908 14.5258 12.7007 15.055 12.5002 15.6285ZM17.5 19C16.6994 19 16.0503 18.3284 16.0503 17.5C16.0503 16.6716 16.6994 16 17.5 16C18.3006 16 18.9497 16.6716 18.9497 17.5C18.9497 18.3284 18.3006 19 17.5 19Z" fill="currentColor"/></svg>

Details

NameText Box Settings
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_text_box_settings_24_regular.svg
Filled fileic_fluent_text_box_settings_24_filled.svg
React (Regular)TextBoxSettings20Regular, TextBoxSettings24Regular
React (Filled)TextBoxSettings20Filled, TextBoxSettings24Filled
LicenseMIT (© Microsoft Corporation)

Related icons

Text Bullet List Square SettingsText Grammar SettingsArchive SettingsText Grammar Arrow LeftText Grammar Arrow RightText Grammar CheckmarkText Grammar DismissText Grammar ErrorText Grammar LightningText Grammar WandTextBox SettingsApps Settings