Add icons to this collection by clicking the heart icon.
Pen icon - also known as interface, education, pen, ruler, illustration, stationery, and technical. Created in a clean 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 512 512"
>
<linearGradient id="a">
<stop offset="0" stop-color="#230be0" />
<stop offset="1" stop-color="#fc54ff" />
</linearGradient>
<linearGradient
id="c"
x1="74.981"
x2="437.02"
y1="437.019"
y2="74.98"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<radialGradient
id="d"
cx="255.555"
cy="257.076"
r="314.333"
gradientTransform="rotate(-45 297.876 238.087) scale(1 .86)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#8d00db" stop-opacity=".8" />
<stop offset=".202" stop-color="#b21ce7" stop-opacity=".638" />
<stop offset=".421" stop-color="#d234f1" stop-opacity=".463" />
<stop offset=".632" stop-color="#e946f9" stop-opacity=".294" />
<stop offset=".83" stop-color="#f750fd" stop-opacity=".136" />
<stop offset="1" stop-color="#fc54ff" stop-opacity="0" />
</radialGradient>
<linearGradient
id="e"
x1="373.782"
x2="373.782"
y1="247.27"
y2="763.558"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="373.782"
x2="373.782"
y1="582.614"
y2="508.791"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#8d00db" stop-opacity="0" />
<stop offset=".336" stop-color="#8b00db" stop-opacity=".269" />
<stop offset=".513" stop-color="#8301db" stop-opacity=".41" />
<stop offset=".652" stop-color="#7502dc" stop-opacity=".522" />
<stop offset=".772" stop-color="#6204dd" stop-opacity=".618" />
<stop offset=".879" stop-color="#4907de" stop-opacity=".704" />
<stop offset=".977" stop-color="#2b0ae0" stop-opacity=".781" />
<stop offset="1" stop-color="#230be0" stop-opacity=".8" />
</linearGradient>
<linearGradient
id="g"
x1="373.782"
x2="373.782"
y1="342.72"
y2="-240.169"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fc54ff" />
<stop offset="1" stop-color="#230be0" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#fc54ff" />
<stop offset=".22" stop-color="#fd75ff" />
<stop offset=".702" stop-color="#fec8ff" />
<stop offset="1" stop-color="#fff" />
</linearGradient>
<linearGradient
id="h"
x1="373.781"
x2="373.781"
y1="-288.893"
y2="273.659"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="i"
x1="373.782"
x2="373.782"
y1="-151.436"
y2="340.1"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="j"
x1="350.597"
x2="350.597"
y1="-61.113"
y2="721.675"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="k"
x1="389.232"
x2="389.232"
y1="-132.732"
y2="650.055"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="l"
x1="335.084"
x2="335.084"
y1="19.367"
y2="968.962"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="m"
x1="389.269"
x2="389.269"
y1="-77.497"
y2="872.097"
gradientTransform="rotate(-135 296.012 326.034)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<circle cx="256" cy="256" r="256" fill="url(#c)" />
<circle cx="256" cy="256" r="256" fill="url(#d)" />
<path
fill="url(#e)"
d="M347.433 229.872a24280.34 24280.34 0 0 1 86.898-86.015c2.888-2.841 2.731-7.584-.336-10.614a6240.49 6240.49 0 0 1-55.239-55.239c-3.029-3.068-7.771-3.224-10.613-.336a24196.541 24196.541 0 0 1-86.015 86.898 17482.205 17482.205 0 0 0 65.305 65.306z"
/>
<path
fill="url(#f)"
d="M347.433 229.872a24280.34 24280.34 0 0 1 86.898-86.015c2.888-2.841 2.731-7.584-.336-10.614a6240.49 6240.49 0 0 1-55.239-55.239c-3.029-3.068-7.771-3.224-10.613-.336a24196.541 24196.541 0 0 1-86.015 86.898 17482.205 17482.205 0 0 0 65.305 65.306z"
/>
<path
fill="url(#g)"
d="M99.991 389.828c-5.662 5.622-5.205 15.092.941 21.24 6.148 6.146 15.619 6.603 21.24.941 5.091-5.121 10.217-10.276 15.375-15.461a3613.273 3613.273 0 0 1 9.804-31.899 3613.273 3613.273 0 0 1-31.899 9.804c-5.185 5.157-10.34 10.284-15.461 15.375z"
/>
<path
fill="url(#h)"
d="M137.547 396.548a68057.494 68057.494 0 0 1 47.171-47.374 9413.985 9413.985 0 0 0-21.893-21.892 68057.494 68057.494 0 0 1-47.374 47.171 6137.21 6137.21 0 0 1 22.096 22.095z"
/>
<path
fill="url(#i)"
d="M146.891 343.159a8259.43 8259.43 0 0 1 21.951 21.95c6.052 6.074 15.646 6.259 21.49.368a38420.806 38420.806 0 0 1 53.55-53.822 20307.587 20307.587 0 0 0-43.537-43.537 37886.48 37886.48 0 0 1-53.822 53.55c-5.891 5.845-5.707 15.44.368 21.491z"
/>
<path
fill="url(#j)"
d="M190.332 365.476c6.022 6.064 15.616 6.21 21.49.276a25398.947 25398.947 0 0 1 53.728-54.073 27069.682 27069.682 0 0 0-32.587-32.643l-64.498 64.498a8694.248 8694.248 0 0 1 21.867 21.942z"
/>
<path
fill="url(#k)"
d="M146.248 300.177a25637.438 25637.438 0 0 0 54.073-53.728 27008.569 27008.569 0 0 1 43.52 43.47 76790.377 76790.377 0 0 0-53.801 53.916c-5.888 5.911-15.524 5.749-21.574-.301a9042.422 9042.422 0 0 0-21.942-21.867c-6.065-6.022-6.21-15.616-.276-21.49z"
/>
<path
fill="url(#l)"
d="M227.97 305.813c7.253 7.266 14.496 14.534 21.72 21.795 5.985 6.018 15.65 6.026 21.627.014 49.181-49.444 99.295-99.3 147.681-146.909 5.884-5.787 5.675-15.297-.428-21.321a7328.967 7328.967 0 0 1-22.073-21.885A77447.89 77447.89 0 0 0 227.97 305.813z"
/>
<path
fill="url(#m)"
d="M184.392 262.31a18043.59 18043.59 0 0 1 43.578 43.503c6.01 6.021 15.703 6.053 21.681.056a38910.068 38910.068 0 0 1 147.316-146.93c5.854-5.802 5.621-15.366-.47-21.432a7262.345 7262.345 0 0 1-43.889-44.077c-6.025-6.103-15.535-6.314-21.321-.428a19538.262 19538.262 0 0 1-146.909 147.681c-6.011 5.977-6.004 15.642.014 21.627z"
/>
</svg>
More icons in the same style and category