Animate Your Icon into GIF

make animated icons from your uploaded images into GIF, SVG or PNG Sequence formats

for mobile users:
please use this tool in desktop.
Draggable
upload 
Button
Font
Yes
No
...
Load More
Red
Green
Blue
Hue
Saturation
Luminance
Hue
Chroma
Luminance

Use This Palette
Save as Asset
Undo
Go Pro to Unlock All
go Pro to unlock all fonts
Upgrade Now
need larger GIF or PNG sequence?
Subscribe Pro Plan
unlimited icons + advanced features

learn more about pricing & features
... or try with these sample SVGs
samplesamplesamplesamplesample
Click!
sample
samplesamplesamplesamplesamplesample

About This Tool

This tool is loading.io's animated image builder that helps you quickly make simple animations from your own image with custom design. It's a simplified version of our upcoming animation editor, which allows you to do layered animation and export animated SVG format.

We also provide a set of css loading animations loading.css for animating images directly in your website. loading.css contains 50+ seamless looping animations along with 7 simple spinner with pure css, and is quite handy when you want some simple appealing animation.

loading.css is quite easy to use. Following is an example of spinner using loading.css:

<span class="ld ld-ring ld-spin" ></span>

While it's quite easy to use, you may still want to use a generator when you need more complicated animations or alternative image format. And that's how this tool can help you.

Why GIF?

For now, GIF is the format with the best compatibility across browsers.

CSS animation is widely supported in various browsers nowaday, yet some older browsers still don't support CSS animation. Furhtermore, CSS-based animation usually needs special care for both its CSS and HTML/SVG part.

However, image quality of GIF usually isn't as good as SVG. Newer formats such as APNG, WebM and animated SVG provide better image quality, but none of them are supported by older browsers.

Why GIF from my images are blurry?

Uploaded images are resized by the size you specified in the editor, which makes the generated GIF blurry. Try using SVG instead of PNG or JPG for better result. Turning on "smoothing" option may also help.

There are jaggy strokes around GIF?

GIF by its nature can't do well with both transparency and curve edges. It's because GIF doesn't support alpha channel - like opacity with gradient - thus every pixel in GIF is either opaque or completely transparent.

Following are the same bulb file in GIF format with two different background color, you can see while the left bulb looks perfect, the right bulb is totally not acceptable in quality.

bulb
bulb

Meanwhile, PNG format image as below supports alpha channel transparency so they blend smoothly in the edge. In following example, both bulbs look perfect and no jagged edges around images:

bulb
bulb

Unfortunately, PNG doesn't support animation. APNG adds animation support to PNG, but some browsers (like IE) don't support APNG. Latest version Edge already supports APNG so in the long run it will be a good format to choose.

If you have to use GIF file, here are some tips to make it look better:

bulb
bulb

But I need SVG output.

We now support SVG generation with this upload generator for uploaded SVG files, so simply upload a SVG file will do.

SVG animation is layer-based, just like our online animation editor for our icon library, with animation options available in the advanced panel. For more sophisticated animation editing, we also provide Advanced Animation Editor for multi-layer editing and image composition.

More about Image Format

You can also check these articles ( Improving Gif Quality and Format for Animation ) for more information about how the effect of different configurations / format will be like.

Comments

Any questions or suggestion? Feel free to leave comment here. :)

loader

Jagged Edges?

turning off the edge smoothing option might help


By its design, GIF is quite limited in quality especially with transparency on. If you got GIF with colored border around edges of generated image, you can turning off Edge Smoothing option and try again.

This option will give crispy edges around generated image, but might lead to pixelated result, so please use it at your discretion. For more information, check our guide about improving GIF image quality.


Close This Popup

Import Colors

update palette with picked colors in editor


This will bring up the palette editor with a new palette from all colors you have picked in this editor. Current chosen palette won't be replaced before you click "Use This Palette".

Are you sure to do this?


Yes, Do It
Cancel

Ooops!

We failed to build the requested resources for you.


This might be caused by internal bugs, side effects of browser plugins, or unsupported browsers. You could try to resolve this with following:

  • Reload this page and try again.
  • Disable some browser plugins, such as AdBlock.
  • Try with another browser or computer.
  • Contact us and report this issue.

Sorry about this inconvenience!


Close This Popup

Building Completed.

copy/right click to save or click download button

Now Building

Your image will be ready soon

The request resource is now being built. Soon the file will be ready with a link for downloading popup for you to download.


Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO