Pen Svg Icon

Free SVG icon from the IconaMoon collection. Download or copy for use in any project.

Download SVG

Collection: IconaMoon
Format: SVG, PNG
License: CC BY 4.0 - Free for commercial use
Tags: pen svg edit write draw pencil

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/308323.svg" alt="Pen   Svg icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/308323.svg" alt="Pen   Svg icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/308323.svg"
  alt="Pen   Svg icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-pen---svg {
  background-image: url('https://proicons.com/icon/308323.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">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.99994H11C15.4183 2.99994 19 6.58166 19 10.9999C19 12.1738 18.7472 13.2886 18.293 14.2929L21 16.9999L17 20.9999L14.293 18.2929C13.2887 18.7471 12.1739 18.9999 11 18.9999C6.58172 18.9999 3 15.4182 3 10.9999V2.99994Z" fill="#FF4B4B"/>
<path d="M3 2.99994V1.99994C2.44772 1.99994 2 2.44765 2 2.99994H3ZM18.293 14.2929L17.3818 13.8809C17.2104 14.26 17.2916 14.7058 17.5859 15L18.293 14.2929ZM21 16.9999L21.7071 17.707C22.0976 17.3165 22.0976 16.6834 21.7071 16.2928L21 16.9999ZM17 20.9999L16.2929 21.707C16.6834 22.0976 17.3166 22.0976 17.7071 21.707L17 20.9999ZM14.293 18.2929L15.0001 17.5858C14.7058 17.2916 14.2601 17.2103 13.8809 17.3818L14.293 18.2929ZM11 1.99994H3V3.99994H11V1.99994ZM20 10.9999C20 6.02938 15.9706 1.99994 11 1.99994V3.99994C14.866 3.99994 18 7.13395 18 10.9999H20ZM19.2041 14.705C19.7157 13.5738 20 12.3187 20 10.9999H18C18 12.0289 17.7786 13.0035 17.3818 13.8809L19.2041 14.705ZM17.5859 15L20.2929 17.707L21.7071 16.2928L19.0001 13.5858L17.5859 15ZM20.2929 16.2928L16.2929 20.2928L17.7071 21.707L21.7071 17.707L20.2929 16.2928ZM17.7071 20.2928L15.0001 17.5858L13.5859 19L16.2929 21.707L17.7071 20.2928ZM11 19.9999C12.3188 19.9999 13.5738 19.7157 14.7051 19.2041L13.8809 17.3818C13.0036 17.7786 12.029 17.9999 11 17.9999V19.9999ZM2 10.9999C2 15.9705 6.02944 19.9999 11 19.9999V17.9999C7.13401 17.9999 4 14.8659 4 10.9999H2ZM2 2.99994V10.9999H4V2.99994H2Z" fill="#FF4B4B"/>
<path d="M21 16.9999L17 20.9999" stroke="#EA2B2B" stroke-width="2" stroke-linecap="round"/>
<path d="M3 2.99994L11 10.9999" stroke="#FF7878" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<ellipse cx="11" cy="10.9999" rx="2" ry="2" transform="rotate(-180 11 10.9999)" fill="#F7F7F7"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

Copied!

Pen Svg Icon

More from IconaMoon