Animate Your Icon into GIF

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

need larger GIF or PNG sequence?
Subscribe Pro Plan
unlimited icons + advanced features

learn more about pricing & features
... or try with these sample SVGs

More Than a GIF Maker

PNG or SVG, bring your logos into bouncing life's animated image builder helps you quickly make simple animations from your own images, logos or PNG files with animation like bouncing or spinning of your choices info formats such as WebP animation, SVG animation, APNG, WebM,or MP4. It's a simplified version of our upcoming animation editor, which allows you to do layered animation and export animated SVG format.

Here is a list of sample animated bounce icons made with this animation maker, in GIF, APNG, SVG, WebP, MP4 and WebM formats. To emphasize their transparency (except MP4), you can click the buttons below to toggle different backgrounds:

joystick icon in ${entry[1]} format
joystick icon in ${entry[1]} format
joystick icon in ${entry[1]} format
joystick icon in ${entry[1]} format
Ripple Lines
Solid Dark
Solid White
Pattern Tiles
* Ripple Lines are available in its background generator page; pattern tiles are available in its pattern generator page.


While our animations are fully customizable, we also provide a prebuilt 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, as you can see from the example aside; however, 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.

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

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.


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:


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:


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.


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

Load Comments

By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy. loader 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]