Text Header 3 Lines Caret icon
Used to represent blocks of text with an expandable section header. The Text Header 3 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 3 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 { TextHeader3LinesCaret24Regular, TextHeader3LinesCaret24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextHeader3LinesCaret24Regular aria-label="Text Header 3 Lines Caret" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_header_3_lines_caret_24_regular.svg" width="24" height="24" alt="Text Header 3 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="M2.75 2C3.16421 2 3.5 2.33579 3.5 2.75L3.5 5.5H7.5L7.5 2.75165C7.5 2.33743 7.83579 2.00165 8.25 2.00165C8.66421 2.00165 9 2.33743 9 2.75165L9 10.2444C9 10.6586 8.66421 10.9944 8.25 10.9944C7.83579 10.9944 7.5 10.6586 7.5 10.2444V7L3.5 7L3.5 10.25C3.5 10.6642 3.16421 11 2.75 11C2.33579 11 2 10.6642 2 10.25V2.75C2 2.33579 2.33579 2 2.75 2ZM17.5571 5.46191C17.6733 5.18153 17.9469 4.99872 18.2503 4.99872H21.2517C21.5551 4.99872 21.8287 5.18153 21.9449 5.46191C22.061 5.74229 21.9968 6.06502 21.7822 6.27961L20.2816 7.78026C19.9885 8.07329 19.5135 8.07329 19.2204 7.78026L17.7198 6.27961C17.5052 6.06502 17.441 5.74229 17.5571 5.46191ZM2.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.75ZM11.7936 4.19341C12.3655 3.59183 13.4019 3.37061 14.0855 3.5771C14.5137 3.70646 14.7998 3.98219 14.9244 4.26525C15.0417 4.53161 15.0341 4.83497 14.8197 5.1361C14.4263 5.68853 13.7601 5.74713 12.9838 5.75172L12.8551 5.75207C12.4409 5.75207 12.1051 6.08785 12.1051 6.50207C12.1051 6.91628 12.4409 7.25207 12.8551 7.25207L12.9837 7.25241C13.7601 7.25701 14.4263 7.31561 14.8197 7.86805C15.0341 8.16918 15.0417 8.47254 14.9244 8.73891C14.7998 9.02196 14.5137 9.29769 14.0855 9.42705C13.4019 9.63354 12.3655 9.41232 11.7936 8.81074C11.5082 8.51055 11.0334 8.49855 10.7332 8.78395C10.433 9.06935 10.421 9.54407 10.7064 9.84427C11.6889 10.8777 13.3221 11.2246 14.5192 10.863C15.3305 10.6179 15.9813 10.061 16.2972 9.34334C16.6206 8.60898 16.5725 7.74353 16.0416 6.99795C15.9035 6.80412 15.7512 6.64039 15.5895 6.50208C15.7512 6.36377 15.9035 6.20003 16.0416 6.0062C16.5725 5.26062 16.6206 4.39517 16.2972 3.66081C15.9813 2.94314 15.3305 2.38622 14.5192 2.14118C13.3221 1.77958 11.6889 2.12643 10.7064 3.15988C10.421 3.46008 10.433 3.9348 10.7332 4.2202C11.0334 4.5056 11.5082 4.4936 11.7936 4.19341Z" 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_3_lines_caret_24_regular.svg";Details
| Name | Text Header 3 Lines Caret |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_header_3_lines_caret_24_regular.svg |
| Filled file | ic_fluent_text_header_3_lines_caret_24_filled.svg |
| React components | TextHeader3LinesCaret24Regular, TextHeader3LinesCaret24Filled |
| License | MIT (© Microsoft Corporation) |