Loading Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Collection

Carbon Icons

Format

SVG, React, Angular, Vue, Web Component, PNG

License

Apache-2.0 - Free for commercial use

Tags

loading spinner wait progress sync

The Loading icon is commonly used in loading states, skeleton screens and async content. Available as a free SVG - copy the code or download directly.

<img src="https://proicons.com/icon/321069.svg" alt="Loading icon" width="24" height="24">

<img src="https://proicons.com/icon/321069.svg" alt="Loading icon" width={24} height={24} />

<img
  src="https://proicons.com/icon/321069.svg"
  alt="Loading icon"
  :width="24"
  :height="24"
/>

.icon-loading {
  background-image: url('https://proicons.com/icon/321069.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>loading</title>
    <g id="loading" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval-2" stroke="#DCDCDC" stroke-width="10.8" cx="160" cy="90" r="23.6"></circle>
        <path d="M160,114 C173.254834,114 184,103.254834 184,90 C184,76.745166 173.254834,66 160,66 C146.745166,66 136,76.745166 136,90" id="Oval-2" stroke="#0062FF" stroke-width="10.8"></path>
    </g>
</svg>