Text Header 5 icon

Use the Text Header 5 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 { TextHeader524Regular, TextHeader524Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 5ZM20.249 4.99902C20.6631 4.99913 20.9989 5.33592 20.999 5.75C20.9988 6.16395 20.663 6.49984 20.249 6.5H15.6777L15.3281 9.9873C15.5326 9.98487 15.7614 9.98139 15.998 9.98047C16.7723 9.97746 17.7254 9.98482 18.1602 10.0459L18.4014 10.0869C20.8688 10.5622 22.5566 12.8947 22.2031 15.4111C21.8378 18.0087 19.4356 19.8182 16.8379 19.4531C15.0427 19.2007 13.6248 17.9755 13.04 16.3887C12.8973 16.0003 13.0961 15.569 13.4844 15.4258C13.873 15.2827 14.3041 15.4825 14.4473 15.8711C14.8487 16.9602 15.8203 17.7954 17.0469 17.9678C18.8243 18.2176 20.4679 16.9795 20.7178 15.2021C20.9595 13.4803 19.8046 11.8847 18.1162 11.5596L17.9512 11.5312C17.6484 11.4888 16.8233 11.4773 16.0039 11.4805C15.6094 11.482 15.2367 11.4868 14.9629 11.4912C14.8142 11.4936 14.6653 11.499 14.5166 11.499C14.3018 11.5039 14.0942 11.4165 13.9482 11.2588C13.8025 11.1012 13.7316 10.8884 13.7529 10.6748L14.2539 5.67578C14.2923 5.29249 14.6148 5.00009 15 5L20.249 4.99902Z" 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_5_24_regular.svg";

Details