Draw Text icon
Used in pen to shape scenarios. The Draw Text 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 Draw Text 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 { DrawText24Regular, DrawText24Filled } from "@fluentui/react-icons";
export function Example() {
return <DrawText24Regular aria-label="Draw Text" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_draw_text_24_regular.svg" width="24" height="24" alt="Draw Text"> 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="M9.99789 5.71459L7.23307 13.5H12.7627L9.99789 5.71459ZM13.5729 15.7815L13.2954 15H6.70038L5.4559 18.5043C5.31729 18.8946 4.88849 19.0987 4.49816 18.9601C4.10783 18.8214 3.90377 18.3927 4.04239 18.0023L9.16006 3.59156C9.44017 2.80281 10.5556 2.80282 10.8357 3.59156L14.7476 14.6069L13.5729 15.7815ZM4.98511 20.3744C4.45973 20.4906 3.82265 20.2505 3.35403 19.9948C3.14549 19.8809 2.86699 20.0662 2.9659 20.2822C3.20792 20.8108 3.69713 21.4149 4.676 21.5366C5.65591 21.6583 6.44155 21.1896 7.22548 20.7219C7.80881 20.3738 8.39118 20.0264 9.05195 19.9232C9.13752 19.9098 9.19618 20.0113 9.15739 20.0887C8.91488 20.5728 8.80054 21.4588 9.375 21.9072C10.223 22.569 12.6117 22.1991 13.2027 21.9951C13.2517 21.9896 13.3013 21.9808 13.3511 21.9683L15.1818 21.5106C15.654 21.3926 16.0852 21.1485 16.4293 20.8043L22.3317 14.9019C23.2243 14.0093 23.2243 12.5621 22.3317 11.6695C21.4391 10.7768 19.9919 10.7768 19.0993 11.6695L13.1969 17.5719C12.8527 17.916 12.6086 18.3472 12.4906 18.8194L12.0626 20.5313C11.7077 20.7018 11.3529 20.7325 10.9296 20.6355C10.8036 20.6065 10.7506 20.4612 10.8033 20.3432C11.2327 19.3809 10.6124 18.5674 9.77342 18.2298C8.81804 17.8454 7.54665 18.7448 6.48138 19.4983C5.88893 19.9174 5.36023 20.2914 4.98511 20.3744Z" 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/draw_text_24_regular.svg";Details
| Name | Draw Text |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_draw_text_24_regular.svg |
| Filled file | ic_fluent_draw_text_24_filled.svg |
| React components | DrawText24Regular, DrawText24Filled |
| License | MIT (© Microsoft Corporation) |