Pen Dismiss icon
Used to represent a signature, a device drawing input. Use edit in common editing scenarios. The Pen Dismiss 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 Pen Dismiss 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 { PenDismiss24Regular, PenDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <PenDismiss24Regular aria-label="Pen Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_pen_dismiss_24_regular.svg" width="24" height="24" alt="Pen Dismiss"> 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.9519 3.04746C19.5543 1.64993 17.2885 1.65 15.8911 3.04761L3.94103 14.999C3.5347 15.4054 3.2491 15.9166 3.116 16.4756L2.02041 21.0771C1.96009 21.3304 2.03552 21.5969 2.21968 21.7811C2.40385 21.9653 2.67037 22.0407 2.92373 21.9804L7.52498 20.8848C8.08418 20.7517 8.59546 20.466 9.00191 20.0595L10.153 18.9083C10.0528 18.4548 10 17.9836 10 17.5C10 17.3024 10.0088 17.1068 10.0261 16.9137L7.94119 18.9989C7.73104 19.2091 7.46668 19.3568 7.17755 19.4256L3.76191 20.2389L4.57521 16.823C4.64402 16.534 4.79168 16.2697 5.00175 16.0596L16.9518 4.1082C17.7634 3.29645 19.0795 3.29641 19.8912 4.10812C20.7028 4.91976 20.7029 6.23568 19.8913 7.04737L15.913 11.0262C16.1063 11.0088 16.3021 11 16.5 11C16.9833 11 17.4543 11.0527 17.9075 11.1528L20.952 8.10797C22.3493 6.71048 22.3493 4.44486 20.9519 3.04746ZM22 17.5C22 20.5376 19.5376 23 16.5 23C13.4624 23 11 20.5376 11 17.5C11 14.4624 13.4624 12 16.5 12C19.5376 12 22 14.4624 22 17.5ZM14.8536 15.1464C14.6583 14.9512 14.3417 14.9512 14.1464 15.1464C13.9512 15.3417 13.9512 15.6583 14.1464 15.8536L15.7929 17.5L14.1464 19.1464C13.9512 19.3417 13.9512 19.6583 14.1464 19.8536C14.3417 20.0488 14.6583 20.0488 14.8536 19.8536L16.5 18.2071L18.1464 19.8536C18.3417 20.0488 18.6583 20.0488 18.8536 19.8536C19.0488 19.6583 19.0488 19.3417 18.8536 19.1464L17.2071 17.5L18.8536 15.8536C19.0488 15.6583 19.0488 15.3417 18.8536 15.1464C18.6583 14.9512 18.3417 14.9512 18.1464 15.1464L16.5 16.7929L14.8536 15.1464Z" 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/pen_dismiss_24_regular.svg";Details
| Name | Pen Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_pen_dismiss_24_regular.svg |
| Filled file | ic_fluent_pen_dismiss_24_filled.svg |
| React components | PenDismiss24Regular, PenDismiss24Filled |
| License | MIT (© Microsoft Corporation) |