Add icons to this collection by clicking the heart icon.
Hat icon - also known as hat, fashion, chinese, oriental, asian, clothing, cap, and accessory. 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 32 32"
>
    <linearGradient id="a">
        <stop offset="0" stop-color="#42a5f5" />
        <stop offset="1" stop-color="#1e88e5" />
    </linearGradient>
    <linearGradient
        id="c"
        x1="13"
        x2="19"
        y1="4"
        y2="4"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient id="b">
        <stop offset="0" stop-color="#bbdefb" />
        <stop offset="1" stop-color="#64b5f6" />
    </linearGradient>
    <linearGradient
        id="d"
        x1="2"
        x2="30"
        y1="14"
        y2="14"
        gradientUnits="userSpaceOnUse"
        href="#b"
    />
    <linearGradient
        id="e"
        x1="9"
        x2="23"
        y1="14"
        y2="14"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="f"
        x1="1"
        x2="31"
        y1="26"
        y2="26"
        gradientUnits="userSpaceOnUse"
        href="#a"
    />
    <linearGradient
        id="g"
        x1="14"
        x2="18"
        y1="26"
        y2="26"
        gradientUnits="userSpaceOnUse"
        href="#b"
    />
    <circle cx="16" cy="4" r="3" fill="url(#c)" />
    <path
        fill="url(#d)"
        d="M16 5C8.28 5 2 11.28 2 19v3a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-3c0-7.72-6.28-14-14-14z"
    />
    <path
        fill="url(#e)"
        d="M23 19v3c0 .55-.45 1-1 1s-1-.45-1-1v-3c0-7.2-2.74-13-5-13s-5 5.8-5 13v3c0 .55-.45 1-1 1s-1-.45-1-1v-3c0-5.43 1.52-11.2 4.12-13.71C14.05 5.1 15.01 5 16 5s1.95.1 2.88.29C21.48 7.8 23 13.57 23 19z"
    />
    <path
        fill="url(#f)"
        d="M30 21H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h28a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1z"
    />
    <circle cx="16" cy="26" r="2" fill="url(#g)" />
</svg>
More icons in the same style and category