Text Header 1 icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M19.5901 5.08156C19.5256 5.04873 19.4558 5.02494 19.3823 5.01185C19.2923 4.99562 19.2022 4.99637 19.1157 5.0122C18.9906 5.03482 18.8763 5.08848 18.781 5.16493C18.6645 5.2584 18.5765 5.38592 18.5321 5.5324C17.8427 7.58332 16.4747 8.94079 15.3642 9.60708C15.0091 9.8202 14.8939 10.2809 15.107 10.6361C15.3201 10.9913 15.7808 11.1064 16.136 10.8933C16.9101 10.4288 17.7594 9.71339 18.5 8.74737V18.2502C18.5 18.6644 18.8358 19.0002 19.25 19.0002C19.6642 19.0002 20 18.6644 20 18.2502V5.77181C20.0042 5.62763 19.9664 5.48714 19.8944 5.36629C19.8235 5.24719 19.7195 5.14718 19.5901 5.08156ZM3.5 5.75021C3.5 5.336 3.16421 5.00021 2.75 5.00021C2.33579 5.00021 2 5.336 2 5.75021V18.2502C2 18.6644 2.33579 19.0002 2.75 19.0002C3.16421 19.0002 3.5 18.6644 3.5 18.2502V12.5002H10V18.2502C10 18.6644 10.3358 19.0002 10.75 19.0002C11.1642 19.0002 11.5 18.6644 11.5 18.2502V5.75021C11.5 5.336 11.1642 5.00021 10.75 5.00021C10.3358 5.00021 10 5.336 10 5.75021V11.0002H3.5V5.75021Z" 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_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateheaderh1h2h3numberletter