Add icons to this collection by clicking the heart icon.
Pencil icon - also known as pencil, draw, pencil tool, and edit tools. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 33.867 33.867"
>
<linearGradient id="a">
<stop offset="0" stop-color="#f6f600" />
<stop offset="1" stop-color="#f69134" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#bca6ae" />
<stop offset="1" stop-color="#534666" />
</linearGradient>
<linearGradient
id="d"
x1="31.25"
x2="31.25"
y1="103"
y2="4"
gradientTransform="matrix(-.197 .197 -.197 -.197 40.103 26.703)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ff5e3f" />
<stop offset="1" stop-color="#ffbe3f" />
</linearGradient>
<linearGradient
id="e"
x1="32.907"
x2="33.999"
y1="124.187"
y2="107.84"
gradientTransform="matrix(-.197 .197 -.197 -.197 40.103 26.703)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f5f8ff" />
<stop offset="1" stop-color="#a0c9ff" />
</linearGradient>
<linearGradient
id="f"
x1="32.214"
x2="32.685"
y1="119.049"
y2="138.798"
gradientTransform="matrix(-.197 .197 -.197 -.197 40.103 26.703)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#d90947" />
<stop offset="1" stop-color="#ff585b" />
</linearGradient>
<linearGradient
id="h"
x1="39"
x2="39"
y1="4.648"
y2="20.921"
gradientTransform="matrix(-.197 .197 -.197 -.197 41.088 25.718)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="g"
x1="32.928"
x2="31.25"
y1="43.59"
y2="4"
gradientTransform="matrix(-.197 .197 -.197 -.197 40.103 26.703)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f6d3b7" />
<stop offset="1" stop-color="#f68ecb" />
</linearGradient>
<linearGradient
id="c"
x1="-1.41"
x2="31.485"
y1="16.933"
y2="32.808"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<g paint-order="markers fill stroke">
<path
fill="url(#c)"
d="M27.643 2.38a1.323 1.323 0 0 0-1.323 1.325c0 3.049-1.155 5.168-3.017 6.998-1.863 1.83-4.47 3.284-7.164 4.606-2.694 1.321-5.458 2.503-7.668 3.998-2.21 1.494-3.994 3.507-3.994 6.214 0 3.446 2.012 5.522 3.888 6.415 1.876.892 3.703.873 3.703.873h19.418a1.323 1.323 0 0 0 1.323-1.323 1.323 1.323 0 0 0-1.323-1.324H12.068s-1.308-.019-2.566-.617c-1.258-.599-2.379-1.505-2.379-4.024 0-1.586.945-2.746 2.83-4.021 1.885-1.275 4.585-2.459 7.352-3.816 2.767-1.358 5.618-2.898 7.851-5.092s3.809-5.13 3.809-8.887a1.323 1.323 0 0 0-1.322-1.324z"
/>
<g
stroke-dasharray=".279 1.115"
stroke-linecap="square"
stroke-width=".279"
>
<path
fill="url(#d)"
d="M11.779 11.78c-1.258 1.283-2.337 2.746-3.642 4.725l12.559 12.56c.58.58 1.488 1.08 2.452 1.49 1.32-1.32 5.948-5.943 7.407-7.403-.41-.965-.91-1.874-1.492-2.455L16.503 8.138c-2.027 1.257-3.466 2.36-4.724 3.642z"
/>
<path
fill="url(#e)"
d="m16.504 8.138-2.907-2.906C8.389 8.368 7.035 10.2 5.23 13.598l2.907 2.907z"
/>
<path
fill="url(#f)"
d="m5.23 13.598 8.367-8.366-3.355-3.355a2.78 2.78 0 0 0-3.941 0L1.876 6.302a2.78 2.78 0 0 0 0 3.942z"
/>
</g>
<path
fill="#ce2a32"
d="m17.823 10.532-.196-.196-.394.394.196.197zm-.986.987-.196-.197-.394.394.196.197zm-.985.985-.196-.197-.394.394.196.197zm-.985.984-.196-.196-.394.394.196.197zm-.986.987-.196-.197-.394.394.196.197zm-.985.985-.196-.197-.394.394.196.197zm-.985.985-.196-.197-.394.394.196.197zm-.986.986-.196-.197-.394.394.196.197z"
/>
<path
fill="url(#g)"
d="M26.244 26.253a16.19 16.19 0 0 0-3.096 4.302c1.711.73 3.602 1.178 4.176 1.283 1.988-.736 3.713-1.888 4.512-4.512-.104-.574-.552-2.463-1.28-4.174a16.189 16.189 0 0 0-4.312 3.1z"
/>
<path
fill="url(#h)"
d="M27.324 31.838c.972.29 4.65 1.416 5.29.777.64-.639-.465-4.224-.778-5.29z"
/>
</g>
</svg>
More icons in the same style and category