Draw Shape icon
Used in pen to shape scenarios. The Draw Shape 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 Shape 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 { DrawShape24Regular, DrawShape24Filled } from "@fluentui/react-icons";
export function Example() {
return <DrawShape24Regular aria-label="Draw Shape" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_draw_shape_24_regular.svg" width="24" height="24" alt="Draw Shape"> 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="M6.24943 3C4.45451 3 2.99943 4.45507 2.99943 6.25L2.99943 19.254C2.99943 19.6682 3.33522 20.004 3.74943 20.004C4.16365 20.004 4.49943 19.6682 4.49943 19.254L4.49943 6.25C4.49943 5.2835 5.28293 4.5 6.24943 4.5H17.7494C18.7159 4.5 19.4994 5.2835 19.4994 6.25V11.2324C19.9783 11.0419 20.493 10.9685 20.9994 11.0122V6.25C20.9994 4.45507 19.5444 3 17.7494 3H6.24943ZM13.1969 18.5719L19.0993 12.6695C19.9919 11.7768 21.4391 11.7768 22.3317 12.6695C23.2243 13.5621 23.2243 15.0093 22.3317 15.9019L16.4293 21.8043C16.0852 22.1485 15.654 22.3926 15.1818 22.5106L13.3511 22.9683C13.3013 22.9808 13.2517 22.9896 13.2027 22.9951C12.6117 23.1991 10.223 23.569 9.375 22.9072C8.80054 22.4588 8.91488 21.5728 9.15739 21.0887C9.19618 21.0113 9.13752 20.9098 9.05195 20.9232C8.39118 21.0264 7.80881 21.3738 7.22548 21.7219C6.44155 22.1896 5.65591 22.6583 4.676 22.5366C3.69713 22.4149 3.20792 21.8108 2.9659 21.2822C2.86699 21.0662 3.14549 20.8809 3.35403 20.9948C3.82265 21.2505 4.45973 21.4906 4.98511 21.3744C5.36023 21.2914 5.88893 20.9174 6.48138 20.4983C7.54665 19.7448 8.81804 18.8454 9.77342 19.2298C10.6124 19.5674 11.2327 20.3809 10.8033 21.3432C10.7506 21.4612 10.8036 21.6065 10.9296 21.6355C11.3529 21.7325 11.7077 21.7018 12.0626 21.5313L12.4906 19.8194C12.6086 19.3472 12.8527 18.916 13.1969 18.5719Z" 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_shape_24_regular.svg";Details
| Name | Draw Shape |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_draw_shape_24_regular.svg |
| Filled file | ic_fluent_draw_shape_24_filled.svg |
| React components | DrawShape24Regular, DrawShape24Filled |
| License | MIT (© Microsoft Corporation) |