Text Header 3 icon
Used in general type creation and editing scenarios. Global readiness notes universal enough to not need locale specific variants. The Text Header 3 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 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 { TextHeader324Regular, TextHeader324Filled } from "@fluentui/react-icons";
export function Example() {
return <TextHeader324Regular aria-label="Text Header 3" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_header_3_24_regular.svg" width="24" height="24" alt="Text Header 3"> 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="M17.751 4.5C20.072 4.50024 22.001 6.3215 22.001 8.625C22.001 10.0323 21.2799 11.258 20.1904 12C21.2799 12.742 22.001 13.9677 22.001 15.375C22.001 17.6785 20.072 19.4998 17.751 19.5C16.9007 19.5 16.0363 19.2568 15.3037 18.8457C14.5744 18.4364 13.9243 17.8311 13.5693 17.0645C13.3954 16.6887 13.5589 16.2424 13.9346 16.0684C14.3104 15.8944 14.7566 16.0579 14.9307 16.4336C15.1215 16.8459 15.5091 17.2418 16.0371 17.5381C16.5619 17.8326 17.1758 18 17.751 18C19.2955 17.9998 20.501 16.7991 20.501 15.375C20.501 13.9509 19.2955 12.7502 17.751 12.75H16.75C16.3358 12.75 16 12.4142 16 12C16 11.5858 16.3358 11.25 16.75 11.25H17.751C19.2955 11.2498 20.501 10.0491 20.501 8.625C20.501 7.20087 19.2955 6.00024 17.751 6C17.1758 6 16.5619 6.16741 16.0371 6.46191C15.5091 6.75824 15.1215 7.15412 14.9307 7.56641C14.7566 7.94208 14.3104 8.10556 13.9346 7.93164C13.5589 7.75756 13.3954 7.31134 13.5693 6.93555C13.9243 6.16886 14.5744 5.56362 15.3037 5.1543C16.0363 4.74321 16.9007 4.5 17.751 4.5ZM10.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 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_3_24_regular.svg";Details
| Name | Text Header 3 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_header_3_24_regular.svg |
| Filled file | ic_fluent_text_header_3_24_filled.svg |
| React components | TextHeader324Regular, TextHeader324Filled |
| License | MIT (© Microsoft Corporation) |