Text Header 3 Lines icon
Used to represent blocks of text witha section header. The Text Header 3 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 3 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 { TextHeader3Lines24Regular, TextHeader3Lines24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextHeader3Lines24Regular aria-label="Text Header 3 Lines" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_header_3_lines_24_regular.svg" width="24" height="24" alt="Text Header 3 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="M3.5 2.75C3.5 2.33579 3.16421 2 2.75 2C2.33579 2 2 2.33579 2 2.75V10.25C2 10.6642 2.33579 11 2.75 11C3.16421 11 3.5 10.6642 3.5 10.25L3.5 7L7.5 7V10.2444C7.5 10.6586 7.83579 10.9944 8.25 10.9944C8.66421 10.9944 9 10.6586 9 10.2444L9 2.75165C9 2.33743 8.66421 2.00165 8.25 2.00165C7.83579 2.00165 7.5 2.33743 7.5 2.75165L7.5 5.5H3.5L3.5 2.75ZM2 19.75C2 19.3358 2.33579 19 2.75 19H21.25C21.6642 19 22 19.3358 22 19.75C22 20.1642 21.6642 20.5 21.25 20.5H2.75C2.33579 20.5 2 20.1642 2 19.75ZM2.75 14C2.33579 14 2 14.3358 2 14.75C2 15.1642 2.33579 15.5 2.75 15.5H21.25C21.6642 15.5 22 15.1642 22 14.75C22 14.3358 21.6642 14 21.25 14H2.75ZM14.5855 3.57709C13.9019 3.3706 12.8655 3.59182 12.2936 4.1934C12.0082 4.49359 11.5334 4.50559 11.2332 4.22019C10.933 3.93479 10.921 3.46006 11.2064 3.15987C12.189 2.12642 13.8221 1.77957 15.0192 2.14117C15.8305 2.38621 16.4813 2.94313 16.7972 3.6608C17.1206 4.39516 17.0725 5.26061 16.5416 6.00619C16.4035 6.20002 16.2512 6.36375 16.0895 6.50206C16.2512 6.64037 16.4035 6.80411 16.5416 6.99794C17.0725 7.74351 17.1206 8.60897 16.7972 9.34333C16.4813 10.061 15.8305 10.6179 15.0192 10.863C13.8221 11.2246 12.189 10.8777 11.2064 9.84426C10.921 9.54406 10.933 9.06934 11.2332 8.78394C11.5334 8.49854 12.0082 8.51053 12.2936 8.81073C12.8655 9.41231 13.9019 9.63353 14.5855 9.42704C15.0137 9.29768 15.2998 9.02195 15.4244 8.73889C15.5417 8.47253 15.5341 8.16917 15.3197 7.86803C14.9263 7.3156 14.2601 7.257 13.4837 7.2524L13.3551 7.25206C12.9409 7.25206 12.6051 6.91627 12.6051 6.50206C12.6051 6.08784 12.9409 5.75206 13.3551 5.75206L13.4838 5.75171C14.2601 5.74711 14.9263 5.68852 15.3197 5.13609C15.5341 4.83495 15.5417 4.5316 15.4244 4.26523C15.2998 3.98218 15.0137 3.70645 14.5855 3.57709Z" 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_3_lines_24_regular.svg";Details
| Name | Text Header 3 Lines |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_header_3_lines_24_regular.svg |
| Filled file | ic_fluent_text_header_3_lines_24_filled.svg |
| React components | TextHeader3Lines24Regular, TextHeader3Lines24Filled |
| License | MIT (© Microsoft Corporation) |