Text Header 2 Lines icon

Use the Text Header 2 Lines 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 { TextHeader2Lines24Regular, TextHeader2Lines24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_header_2_lines_24_regular.svg" width="24" height="24" alt="Text Header 2 Lines">

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.198 3.5825C13.5487 3.32941 12.7356 3.69355 12.4306 4.35146C12.2564 4.72726 11.8106 4.89069 11.4348 4.7165C11.059 4.5423 10.8955 4.09644 11.0697 3.72063C11.665 2.43636 13.2642 1.60862 14.7427 2.18491C16.3481 2.81063 17.095 4.8021 16.1342 6.30059C15.8215 6.78833 15.3954 7.20425 14.977 7.56501C14.7341 7.77449 14.453 7.99813 14.1891 8.20805C14.0219 8.34109 13.8616 8.46862 13.7223 8.58353C13.3263 8.9103 13.0114 9.20319 12.7958 9.49385L12.7913 9.49998H16.2502C16.6644 9.49998 17.0002 9.83577 17.0002 10.25C17.0002 10.6642 16.6644 11 16.2502 11H11.7502C11.336 11 11.0002 10.6642 11.0002 10.25C11.0002 9.60018 11.2552 9.05291 11.5911 8.60016C11.9201 8.15662 12.3526 7.76901 12.7676 7.42657C12.9572 7.27017 13.1334 7.13043 13.3036 6.9954C13.5394 6.80848 13.7641 6.63028 13.9975 6.42901C14.3781 6.10081 14.6755 5.79671 14.8715 5.49098C15.2871 4.84277 14.9803 3.8874 14.198 3.5825ZM3.5 2.75C3.5 2.33579 3.16421 2 2.75 2C2.33579 2 2 2.33579 2 2.75V10.25C2 10.6642 2.33579 11 2.75 11C3.16421 11 3.5 10.6642 3.5 10.25L3.5 7H7.5V10.2444C7.5 10.6586 7.83579 10.9944 8.25 10.9944C8.66421 10.9944 9 10.6586 9 10.2444L9 2.75165C9 2.33743 8.66421 2.00165 8.25 2.00165C7.83579 2.00165 7.5 2.33743 7.5 2.75165L7.5 5.5H3.5L3.5 2.75ZM2 19.75C2 19.3358 2.33579 19 2.75 19H21.25C21.6642 19 22 19.3358 22 19.75C22 20.1642 21.6642 20.5 21.25 20.5H2.75C2.33579 20.5 2 20.1642 2 19.75ZM2.75 14C2.33579 14 2 14.3358 2 14.75C2 15.1642 2.33579 15.5 2.75 15.5H21.25C21.6642 15.5 22 15.1642 22 14.75C22 14.3358 21.6642 14 21.25 14H2.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_24_regular.svg";

Details

Keywords

textheaderh1h2h3collapseexpand