Text Header 2 Lines Caret icon

Used to represent blocks of text with an expandable section header. The Text Header 2 Lines Caret icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 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_2_lines_caret_24_regular.svg

Text Header 2 Lines Caret icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <TextHeader2LinesCaret24Regular aria-label="Text Header 2 Lines Caret" />;
}

Text Header 2 Lines Caret icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/text_header_2_lines_caret_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_2_lines_caret_24_regular.svg" width="24" height="24" alt="Text Header 2 Lines Caret">

Text Header 2 Lines Caret icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Text Header 2 Lines Caret icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.text_header_2_lines_caret_24_regular)

Text Header 2 Lines Caret 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="&#xF0379;" FontSize="24" />

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

Text Header 2 Lines Caret 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_2_lines_caret_24_regular"></i>

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

Text Header 2 Lines Caret 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_2_lines_caret_24_regular" />

// Kotlin
R.drawable.ic_fluent_text_header_2_lines_caret_24_regular

Text Header 2 Lines Caret icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .textHeader2LinesCaret24Regular)

Text Header 2 Lines Caret 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 2 Lines Caret 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 { TextHeader2LinesCaret24Regular, TextHeader2LinesCaret24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextHeader2LinesCaret24Regular aria-label="Text Header 2 Lines Caret" />;
}

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_2_lines_caret_24_regular.svg" width="24" height="24" alt="Text Header 2 Lines Caret">

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="M11.9305 4.35146C12.2354 3.69355 13.0485 3.32941 13.6978 3.5825C14.4801 3.8874 14.7869 4.84277 14.3713 5.49098C14.1753 5.79671 13.8779 6.10081 13.4973 6.42901C13.2639 6.63029 13.0393 6.80835 12.8036 6.99529C12.6333 7.13036 12.457 7.27013 12.2674 7.42657C11.8525 7.76901 11.42 8.15662 11.0909 8.60016C10.7551 9.05291 10.5 9.60018 10.5 10.25C10.5 10.6642 10.8358 11 11.25 11H15.75C16.1642 11 16.5 10.6642 16.5 10.25C16.5 9.83577 16.1642 9.49998 15.75 9.49998H12.2911L12.2956 9.49385C12.5112 9.20319 12.8261 8.9103 13.2221 8.58353C13.3614 8.46862 13.5217 8.34109 13.6889 8.20805C13.9528 7.99813 14.2339 7.77449 14.4768 7.56501C14.8952 7.20425 15.3213 6.78833 15.634 6.30059C16.5948 4.8021 15.8479 2.81063 14.2426 2.18491C12.764 1.60862 11.1649 2.43636 10.5695 3.72063C10.3954 4.09644 10.5588 4.5423 10.9346 4.7165C11.3104 4.89069 11.7563 4.72726 11.9305 4.35146ZM2.75 1.99998C3.16421 1.99998 3.5 2.33577 3.5 2.74999L3.5 5.49998H7.5L7.5 2.75163C7.5 2.33742 7.83579 2.00163 8.25 2.00163C8.66421 2.00163 9 2.33742 9 2.75163L9 10.2444C9 10.6586 8.66421 10.9944 8.25 10.9944C7.83579 10.9944 7.5 10.6586 7.5 10.2444V6.99998H3.5L3.5 10.25C3.5 10.6642 3.16421 11 2.75 11C2.33579 11 2 10.6642 2 10.25V2.74998C2 2.33577 2.33579 1.99998 2.75 1.99998ZM17.5571 5.46189C17.6733 5.18151 17.9469 4.9987 18.2503 4.9987H21.2517C21.5551 4.9987 21.8287 5.18151 21.9449 5.46189C22.061 5.74227 21.9968 6.065 21.7822 6.27959L20.2816 7.78025C19.9885 8.07327 19.5135 8.07327 19.2204 7.78025L17.7198 6.27959C17.5052 6.065 17.441 5.74227 17.5571 5.46189ZM2.75 19C2.33579 19 2 19.3358 2 19.75C2 20.1642 2.33579 20.5 2.75 20.5H21.25C21.6642 20.5 22 20.1642 22 19.75C22 19.3358 21.6642 19 21.25 19H2.75ZM2 14.75C2 14.3358 2.33579 14 2.75 14H21.25C21.6642 14 22 14.3358 22 14.75C22 15.1642 21.6642 15.5 21.25 15.5H2.75C2.33579 15.5 2 15.1642 2 14.75Z" fill="currentColor"/></svg>

Details

NameText Header 2 Lines Caret
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_text_header_2_lines_caret_24_regular.svg
Filled fileic_fluent_text_header_2_lines_caret_24_filled.svg
React (Regular)TextHeader2LinesCaret16Regular, TextHeader2LinesCaret20Regular, TextHeader2LinesCaret24Regular
React (Filled)TextHeader2LinesCaret16Filled, TextHeader2LinesCaret20Filled, TextHeader2LinesCaret24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

textheaderexpand

Related icons