Draw Image icon
Used in pen to shape scenarios. The Draw Image 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 Image 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 { DrawImage24Regular, DrawImage24Filled } from "@fluentui/react-icons";
export function Example() {
return <DrawImage24Regular aria-label="Draw Image" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_draw_image_24_regular.svg" width="24" height="24" alt="Draw Image"> 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.9994 6.25C20.9994 4.45507 19.5444 3 17.7494 3H6.24943C4.45451 3 2.99943 4.45507 2.99943 6.25L2.99943 18.5327C2.99943 19.8363 4.57023 20.4949 5.49988 19.5811L9.52908 15.6208C9.53603 15.614 9.54282 15.6071 9.54944 15.6L11.4746 13.7148L11.5582 13.644C11.8496 13.4316 12.259 13.4553 12.5241 13.7148L14.6032 15.7512L15.6641 14.6903L13.5736 12.6431L13.4452 12.5266C12.5669 11.7885 11.2583 11.8273 10.4252 12.643L5.97258 17.0024H5.98357L4.49943 18.4612L4.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.25ZM17.5037 8.75212C17.5037 7.50831 16.4954 6.5 15.2515 6.5C14.0077 6.5 12.9994 7.50831 12.9994 8.75212C12.9994 9.99592 14.0077 11.0042 15.2515 11.0042C16.4954 11.0042 17.5037 9.99592 17.5037 8.75212ZM14.4994 8.75212C14.4994 8.33673 14.8362 8 15.2515 8C15.6669 8 16.0037 8.33673 16.0037 8.75212C16.0037 9.1675 15.6669 9.50423 15.2515 9.50423C14.8362 9.50423 14.4994 9.1675 14.4994 8.75212ZM13.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_image_24_regular.svg";Details
| Name | Draw Image |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_draw_image_24_regular.svg |
| Filled file | ic_fluent_draw_image_24_filled.svg |
| React components | DrawImage24Regular, DrawImage24Filled |
| License | MIT (© Microsoft Corporation) |