Text Header 1 Lines Caret icon

Use the Text Header 1 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 { TextHeader1LinesCaret24Regular, TextHeader1LinesCaret24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_header_1_lines_caret_24_regular.svg" width="24" height="24" alt="Text Header 1 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="M14.5 2.75001C14.5 2.40218 14.2608 2.09999 13.9223 2.02008C13.5838 1.94016 13.2347 2.10349 13.0792 2.4146C12.8106 2.95168 12.3973 3.37169 12.0315 3.66436C11.8512 3.80857 11.6897 3.91611 11.5757 3.98627C11.5189 4.02122 11.4745 4.0465 11.4463 4.06208C11.4322 4.06986 11.4222 4.07518 11.4167 4.07804L11.4122 4.08041C11.0434 4.26641 10.8943 4.71575 11.0792 5.08542C11.2644 5.45591 11.7149 5.60607 12.0854 5.42083L12.0872 5.41992L12.0896 5.41875L12.0956 5.41564L12.1135 5.40636C12.128 5.3988 12.1472 5.3885 12.1709 5.37545C12.2182 5.34935 12.2832 5.31214 12.3618 5.26376C12.5186 5.16725 12.7321 5.02479 12.9685 4.83566L13 4.81031V10.25C13 10.6642 13.3358 11 13.75 11C14.1642 11 14.5 10.6642 14.5 10.25V2.75001ZM2.75 2.00001C3.16421 2.00001 3.5 2.3358 3.5 2.75001L3.5 5.50001H7.5L7.5 2.75166C7.5 2.33745 7.83579 2.00166 8.25 2.00166C8.66421 2.00166 9 2.33745 9 2.75166L9 10.2444C9 10.6586 8.66421 10.9944 8.25 10.9944C7.83579 10.9944 7.5 10.6586 7.5 10.2444V7.00001L3.5 7.00001L3.5 10.25C3.5 10.6642 3.16421 11 2.75 11C2.33579 11 2 10.6642 2 10.25V2.75001C2 2.3358 2.33579 2.00001 2.75 2.00001ZM17.5571 5.46192C17.6733 5.18154 17.9469 4.99873 18.2503 4.99873H21.2517C21.5551 4.99873 21.8287 5.18154 21.9449 5.46192C22.061 5.7423 21.9968 6.06503 21.7822 6.27962L20.2816 7.78028C19.9885 8.0733 19.5135 8.0733 19.2204 7.78028L17.7198 6.27962C17.5052 6.06503 17.441 5.7423 17.5571 5.46192ZM2.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_1_lines_caret_24_regular.svg";

Details

Keywords

textheaderh1h2h3collapseexpand