Text Header 1 Lines icon
Used to represent blocks of text witha section header. The Text Header 1 Lines icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Text Header 1 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 { TextHeader1Lines24Regular, TextHeader1Lines24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextHeader1Lines24Regular aria-label="Text Header 1 Lines" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_header_1_lines_24_regular.svg" width="24" height="24" alt="Text Header 1 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.5 2.75001C14.5 2.40218 14.2608 2.09999 13.9223 2.02008C13.5838 1.94016 13.2347 2.10349 13.0792 2.4146C12.8106 2.95168 12.3973 3.37169 12.0315 3.66436C11.8512 3.80857 11.6897 3.91611 11.5757 3.98627C11.5189 4.02122 11.4745 4.0465 11.4463 4.06208C11.4322 4.06986 11.4222 4.07518 11.4167 4.07804L11.4122 4.08041C11.0434 4.26641 10.8943 4.71575 11.0792 5.08542C11.2644 5.45591 11.7149 5.60607 12.0854 5.42083L12.0872 5.41992L12.0896 5.41875L12.0956 5.41564L12.1135 5.40636C12.128 5.3988 12.1472 5.3885 12.1709 5.37545C12.2182 5.34935 12.2832 5.31214 12.3618 5.26376C12.5186 5.16725 12.7321 5.02479 12.9685 4.83566L13 4.81031V10.25C13 10.6642 13.3358 11 13.75 11C14.1642 11 14.5 10.6642 14.5 10.25V2.75001ZM2.75 2.00001C3.16421 2.00001 3.5 2.3358 3.5 2.75001L3.5 5.50001H7.5L7.5 2.75166C7.5 2.33745 7.83579 2.00166 8.25 2.00166C8.66421 2.00166 9 2.33745 9 2.75166L9 10.2444C9 10.6586 8.66421 10.9944 8.25 10.9944C7.83579 10.9944 7.5 10.6586 7.5 10.2444V7.00001L3.5 7.00001L3.5 10.25C3.5 10.6642 3.16421 11 2.75 11C2.33579 11 2 10.6642 2 10.25V2.75001C2 2.3358 2.33579 2.00001 2.75 2.00001ZM2.75 19C2.33579 19 2 19.3358 2 19.75C2 20.1642 2.33579 20.5 2.75 20.5H21.25C21.6642 20.5 22 20.1642 22 19.75C22 19.3358 21.6642 19 21.25 19H2.75ZM2 14.75C2 14.3358 2.33579 14 2.75 14H21.25C21.6642 14 22 14.3358 22 14.75C22 15.1642 21.6642 15.5 21.25 15.5H2.75C2.33579 15.5 2 15.1642 2 14.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_1_lines_24_regular.svg";Details
| Name | Text Header 1 Lines |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_header_1_lines_24_regular.svg |
| Filled file | ic_fluent_text_header_1_lines_24_filled.svg |
| React components | TextHeader1Lines24Regular, TextHeader1Lines24Filled |
| License | MIT (© Microsoft Corporation) |