Fluent Icons

Text Header 1 icon

Used in general type creation and editing scenarios. Global readiness notes universal enough to not need locale specific variants. The Text Header 1 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_header_1_24_regular.svg

Text Header 1 icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <TextHeader124Regular aria-label="Text Header 1" />;
}

Text Header 1 icon in SVG

npm install @fluentui/svg-icons

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

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

Text Header 1 icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Text Header 1 icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.text_header_1_24_regular)

Text Header 1 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="&#xED1F;" FontSize="24" />

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

Text Header 1 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_header_1_24_regular"></i>

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

Text Header 1 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_header_1_24_regular" />

// Kotlin
R.drawable.ic_fluent_text_header_1_24_regular

Text Header 1 icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .textHeader124Regular)

Text Header 1 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 Header 1 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 { TextHeader124Regular, TextHeader124Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextHeader124Regular aria-label="Text Header 1" />;
}

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_header_1_24_regular.svg" width="24" height="24" alt="Text Header 1">

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="M19.5901 5.08156C19.5256 5.04873 19.4558 5.02494 19.3823 5.01185C19.2923 4.99562 19.2022 4.99637 19.1157 5.0122C18.9906 5.03482 18.8763 5.08848 18.781 5.16493C18.6645 5.2584 18.5765 5.38592 18.5321 5.5324C17.8427 7.58332 16.4747 8.94079 15.3642 9.60708C15.0091 9.8202 14.8939 10.2809 15.107 10.6361C15.3201 10.9913 15.7808 11.1064 16.136 10.8933C16.9101 10.4288 17.7594 9.71339 18.5 8.74737V18.2502C18.5 18.6644 18.8358 19.0002 19.25 19.0002C19.6642 19.0002 20 18.6644 20 18.2502V5.77181C20.0042 5.62763 19.9664 5.48714 19.8944 5.36629C19.8235 5.24719 19.7195 5.14718 19.5901 5.08156ZM3.5 5.75021C3.5 5.336 3.16421 5.00021 2.75 5.00021C2.33579 5.00021 2 5.336 2 5.75021V18.2502C2 18.6644 2.33579 19.0002 2.75 19.0002C3.16421 19.0002 3.5 18.6644 3.5 18.2502V12.5002H10V18.2502C10 18.6644 10.3358 19.0002 10.75 19.0002C11.1642 19.0002 11.5 18.6644 11.5 18.2502V5.75021C11.5 5.336 11.1642 5.00021 10.75 5.00021C10.3358 5.00021 10 5.336 10 5.75021V11.0002H3.5V5.75021Z" fill="currentColor"/></svg>

Details

NameText Header 1
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_text_header_1_24_regular.svg
Filled fileic_fluent_text_header_1_24_filled.svg
React (Regular)TextHeader120Regular, TextHeader124Regular
React (Filled)TextHeader120Filled, TextHeader124Filled
LicenseMIT (© Microsoft Corporation)

Keywords

typetexttypographyeditcreateheadernumberletter

Related icons

Text Header 2Text Header 3Text Header 1 LinesText Header 1 Lines CaretText Font SizeText Header 2 LinesText Header 2 Lines CaretText Header 3 LinesText Header 3 Lines CaretText FootnoteText Number FormatText Case Lowercase