Add icons to this collection by clicking the heart icon.
Hat icon - also known as hat, summer, fashion, woman, beach, Pamela, and highlight stories. Created in a clean color 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 510 510"
>
<linearGradient
id="d"
x1="247.16"
x2="348.863"
y1="292.007"
y2="496.684"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#cdec7a" />
<stop offset=".216" stop-color="#b0e995" />
<stop offset=".561" stop-color="#87e4bb" />
<stop offset=".835" stop-color="#6ee1d2" />
<stop offset="1" stop-color="#65e0db" />
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#cdec7a" stop-opacity="0" />
<stop offset=".235" stop-color="#9ad57d" stop-opacity=".235" />
<stop offset=".604" stop-color="#51b482" stop-opacity=".604" />
<stop offset=".868" stop-color="#239f85" stop-opacity=".868" />
<stop offset="1" stop-color="#119786" />
</linearGradient>
<linearGradient
id="e"
x1="319.515"
x2="327.461"
y1="455.935"
y2="418.75"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="362.696"
x2="362.696"
y1="388.715"
y2="417.638"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="436.197"
x2="436.197"
y1="355.979"
y2="326.267"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="98.592"
x2="98.592"
y1="386.49"
y2="333.698"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="425.08"
x2="390.755"
y1="321.395"
y2="251.475"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffa936" />
<stop offset=".411" stop-color="#ff8548" />
<stop offset=".778" stop-color="#ff6c54" />
<stop offset="1" stop-color="#ff6359" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="#ffd945" />
<stop offset=".304" stop-color="#ffcd3e" />
<stop offset=".856" stop-color="#ffad2b" />
<stop offset="1" stop-color="#ffa325" />
</linearGradient>
<linearGradient
id="j"
x1="222.165"
x2="278.102"
y1="146.664"
y2="357.698"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#f82814" stop-opacity="0" />
<stop offset="1" stop-color="#c0272d" />
</linearGradient>
<linearGradient
id="k"
x1="323.741"
x2="281.365"
y1="317.297"
y2="75.752"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="l"
x1="221.689"
x2="281.352"
y1="40.658"
y2="265.753"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="m"
x1="243.097"
x2="364.02"
y1="100.879"
y2="765.241"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="n"
x1="245.015"
x2="363.631"
y1="100.304"
y2="751.995"
gradientTransform="matrix(-1 0 0 1 510 0)"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="o"
x1="248.2"
x2="279.982"
y1="149.009"
y2="237.999"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#18cefb" />
<stop offset=".297" stop-color="#2bb9f9" />
<stop offset=".735" stop-color="#42a0f7" />
<stop offset="1" stop-color="#4a97f6" />
</linearGradient>
<path
fill="url(#d)"
d="M279.978 479.292h-69.28c-70.789 0-128.381-57.591-128.381-128.38v-32.664a9.535 9.535 0 0 1 19.07 0v32.664c0 60.274 49.037 109.311 109.311 109.311h69.28c23.338 0 44.241-10.617 58.135-27.277-4.127.402-8.307.607-12.537.607-27.017 0-49.013-21.913-49.149-48.898l-.001-.111v-.14l.001-.111c.137-26.986 22.132-48.899 49.149-48.899 27.101 0 49.15 22.049 49.15 49.15 0 6.585-.674 13.011-1.959 19.22 36.715-17.644 62.12-55.207 62.12-98.591v-15.512a9.535 9.535 0 0 1 19.07 0v15.512c0 57.266-37.694 105.895-89.569 122.385-15.701 30.682-47.644 51.734-84.41 51.734zm15.517-94.818c.038 16.554 13.517 30.01 30.081 30.01 8.631 0 17.032-1.006 25.091-2.906a75.283 75.283 0 0 0 4.99-27.034c0-16.586-13.494-30.081-30.081-30.081-16.564.001-30.043 13.457-30.081 30.011z"
/>
<path
fill="url(#e)"
d="M279.978 460.223h-.187v19.069h.187c36.766 0 68.71-21.053 84.41-51.733-15.199 3.884-26.275 5.387-26.275 5.387-13.894 16.66-34.798 27.277-58.135 27.277z"
/>
<path
fill="url(#f)"
d="M372.766 403.765a94.743 94.743 0 0 0 1.959-19.22c0-3.813-.451-7.52-1.276-11.085H353.53a29.914 29.914 0 0 1 2.126 11.085c0 9.52-1.767 18.635-4.99 27.034 11.761-2.245 22.1-7.814 22.1-7.814z"
/>
<path
fill="url(#g)"
d="M444.422 280.127a9.535 9.535 0 0 0-9.535 9.535v15.512c0 21.12-6.034 40.851-16.449 57.586h21.836a127.553 127.553 0 0 0 13.683-57.586v-15.512c-.001-5.266-4.27-9.535-9.535-9.535z"
/>
<path
fill="url(#h)"
d="M101.386 350.912v-32.664a9.535 9.535 0 0 0-19.07 0v32.664c0 18.704 4.024 36.485 11.246 52.528h21.305c-8.584-15.598-13.481-33.5-13.481-52.528z"
/>
<ellipse
cx="400.243"
cy="270.803"
fill="url(#i)"
rx="109.757"
ry="60.577"
/>
<path
fill="url(#j)"
d="M510 270.803c-55.187-35.636-127.514-29.304-175.669 15.379-56.876 52.775-134.8 77.069-211.435 64.932C49.223 339.446 0 314.887 0 270.803c0-67.138 114.167-121.564 255-121.564s255 54.426 255 121.564z"
/>
<path
fill="url(#k)"
d="M509.994 270.803c-55.187-35.634-127.51-29.303-175.666 15.383-24.587 22.807-53.089 40.287-83.727 51.818L111.65 199.051l-.231-.211c-10.359-9.527-6.204-26.72 7.269-30.788a378.41 378.41 0 0 1 11.358-3.236c36.931-9.916 79.557-15.573 124.955-15.573s88.024 5.657 124.955 15.573c25.782 6.916 48.779 15.917 68.001 26.519 29.532 16.272 50.152 36.346 58.238 58.454 2.503 6.826 3.799 13.844 3.799 21.014z"
/>
<path
fill="url(#l)"
d="M406.283 173.221c0 78.708-302.566 78.708-302.566 0S171.449 30.708 255 30.708s151.283 63.805 151.283 142.513z"
/>
<path
fill="url(#m)"
d="M357.974 173.221c0 78.708-205.948 78.708-205.948 0S198.129 30.708 255 30.708s102.974 63.805 102.974 142.513z"
/>
<path
fill="url(#n)"
d="M219.513 173.221c0 78.708 70.973 78.708 70.973 0S274.599 30.708 255 30.708s-35.487 63.805-35.487 142.513z"
/>
<path
fill="url(#o)"
d="M110.647 151.69c-3.887-3.717-10.293-1.482-10.954 3.854a139.654 139.654 0 0 0-1.061 17.202c0 81.353 312.736 81.353 312.736 0 0-5.82-.361-11.559-1.061-17.202-.662-5.337-7.068-7.571-10.954-3.854-49.7 47.52-239.006 47.52-288.706 0z"
/>
</svg>
More icons in the same style and category