Text Header 4 Lines Caret icon

Use the Text Header 4 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 { TextHeader4LinesCaret24Regular, TextHeader4LinesCaret24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_header_4_lines_caret_24_regular.svg" width="24" height="24" alt="Text Header 4 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="M21.249 19C21.6632 19 21.999 19.3358 21.999 19.75C21.9989 20.1641 21.6632 20.5 21.249 20.5H2.74902C2.33489 20.5 1.99916 20.1641 1.99902 19.75C1.99902 19.3358 2.33481 19 2.74902 19H21.249ZM21.249 14C21.6632 14 21.999 14.3358 21.999 14.75C21.9989 15.1641 21.6632 15.5 21.249 15.5H2.74902C2.33489 15.5 1.99916 15.1641 1.99902 14.75C1.99902 14.3358 2.33481 14 2.74902 14H21.249ZM2.74902 2C3.16324 2 3.49902 2.33579 3.49902 2.75V5.5H7.49902V2.75098C7.49925 2.33696 7.83495 2.00098 8.24902 2.00098C8.6631 2.00098 8.99879 2.33696 8.99902 2.75098V10.2441C8.99902 10.6584 8.66324 10.9941 8.24902 10.9941C7.83481 10.9941 7.49902 10.6584 7.49902 10.2441V7H3.49902V10.25C3.49889 10.6641 3.16316 11 2.74902 11C2.33489 11 1.99916 10.6641 1.99902 10.25V2.75C1.99902 2.33579 2.33481 2 2.74902 2ZM14.1436 2.30859C14.3346 2.04614 14.6727 1.93687 14.9814 2.03711C15.2904 2.13757 15.5 2.42515 15.5 2.75V7.5H16.25C16.6642 7.5 17 7.83579 17 8.25C17 8.66421 16.6642 9 16.25 9H15.5V10.25C15.5 10.6642 15.1642 11 14.75 11C14.3358 11 14 10.6642 14 10.25V9H10.75C10.4681 9 10.2101 8.84189 10.082 8.59082C9.95402 8.33944 9.97764 8.03673 10.1436 7.80859L14.1436 2.30859ZM21.251 4.99805C21.5543 4.99816 21.8282 5.18163 21.9443 5.46191C22.0603 5.74219 21.9957 6.0648 21.7812 6.2793L20.2803 7.78027C19.9873 8.07292 19.5127 8.07294 19.2197 7.78027L17.7188 6.2793C17.5042 6.06472 17.4405 5.74225 17.5566 5.46191C17.6727 5.18164 17.9457 4.99819 18.249 4.99805H21.251ZM12.2227 7.5H14V5.05566L12.2227 7.5Z" 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_4_lines_caret_24_regular.svg";

Details