PT Image Collection

Open Source animated SVG icons

SVG Loading Icon

Circle

SVG Loading Icon - Circle 001 SVG Loading Icon - Circle 002 SVG Loading Icon - Circle 003 SVG Loading Icon - Circle 004 SVG Loading Icon - Circle 005 SVG Loading Icon - Circle 006 SVG Loading Icon - Circle 007 SVG Loading Icon - Circle 008 SVG Loading Icon - Circle 009 SVG Loading Icon - Circle 010 SVG Loading Icon - Circle 011 SVG Loading Icon - Circle 012

Select an image to view the svg source code.

Bar

SVG Loading Icon - Bar 001 SVG Loading Icon - Bar 002 SVG Loading Icon - Bar 003 SVG Loading Icon - Bar 004 SVG Loading Icon - Bar 005 SVG Loading Icon - Bar 006 SVG Loading Icon - Bar 007 SVG Loading Icon - Bar 008 SVG Loading Icon - Bar 009 SVG Loading Icon - Bar 010 SVG Loading Icon - Bar 011

Select an image to view the svg source code.

Polygon

SVG Loading Icon - Polygon 001 SVG Loading Icon - Polygon 002 SVG Loading Icon - Polygon 003 SVG Loading Icon - Polygon 004 SVG Loading Icon - Polygon 005 SVG Loading Icon - Polygon 006 SVG Loading Icon - Polygon 007

Select an image to view the svg source code.

Misc.

SVG Loading Icon - Misc 001 SVG Loading Icon - Misc 002 SVG Loading Icon - Misc 003 SVG Loading Icon - Misc 004 SVG Loading Icon - Misc 005 SVG Loading Icon - Misc 006 SVG Loading Icon - Misc 007

Select an image to view the svg source code.

Text

SVG Loading Icon - Text 001 SVG Loading Icon - Text 002 SVG Loading Icon - Text 003 SVG Loading Icon - Text 004 SVG Loading Icon - Text 005

Select an image to view the svg source code.

Download Close

HOW TO USE

  1. Select an image and click it to open a source code viewer.
  2. Click a download button on the source code viewer to download the image file.
  3. Place the downloaded image file on your web server.
  4. Load the placed image file in your web page like
    <img src="placed.svg"> (In HTML),
    <object type="image/svg+xml" data="placed.svg"></object> (In HTML),
    #foo { background-image: url("placed.svg"); } (In CSS), etc.

You can also write the SVG source code directly into HTML as inline SVG.

IMPORTANT NOTE: Please do not load the image files directly from this website, as the URL may change.

CUSTOMIZE

Changing the SVG icon color

  1. Open the downloaded SVG file with a text editor and so on.
  2. Edit properties where explained by the comments in the file.

SUPPORTED BROWSER

The SVG images have been verified to be available in the latest Chrome, Firefox, and Safari.

SVG REFERENCES

UTILITY FOR WRITING SVG SOURCE CODE