Add icons to this collection by clicking the heart icon.
Loading icon - also known as interface, web, circle, waiting, loading, progress, download, load, and ui. 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="a">
<stop offset="0" stop-color="#7546d7" />
<stop offset=".371" stop-color="#ab93fc" />
<stop offset=".802" stop-color="#3bcaff" />
<stop offset="1" stop-color="#00bdea" />
</linearGradient>
<linearGradient
id="b"
x1="608.756"
x2="106.756"
y1="409.347"
y2="-101.653"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="c"
x1="403.056"
x2="-98.944"
y1="611.425"
y2="100.425"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="d"
x1="450.247"
x2="-51.753"
y1="565.064"
y2="54.064"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="e"
x1="640.692"
x2="138.693"
y1="377.973"
y2="-133.027"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="371.118"
x2="-130.882"
y1="642.799"
y2="131.799"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="370.108"
x2="-131.892"
y1="643.792"
y2="132.792"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="641.702"
x2="139.702"
y1="376.981"
y2="-134.019"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="447.843"
x2="-54.157"
y1="567.426"
y2="56.426"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="563.968"
x2="61.968"
y1="453.346"
y2="-57.654"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="k"
x1="652.661"
x2="150.661"
y1="366.216"
y2="-144.784"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="l"
x1="359.15"
x2="-142.85"
y1="654.557"
y2="143.557"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="m"
x1="504.602"
x2="2.602"
y1="511.667"
y2=".667"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="n"
x1="507.151"
x2="5.151"
y1="509.046"
y2="-1.954"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="o"
x1="401.212"
x2="-100.788"
y1="613.236"
y2="102.236"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="p"
x1="610.599"
x2="108.599"
y1="407.536"
y2="-103.464"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<path
fill="url(#b)"
d="M256 100.535c-7.159 0-12.961-5.804-12.961-12.961V12.961C243.039 5.804 248.841 0 256 0s12.961 5.804 12.961 12.961v74.613c0 7.157-5.802 12.961-12.961 12.961z"
/>
<path
fill="url(#c)"
d="M256 512c-7.159 0-12.961-5.804-12.961-12.961v-74.613c0-7.157 5.802-12.961 12.961-12.961s12.961 5.804 12.961 12.961v74.613c0 7.157-5.802 12.961-12.961 12.961z"
opacity=".52"
/>
<path
fill="url(#d)"
d="M347.85 493.98c-5.111 0-9.954-3.041-12.005-8.068l-28.196-69.08c-2.705-6.625.475-14.191 7.102-16.896 6.629-2.701 14.193.47 16.898 7.103l28.196 69.08c2.705 6.625-.475 14.191-7.102 16.896a12.932 12.932 0 0 1-4.893.965z"
opacity=".58"
/>
<path
fill="url(#e)"
d="M319.645 113.03c-1.632 0-3.29-.311-4.894-.966-6.627-2.705-9.807-10.271-7.102-16.896l28.196-69.08c2.705-6.636 10.271-9.811 16.898-7.103 6.627 2.705 9.807 10.271 7.102 16.896l-28.196 69.08c-2.05 5.028-6.894 8.069-12.004 8.069z"
opacity=".94"
/>
<path
fill="url(#f)"
d="M164.149 493.98c-1.632 0-3.29-.311-4.894-.966-6.627-2.705-9.807-10.271-7.102-16.896l28.197-69.08c2.705-6.636 10.27-9.811 16.898-7.103 6.627 2.705 9.807 10.271 7.102 16.896l-28.197 69.08c-2.05 5.027-6.894 8.069-12.004 8.069z"
opacity=".46"
/>
<path
fill="url(#g)"
d="M30.99 360.81c-5.111 0-9.954-3.041-12.005-8.068-2.705-6.625.475-14.191 7.102-16.896l69.078-28.197c6.63-2.709 14.193.474 16.898 7.103 2.705 6.625-.475 14.191-7.102 16.896l-69.078 28.197a12.932 12.932 0 0 1-4.893.965z"
opacity=".36"
/>
<path
fill="url(#h)"
d="M411.94 205.316c-5.111 0-9.954-3.041-12.005-8.068-2.705-6.625.475-14.191 7.102-16.896l69.079-28.197c6.63-2.709 14.193.474 16.898 7.103 2.705 6.625-.475 14.191-7.102 16.896l-69.079 28.197a12.932 12.932 0 0 1-4.893.965z"
opacity=".82"
/>
<path
fill="url(#i)"
d="M100.059 205.316c-1.632 0-3.29-.311-4.894-.966l-69.078-28.197c-6.627-2.705-9.807-10.271-7.102-16.896 2.705-6.632 10.271-9.818 16.898-7.103l69.078 28.197c6.627 2.705 9.807 10.271 7.102 16.896-2.05 5.028-6.894 8.069-12.004 8.069z"
opacity=".24"
/>
<path
fill="url(#j)"
d="M481.01 360.81c-1.632 0-3.29-.311-4.894-.966l-69.079-28.197c-6.627-2.705-9.807-10.271-7.102-16.896 2.705-6.636 10.271-9.811 16.898-7.103l69.079 28.197c6.627 2.705 9.807 10.271 7.102 16.896-2.05 5.028-6.894 8.069-12.004 8.069z"
opacity=".7"
/>
<path
fill="url(#k)"
d="M375.095 149.866a12.921 12.921 0 0 1-9.165-3.797c-5.062-5.059-5.062-13.268 0-18.328l52.758-52.759c5.061-5.063 13.268-5.063 18.33 0 5.062 5.059 5.062 13.269 0 18.328l-52.758 52.759a12.917 12.917 0 0 1-9.165 3.797z"
opacity=".88"
/>
<path
fill="url(#l)"
d="M84.146 440.815a12.921 12.921 0 0 1-9.165-3.797c-5.062-5.059-5.062-13.268 0-18.328l52.758-52.759c5.061-5.063 13.268-5.063 18.33 0 5.062 5.059 5.062 13.268 0 18.328l-52.758 52.759a12.921 12.921 0 0 1-9.165 3.797z"
opacity=".4"
/>
<path
fill="url(#m)"
d="M136.904 149.866a12.921 12.921 0 0 1-9.165-3.797L74.981 93.31c-5.062-5.059-5.062-13.269 0-18.328s13.269-5.059 18.33 0l52.758 52.759c5.062 5.059 5.062 13.269 0 18.328a12.915 12.915 0 0 1-9.165 3.797z"
opacity=".18"
/>
<path
fill="url(#n)"
d="M427.853 440.815a12.921 12.921 0 0 1-9.165-3.797l-52.758-52.759c-5.062-5.059-5.062-13.268 0-18.328 5.062-5.063 13.269-5.059 18.33 0l52.758 52.759c5.062 5.059 5.062 13.269 0 18.328a12.923 12.923 0 0 1-9.165 3.797z"
opacity=".64"
/>
<path
fill="url(#o)"
d="M87.574 268.961H12.962C5.803 268.961.001 263.157.001 256s5.802-12.961 12.961-12.961h74.612c7.159 0 12.961 5.804 12.961 12.961s-5.802 12.961-12.961 12.961z"
opacity=".3"
/>
<path
fill="url(#p)"
d="M499.038 268.961h-74.612c-7.159 0-12.961-5.804-12.961-12.961s5.802-12.961 12.961-12.961h74.612c7.159 0 12.961 5.804 12.961 12.961s-5.802 12.961-12.961 12.961z"
opacity=".76"
/>
</svg>
More icons in the same style and category