Add icons to this collection by clicking the heart icon.
Hat Pin icon - also known as pin, fashion, gem, and hat pin. 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="c"
x1="74.981"
x2="437.02"
y1="437.019"
y2="74.98"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#230be0" />
<stop offset="1" stop-color="#fc54ff" />
</linearGradient>
<radialGradient
id="d"
cx="331.043"
cy="181.971"
r="363.311"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#8d00db" stop-opacity=".6" />
<stop offset=".12" stop-color="#ac18e5" stop-opacity=".528" />
<stop offset=".259" stop-color="#c92eef" stop-opacity=".445" />
<stop offset=".408" stop-color="#e03ff6" stop-opacity=".355" />
<stop offset=".57" stop-color="#f04bfb" stop-opacity=".258" />
<stop offset=".752" stop-color="#f952fe" stop-opacity=".149" />
<stop offset="1" stop-color="#fc54ff" stop-opacity="0" />
</radialGradient>
<linearGradient id="a">
<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="e"
x1="256"
x2="256"
y1="545.71"
y2="-47.128"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="256"
x2="256"
y1="718.653"
y2="-71.543"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="256"
x2="256"
y1="441.483"
y2="196.816"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".135" stop-color="#fc54ff" stop-opacity="0" />
<stop offset=".516" stop-color="#fa53fe" stop-opacity=".352" />
<stop offset=".653" stop-color="#f34dfc" stop-opacity=".479" />
<stop offset=".751" stop-color="#e844f8" stop-opacity=".57" />
<stop offset=".83" stop-color="#d738f3" stop-opacity=".643" />
<stop offset=".898" stop-color="#c127ec" stop-opacity=".706" />
<stop offset=".957" stop-color="#a613e3" stop-opacity=".76" />
<stop offset="1" stop-color="#8d00db" stop-opacity=".8" />
</linearGradient>
<linearGradient
id="h"
x1="263.695"
x2="263.695"
y1="268.913"
y2="-59.917"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="244.456"
x2="244.456"
y1="323.556"
y2="-5.274"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="279.053"
x2="279.053"
y1="368.985"
y2="179.097"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="k"
x1="244.479"
x2="244.479"
y1="482.35"
y2="181.387"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="l"
x1="262.107"
x2="589.888"
y1="249.893"
y2="-77.888"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="m"
x1="364.948"
x2="453.443"
y1="147.054"
y2="58.558"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="-68.095"
x2="411.024"
y1="580.096"
y2="100.976"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#0056e0" />
<stop offset="1" stop-color="#fc54ff" />
</linearGradient>
<linearGradient
id="o"
x1="256"
x2="256"
y1="378.491"
y2="33.769"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="p"
x1="65.308"
x2="577.66"
y1="309.393"
y2="-156.068"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="q"
x1="57.137"
x2="566.96"
y1="298.566"
y2="-164.598"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="r"
x1="86.419"
x2="599.964"
y1="333.03"
y2="-133.515"
gradientTransform="rotate(45 256.066 255.972)"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="s"
x1="256"
x2="256"
y1="384.426"
y2="115.547"
gradientTransform="rotate(45 256.066 255.972)"
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="M137.136 363.846c-10.445 10.418-20.77 20.712-30.94 30.847-2.81 2.798-2.577 7.54.497 10.614 3.075 3.074 7.816 3.307 10.614.497 10.135-10.17 20.429-20.494 30.847-30.94-3.668-3.677-7.341-7.35-11.018-11.018z"
/>
<path
fill="url(#f)"
d="M314.401 186.687a129262.173 129262.173 0 0 1-177.265 177.159c-2.886 2.876-2.74 7.664.307 10.711 3.048 3.047 7.835 3.193 10.711.307a129262.173 129262.173 0 0 1 177.159-177.265 14032.74 14032.74 0 0 1-10.912-10.912z"
/>
<path
fill="url(#g)"
d="M314.401 186.687a129262.173 129262.173 0 0 1-177.265 177.159c-2.886 2.876-2.74 7.664.307 10.711 3.048 3.047 7.835 3.193 10.711.307a129262.173 129262.173 0 0 1 177.159-177.265 14032.74 14032.74 0 0 1-10.912-10.912z"
/>
<path
fill="url(#h)"
d="M294.719 260.757a47737.51 47737.51 0 0 1-32.616-32.606c9.052-9.058 18.091-18.108 27.097-27.13 10.877 10.897 21.78 21.79 32.675 32.646a32869.788 32869.788 0 0 0-27.156 27.09z"
/>
<path
fill="url(#i)"
d="M278.412 244.462c-9.062-9.06-18.125-18.127-27.168-27.181a32873.58 32873.58 0 0 0 27.09-27.156c9.047 9.079 18.119 18.164 27.198 27.234-9.018 9.01-18.065 18.05-27.12 27.103z"
/>
<path
fill="url(#j)"
d="M300.157 255.327a41715.933 41715.933 0 0 1-16.313-16.295l-10.866 10.863c5.436 5.435 10.872 10.868 16.303 16.295 2.999 2.997 7.865 2.99 10.87-.01s3.008-7.856.006-10.853z"
/>
<path
fill="url(#k)"
d="M283.849 249.897a7.678 7.678 0 0 0-.005-10.865c-9.065-9.061-18.128-18.13-27.171-27.189-2.997-3.002-7.853-2.999-10.853.006s-3.007 7.871-.01 10.87a77308.04 77308.04 0 0 0 27.167 27.176 7.69 7.69 0 0 0 10.872.002z"
/>
<path
fill="url(#l)"
d="M389.29 99.168c-12.41-.545-22.121 9.312-21.763 21.903.363 12.595 10.807 23.039 23.402 23.402 12.592.358 22.448-9.353 21.904-21.763-.546-12.407-11.136-22.997-23.543-23.542z"
/>
<path
fill="url(#m)"
d="M398.011 129.636c-12.551-.439-23.012-10.918-23.445-23.492a23.315 23.315 0 0 1 .015-1.853c-4.505 3.995-7.255 9.994-7.054 16.78.363 12.595 10.807 23.039 23.402 23.402 11.963.343 21.455-8.416 21.9-19.93-3.852 3.354-9.042 5.3-14.818 5.093z"
/>
<path
fill="url(#n)"
d="M393.528 180.587c.714 33.24-26.809 60.19-60.768 60.213-33.968-.039-61.52-27.591-61.559-61.559.023-33.958 26.973-61.482 60.213-60.768 33.23.757 61.356 28.883 62.114 62.114z"
/>
<path
fill="url(#o)"
d="M365.202 212.318c11.953-11.832 15.64-28.564 11.241-43.818a7104.971 7104.971 0 0 1-32.942-32.942c-15.254-4.399-31.986-.712-43.818 11.241a7452.368 7452.368 0 0 1-11.574 44.422 46.178 46.178 0 0 0 11.976 20.696 46.173 46.173 0 0 0 20.696 11.976 7283.224 7283.224 0 0 1 44.421-11.575z"
/>
<path
fill="url(#p)"
d="M288.108 191.22c14.777-3.92 29.531-7.79 44.256-11.584a9714.192 9714.192 0 0 1-32.682-32.838c-11.825 11.948-15.722 29.037-11.574 44.422z"
/>
<path
fill="url(#q)"
d="M364.176 147.824c-6.01-6.009-13.166-10.107-20.675-12.267a4546 4546 0 0 1-11.137 44.079 4560.431 4560.431 0 0 1 44.079-11.137c-2.161-7.508-6.258-14.665-12.267-20.675z"
/>
<path
fill="url(#r)"
d="M332.364 179.636a6473.676 6473.676 0 0 1-11.584 44.256c15.384 4.148 32.474.251 44.422-11.574a9808.582 9808.582 0 0 1-32.838-32.682z"
/>
<path
fill="url(#s)"
d="M353.168 174.322a8378.437 8378.437 0 0 1-15.49-15.49 4661.779 4661.779 0 0 0-20.751 5.332 6127.437 6127.437 0 0 1-5.406 20.885 11814.14 11814.14 0 0 0 15.43 15.43 6127.437 6127.437 0 0 1 20.885-5.406 4661.779 4661.779 0 0 0 5.332-20.751z"
/>
</svg>
More icons in the same style and category