Pen Svg Icon
Free SVG icon from the IconaMoon collection. Download or copy for use in any project.
The Pen Svg icon is available as a free SVG and is ready to drop into any web or app project.
img tag
<img src="https://proicons.com/icon/309843.svg" alt="Pen Svg icon" width="24" height="24">
React JSX
<img src="https://proicons.com/icon/309843.svg" alt="Pen Svg icon" width={24} height={24} />
Vue template
<img src="https://proicons.com/icon/309843.svg" alt="Pen Svg icon" :width="24" :height="24" />
CSS background
.icon-pen---svg {
background-image: url('https://proicons.com/icon/309843.svg');
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
SVG markup
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 3V2.5C2.72386 2.5 2.5 2.72386 2.5 3H3ZM18.293 14.293L17.8374 14.087C17.7517 14.2765 17.7923 14.4994 17.9394 14.6465L18.293 14.293ZM21 17L21.3536 17.3536C21.5488 17.1583 21.5488 16.8417 21.3536 16.6464L21 17ZM17 21L16.6464 21.3536C16.8417 21.5488 17.1583 21.5488 17.3536 21.3536L17 21ZM14.293 18.293L14.6465 17.9394C14.4994 17.7923 14.2765 17.7517 14.087 17.8374L14.293 18.293ZM11 2.5H3V3.5H11V2.5ZM19.5 11C19.5 6.30558 15.6944 2.5 11 2.5V3.5C15.1421 3.5 18.5 6.85786 18.5 11H19.5ZM18.7486 14.499C19.2314 13.4313 19.5 12.2463 19.5 11H18.5C18.5 12.1014 18.2629 13.1461 17.8374 14.087L18.7486 14.499ZM17.9394 14.6465L20.6464 17.3536L21.3536 16.6464L18.6465 13.9394L17.9394 14.6465ZM20.6464 16.6464L16.6464 20.6464L17.3536 21.3536L21.3536 17.3536L20.6464 16.6464ZM17.3536 20.6464L14.6465 17.9394L13.9394 18.6465L16.6464 21.3536L17.3536 20.6464ZM11 19.5C12.2463 19.5 13.4313 19.2314 14.499 18.7486L14.087 17.8374C13.1461 18.2629 12.1014 18.5 11 18.5V19.5ZM2.5 11C2.5 15.6944 6.30558 19.5 11 19.5V18.5C6.85786 18.5 3.5 15.1421 3.5 11H2.5ZM2.5 3V11H3.5V3H2.5Z" fill="#292929"/> <ellipse cx="11" cy="11" rx="1" ry="1" transform="rotate(-180 11 11)" stroke="#292929"/> <path d="M3 3L10 10" stroke="#292929" stroke-linecap="round" stroke-linejoin="round"/> </svg>
Copied!