Text Edit Style icon
Used in general type creation and editing scenarios. The Text Edit Style 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 Edit Style 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 { TextEditStyle24Regular, TextEditStyle24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextEditStyle24Regular aria-label="Text Edit Style" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_edit_style_24_regular.svg" width="24" height="24" alt="Text Edit Style"> 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="M20.0626 8.44532C21.319 9.70247 21.3183 11.7401 20.0612 12.9964L12.938 20.1076C12.675 20.3701 12.3511 20.5634 11.9952 20.6703L7.70221 21.9589C7.17324 22.1177 6.61571 21.8176 6.45694 21.2886C6.3987 21.0946 6.40076 20.8874 6.46285 20.6946L7.82425 16.4666C7.93389 16.1261 8.12313 15.8166 8.37628 15.5639L15.5091 8.44272C16.7674 7.18646 18.8058 7.18762 20.0626 8.44532ZM16.5689 9.50425L9.43607 16.6254C9.35168 16.7096 9.2886 16.8128 9.25206 16.9263L8.18228 20.2487L11.564 19.2336C11.6826 19.198 11.7906 19.1336 11.8782 19.046L19.0002 11.9361C19.6721 11.2647 19.6724 10.1768 19.0016 9.50564C18.3301 8.83371 17.2412 8.83309 16.5689 9.50425ZM8.15104 2.36975L8.20152 2.47487L11.454 10.724L10.297 11.879L9.556 10H5.443L4.44768 12.5209C4.30809 12.874 3.93033 13.0621 3.57164 12.9737L3.47447 12.9426C3.12137 12.803 2.93328 12.4253 3.02168 12.0666L3.05272 11.9694L6.80633 2.47427C7.04172 1.87883 7.84884 1.84415 8.15104 2.36975ZM7.50294 4.79226L6.036 8.5H8.964L7.50294 4.79226Z" 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_edit_style_24_regular.svg";Details
| Name | Text Edit Style |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_edit_style_24_regular.svg |
| Filled file | ic_fluent_text_edit_style_24_filled.svg |
| React components | TextEditStyle24Regular, TextEditStyle24Filled |
| License | MIT (© Microsoft Corporation) |