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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/text_header_2_lines_caret_24_regular.svg";Details
| Name | Text Header 2 Lines Caret |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_header_2_lines_caret_24_regular.svg |
| Filled file | ic_fluent_text_header_2_lines_caret_24_filled.svg |
| React components | TextHeader2LinesCaret24Regular, TextHeader2LinesCaret24Filled |
| License | MIT (© Microsoft Corporation) |