Add icons to this collection by clicking the heart icon.
Football icon - also known as ball, game, football, soccer, sports and competition, and sport equipment. 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 64 64"
>
<linearGradient
id="e"
x1="17.498"
x2="46.502"
y1="6.881"
y2="57.119"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da6dff" />
<stop offset="1" stop-color="#5f2ade" />
</linearGradient>
<linearGradient
id="f"
x1="32"
x2="32"
y1="3"
y2="61"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da6dff" stop-opacity="0" />
<stop offset=".148" stop-color="#d66bfb" stop-opacity=".104" />
<stop offset=".302" stop-color="#c964f1" stop-opacity=".212" />
<stop offset=".459" stop-color="#b55adf" stop-opacity=".321" />
<stop offset=".617" stop-color="#984bc7" stop-opacity=".432" />
<stop offset=".776" stop-color="#7237a7" stop-opacity=".543" />
<stop offset=".934" stop-color="#452081" stop-opacity=".654" />
<stop offset="1" stop-color="#30156f" stop-opacity=".7" />
</linearGradient>
<linearGradient
id="g"
x1="32"
x2="32"
y1="61"
y2="3"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#da6dff" stop-opacity="0" />
<stop offset=".258" stop-color="#d76cfd" stop-opacity=".103" />
<stop offset=".413" stop-color="#cf67f6" stop-opacity=".165" />
<stop offset=".541" stop-color="#c160ea" stop-opacity=".216" />
<stop offset=".654" stop-color="#ac55d8" stop-opacity=".262" />
<stop offset=".758" stop-color="#9248c2" stop-opacity=".303" />
<stop offset=".854" stop-color="#7237a7" stop-opacity=".342" />
<stop offset=".943" stop-color="#4c2487" stop-opacity=".377" />
<stop offset="1" stop-color="#30156f" stop-opacity=".4" />
</linearGradient>
<radialGradient
id="h"
cx="32"
cy="32"
r="29"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#af95ef" stop-opacity=".7" />
<stop offset=".147" stop-color="#a78ce8" stop-opacity=".597" />
<stop offset=".386" stop-color="#9074d6" stop-opacity=".43" />
<stop offset=".689" stop-color="#6b4cb8" stop-opacity=".218" />
<stop offset="1" stop-color="#3f1c94" stop-opacity="0" />
</radialGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#f8ecc6" />
<stop offset="1" stop-color="#eac653" />
</linearGradient>
<linearGradient
id="i"
x1="16.686"
x2="28.793"
y1="7.324"
y2="28.295"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient id="b">
<stop offset="0" stop-color="#fdff51" />
<stop offset="1" stop-color="#f6d546" />
</linearGradient>
<linearGradient
id="j"
x1="16.129"
x2="18.887"
y1="7.664"
y2="12.442"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="k"
x1="38.362"
x2="44.252"
y1="12.719"
y2="22.921"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="l"
x1="44.115"
x2="50.073"
y1="3.625"
y2="13.945"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="m"
x1="44.807"
x2="51.943"
y1="25.773"
y2="38.133"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="56.602"
x2="62.616"
y1="26.273"
y2="36.689"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="o"
x1="12.014"
x2="19.235"
y1="25.699"
y2="38.206"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="p"
x1="1.476"
x2="7.179"
y1="26.322"
y2="36.202"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="q"
x1="14.897"
x2="30.581"
y1="46.19"
y2="46.19"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="r"
x1="13.971"
x2="19.936"
y1="50.064"
y2="60.395"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="s"
x1="35.261"
x2="47.351"
y1="35.711"
y2="56.651"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="t"
x1="45.174"
x2="47.915"
y1="51.558"
y2="56.305"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient id="c">
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".222" stop-color="#fafb50" stop-opacity=".155" />
<stop offset=".451" stop-color="#f3ee4c" stop-opacity=".316" />
<stop offset=".684" stop-color="#e6da46" stop-opacity=".479" />
<stop offset=".919" stop-color="#d4bd3d" stop-opacity=".643" />
<stop offset="1" stop-color="#cdb13a" stop-opacity=".7" />
</linearGradient>
<linearGradient
id="u"
x1="19.203"
x2="16.069"
y1="12.221"
y2="7.745"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="v"
x1="44.858"
x2="47.972"
y1="12.222"
y2="7.774"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient id="d">
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".203" stop-color="#f7f64e" stop-opacity=".142" />
<stop offset=".534" stop-color="#e9de47" stop-opacity=".374" />
<stop offset=".949" stop-color="#d0b63c" stop-opacity=".664" />
<stop offset="1" stop-color="#cdb13a" stop-opacity=".7" />
</linearGradient>
<linearGradient
id="w"
x1="55.57"
x2="61"
y1="31.48"
y2="31.48"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="x"
x1="3"
x2="8.43"
y1="31.48"
y2="31.48"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#cdb13a" stop-opacity=".7" />
<stop offset=".081" stop-color="#d4bd3d" stop-opacity=".643" />
<stop offset=".316" stop-color="#e6da46" stop-opacity=".479" />
<stop offset=".549" stop-color="#f3ee4c" stop-opacity=".316" />
<stop offset=".778" stop-color="#fafb50" stop-opacity=".155" />
<stop offset="1" stop-color="#fdff51" stop-opacity="0" />
</linearGradient>
<linearGradient
id="y"
x1="18.887"
x2="16.129"
y1="51.558"
y2="56.336"
gradientUnits="userSpaceOnUse"
href="#c"
/>
<linearGradient
id="z"
x1="44.858"
x2="47.972"
y1="51.778"
y2="56.226"
gradientUnits="userSpaceOnUse"
href="#d"
/>
<linearGradient
id="A"
x1="28.247"
x2="35.753"
y1="25.5"
y2="38.5"
gradientUnits="userSpaceOnUse"
href="#b"
/>
<linearGradient
id="B"
x1="32"
x2="32"
y1="25.5"
y2="38.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fdff51" stop-opacity="0" />
<stop offset=".203" stop-color="#f7f64e" stop-opacity=".203" />
<stop offset=".534" stop-color="#e9de47" stop-opacity=".534" />
<stop offset=".949" stop-color="#d0b63c" stop-opacity=".949" />
<stop offset="1" stop-color="#cdb13a" />
</linearGradient>
<circle cx="32" cy="32" r="29" fill="url(#e)" />
<circle cx="32" cy="32" r="29" fill="url(#f)" />
<circle cx="32" cy="32" r="29" fill="url(#g)" />
<circle cx="32" cy="32" r="29" fill="url(#h)" />
<path
fill="url(#i)"
d="M28.956 28.201 14.896 8.582l1.627-1.164 14.058 19.618z"
/>
<path
fill="url(#j)"
d="m22.64 5.94-3.75 6.5h-7.51l-.3-.52c1.4-1.46 2.95-2.78 4.63-3.92 1.93-1.32 4.03-2.4 6.26-3.22z"
/>
<path
fill="url(#k)"
d="m35.106 28.201-1.627-1.164L47.507 7.439l1.627 1.162z"
/>
<path
fill="url(#l)"
d="m52.96 11.96-.28.48h-7.51v-.01l-3.75-6.49.66-1.14c2.22.82 4.31 1.91 6.24 3.22a29.13 29.13 0 0 1 4.64 3.94z"
/>
<path fill="url(#m)" d="m35.754 33.004-.008-2 25.248-.104.012 2z" />
<path
fill="url(#n)"
d="M61 31.9v.1c0 2.05-.21 4.05-.62 5.98l-.41.04-4.4-6.09 3.08-6.84 1.48-.15c.56 2.23.86 4.56.87 6.96z"
/>
<path fill="url(#o)" d="M28.246 33.004 2.994 32.9l.012-2 25.248.104z" />
<path
fill="url(#p)"
d="m8.43 31.93-4.4 6.09-.41-.04A28.75 28.75 0 0 1 3 32v-.1c.01-2.4.31-4.73.87-6.96l1.48.15z"
/>
<path
fill="url(#q)"
d="m16.523 56.582-1.627-1.164 14.06-19.619 1.625 1.166z"
/>
<path
fill="url(#r)"
d="m22.64 58.06-.67 1.16c-2.23-.82-4.33-1.9-6.26-3.22a28.935 28.935 0 0 1-4.63-3.92l.3-.52h7.51z"
/>
<path
fill="url(#s)"
d="M47.507 56.562 33.479 36.964l1.627-1.164 14.028 19.599z"
/>
<path
fill="url(#t)"
d="M52.96 52.04a29.13 29.13 0 0 1-4.64 3.94 29.02 29.02 0 0 1-6.24 3.22l-.66-1.14 3.75-6.49v-.01h7.51z"
/>
<path
fill="url(#u)"
d="m22.64 5.94-3.75 6.5h-7.51l-.3-.52c1.4-1.46 2.95-2.78 4.63-3.92 1.93-1.32 4.03-2.4 6.26-3.22z"
/>
<path
fill="url(#v)"
d="m52.96 11.96-.28.48h-7.51v-.01l-3.75-6.49.66-1.14c2.22.82 4.31 1.91 6.24 3.22a29.13 29.13 0 0 1 4.64 3.94z"
/>
<path
fill="url(#w)"
d="M61 31.9v.1c0 2.05-.21 4.05-.62 5.98l-.41.04-4.4-6.09 3.08-6.84 1.48-.15c.56 2.23.86 4.56.87 6.96z"
/>
<path
fill="url(#x)"
d="m8.43 31.93-4.4 6.09-.41-.04A28.75 28.75 0 0 1 3 32v-.1c.01-2.4.31-4.73.87-6.96l1.48.15z"
/>
<path
fill="url(#y)"
d="m22.64 58.06-.67 1.16c-2.23-.82-4.33-1.9-6.26-3.22a28.935 28.935 0 0 1-4.63-3.92l.3-.52h7.51z"
/>
<path
fill="url(#z)"
d="M52.96 52.04a29.13 29.13 0 0 1-4.64 3.94 29.02 29.02 0 0 1-6.24 3.22l-.66-1.14 3.75-6.49v-.01h7.51z"
/>
<path
fill="url(#A)"
d="M35.753 25.5h-7.506L24.494 32l3.753 6.5h7.506l3.753-6.5z"
/>
<path
fill="url(#B)"
d="M35.753 25.5h-7.506L24.494 32l3.753 6.5h7.506l3.753-6.5z"
/>
</svg>
More icons in the same style and category