Add icons to this collection by clicking the heart icon.
Hat icon - also known as hat, fashion, bucket, and clothes. 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="d"
x1="74.981"
x2="437.02"
y1="437.019"
y2="74.98"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#008a4c" />
<stop offset="1" stop-color="#d3ff33" />
</linearGradient>
<radialGradient
id="e"
cx="257.522"
cy="234.704"
r="284.495"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#008a4c" stop-opacity=".8" />
<stop offset=".022" stop-color="#098f4b" stop-opacity=".782" />
<stop offset=".164" stop-color="#3eac45" stop-opacity=".669" />
<stop offset=".306" stop-color="#6cc63f" stop-opacity=".555" />
<stop offset=".448" stop-color="#91da3b" stop-opacity=".442" />
<stop offset=".589" stop-color="#aeea37" stop-opacity=".329" />
<stop offset=".729" stop-color="#c2f635" stop-opacity=".217" />
<stop offset=".866" stop-color="#cffd33" stop-opacity=".107" />
<stop offset="1" stop-color="#d3ff33" stop-opacity="0" />
</radialGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#00aa45" />
<stop offset=".754" stop-color="#d3ff33" />
<stop offset="1" stop-color="#f9fcca" />
</linearGradient>
<linearGradient
id="f"
x1="-253.3"
x2="570.531"
y1="629.755"
y2="-194.076"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="-454.469"
x2="629.193"
y1="889.126"
y2="-194.535"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="-530.092"
x2="582.84"
y1="930.954"
y2="-181.977"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="-671.112"
x2="635.061"
y1="1151.927"
y2="-154.246"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="-167.573"
x2="633.921"
y1="638.511"
y2="-162.983"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="k"
x1="-156.795"
x2="627.8"
y1="804.435"
y2="19.841"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="l"
x1="-917.685"
x2="1005.15"
y1="1372.522"
y2="-550.313"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="m"
x1="-468.018"
x2="597.424"
y1="1082.975"
y2="17.534"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#006342" />
<stop offset=".251" stop-color="#008547" />
<stop offset=".342" stop-color="#128f45" />
<stop offset=".524" stop-color="#41aa41" />
<stop offset=".779" stop-color="#8cd63a" />
<stop offset="1" stop-color="#d3ff33" />
</linearGradient>
<linearGradient
id="n"
x1="-127.18"
x2="972.717"
y1="530.828"
y2="-569.069"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="o"
x1="-186.167"
x2="918.141"
y1="690.951"
y2="-413.357"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="p"
x1="-200.875"
x2="902.594"
y1="774.448"
y2="-329.022"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="q"
x1="123.749"
x2="434.771"
y1="281.188"
y2="-29.834"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset=".006" stop-color="#006342" stop-opacity="0" />
<stop offset="1" stop-color="#006342" />
</linearGradient>
<radialGradient
id="r"
cx="163.76"
cy="241.147"
r="35.441"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="s"
x1="297.379"
x2="609.493"
y1="291.97"
y2="-20.143"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<radialGradient
id="t"
cx="348.24"
cy="241.147"
r="31.903"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<circle cx="256" cy="256" r="256" fill="url(#d)" />
<circle cx="256" cy="256" r="256" fill="url(#e)" />
<path
fill="url(#f)"
d="M235.117 118.22c-24.841.077-49.682.294-74.522.649-14.271.212-27.144 10.694-30.612 24.954 54.783 14.413 110.596 29.769 166.779 45.254-20.855-23.636-41.594-47.312-61.645-70.857z"
/>
<path
fill="url(#g)"
d="M351.406 118.869c-38.763-.554-77.526-.77-116.289-.649-13.291.044-24.314 11.174-24.547 24.806a26156.801 26156.801 0 0 0 86.192 46.052c28.804-15.293 57.336-30.45 85.257-45.254-3.469-14.262-16.342-24.745-30.613-24.955z"
/>
<path
fill="url(#h)"
d="M210.569 143.026c-26.862.141-53.725.407-80.587.797-5.391 22.347-10.527 44.649-15.294 66.899 52.04 14.974 104.468 30.487 156.672 45.837-20.431-37.871-41.18-75.804-60.791-113.533z"
/>
<path
fill="url(#i)"
d="M382.018 143.823a8663.781 8663.781 0 0 0-171.448-.797 5891.423 5891.423 0 0 0-.649 113.506c62.404-15.273 125.112-30.877 187.392-45.809-4.768-22.25-9.904-44.553-15.295-66.9z"
/>
<path
fill="url(#j)"
d="M211.356 305.482c-44.764-.182-89.529-.636-134.293-1.363a2218.078 2218.078 0 0 0-13.407 17.585c-7.289 9.635.995 24.355 13.553 24.715a6690.117 6690.117 0 0 0 134.816 2.249 6098.01 6098.01 0 0 1-.669-43.186z"
/>
<path
fill="url(#k)"
d="M448.344 321.704c-4.403-5.837-8.875-11.7-13.407-17.585a11012.468 11012.468 0 0 1-232.618 1.323 3068.963 3068.963 0 0 0-5.321 24.193c-2.063 9.626 5.345 18.967 15.028 19.033 74.255.489 148.51-.26 222.765-2.249 12.557-.359 20.842-15.079 13.553-24.715z"
/>
<path
fill="url(#l)"
d="M102.667 271.375a2999.119 2999.119 0 0 0-25.603 32.745c-3.75 4.863.214 12.226 6.573 12.349 38.64.714 77.28 1.189 115.919 1.423 35.972-30.467 73.3-61.39 110.252-92.066-69.158 15.312-138.475 30.903-207.141 45.549z"
/>
<path
fill="url(#m)"
d="M434.937 304.119a3008.77 3008.77 0 0 0-25.603-32.745c-32.889-14.907-66.195-30.185-99.527-45.55-33.286 15.33-66.684 30.779-99.807 46.061a3705.216 3705.216 0 0 0-10.445 46.006c76.27.462 152.54-.013 228.809-1.423 6.359-.122 10.323-7.486 6.573-12.349z"
/>
<path
fill="url(#n)"
d="M114.688 210.723c-4.341 20.263-8.377 40.482-12.021 60.652 35.778.262 71.556.433 107.333.511-.133-20.472-.16-40.945-.08-61.417-31.744.041-63.488.125-95.232.254z"
/>
<path
fill="url(#o)"
d="M256 210.438c-15.36 0-30.72.01-46.08.031-.08 20.472-.053 40.945.08 61.417 35.778.079 71.556.065 107.333-.039-20.266-20.393-40.853-40.91-61.333-61.409z"
/>
<path
fill="url(#p)"
d="M397.312 210.723c4.341 20.263 8.377 40.482 12.021 60.652-30.667.225-61.333.382-92 .472-16.944.053-32.235-6.805-43.338-17.922-11.099-11.115-17.999-26.493-17.995-43.487 47.104 0 94.208.095 141.312.285z"
/>
<path
fill="url(#q)"
d="M179.133 241.159c.016 8.464-6.812 15.307-15.293 15.282-8.48-.026-15.427-6.88-15.453-15.309-.026-8.427 6.885-15.268 15.373-15.28 8.49-.009 15.354 6.846 15.373 15.307z"
/>
<path
fill="url(#r)"
d="M179.133 241.159c.016 8.464-6.812 15.307-15.293 15.282-8.48-.026-15.427-6.88-15.453-15.309-.026-8.427 6.885-15.268 15.373-15.28 8.49-.009 15.354 6.846 15.373 15.307z"
/>
<path
fill="url(#s)"
d="M363.613 241.133c-.027 8.426-6.973 15.281-15.453 15.309a15.224 15.224 0 0 1-15.293-15.282c.019-8.464 6.883-15.317 15.373-15.306 8.489.009 15.4 6.85 15.373 15.279z"
/>
<path
fill="url(#t)"
d="M363.613 241.133c-.027 8.426-6.973 15.281-15.453 15.309a15.224 15.224 0 0 1-15.293-15.282c.019-8.464 6.883-15.317 15.373-15.306 8.489.009 15.4 6.85 15.373 15.279z"
/>
</svg>
More icons in the same style and category