Text Header 4 icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.75 5C11.1642 5 11.5 5.33579 11.5 5.75V18.25C11.5 18.6642 11.1642 19 10.75 19C10.3358 19 10 18.6642 10 18.25V12.5H3.5V18.25C3.5 18.6642 3.16421 19 2.75 19C2.33579 19 2 18.6642 2 18.25V5.75C2 5.33579 2.33579 5 2.75 5C3.16421 5 3.5 5.33579 3.5 5.75V11H10V5.75C10 5.33579 10.3358 5 10.75 5ZM19.2998 5.29102C19.9006 4.68003 21.0045 5.08662 21.0049 6.00195V14.5H22.251C22.665 14.5002 23.001 14.8359 23.001 15.25C23.0007 15.6639 22.6649 15.9998 22.251 16H21.0049V18.25C21.0044 18.6637 20.6686 18.9998 20.2549 19C19.8411 18.9998 19.5054 18.6637 19.5049 18.25V16H14.1631C13.1509 16 12.558 14.8595 13.1396 14.0312L19.1875 5.42773L19.2998 5.29102ZM14.6436 14.5H19.5049V7.58301L14.6436 14.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_24_regular.svg";

Details