20 Group of High-quality animated icons with excellent user experience

Although the early GIF animation, both technically and in terms of application, and interface design does not have a particularly direct relationship, but in recent years, the animation icon began to use in the interface design, and there is a popular trend.

Frankly, it's not something new to let the icons move, or to express some interesting scenes through a dynamic diagram, but they are more simple to play for a long time, in the second place, or just to be funny. But it's not the same now, with sophisticated post-processing, these dynamic icons have become an important part of the interface, becoming an indispensable element in enhancing the user experience. As a result, the animated icon built by the GIF is not an incomprehensible thing to start the "mass invasion" web design and UI design field.

Of course, the description of the empty concept is not as intuitive as the picture to clear. I think the following 20 cases will give you a clearer idea of the use of animated icons.

Kickmaterial

Kickmaterial is Kickstarter's material-style app's dynamic icon, and this delightful design stems from material designs, with soft colors and flat shapes that give icons a delicate and stylish look, and smooth animations give icons a dynamic, Enhance the user's understanding of its functionality.

Animated Android WebView by Jovie Brett

The subtle tones let the simple gears have a three-dimensional sense, plus the rotation effect, the entire icon began to have the real texture.

Contacts by Jovie Brett

This contact icon also uses a simple blue and white color, hue to create a true texture, business card reversal of the animation not only implied the meaning of the icon, but also to ensure the design of the degree of recognition.

Icons for Business School strategy Simulator by Valeria Ruiz-schulze

The designer shows a vibrant set of flat-wind animated icons, each of which contains a category, and the amount of information in the picture is much larger than the traditional icon, which conveys a better message.

Icon Animation | Immersus Media by James Prola

In this design project, three animation icons are designed to be carefully formed, in which the movement rate of various elements is extremely natural, making the whole icon's visual experience very excellent.

UX Camp Proposals by Tim Walsh

Does a monochrome animated icon make people feel monotonous? Not so, the project, the designer fused the horn and map two different elements, through rapid changes in the evolution of the icon to show the process of change, reflecting the static icon and the different functions and experience.

Twitter Canada by Al Boardman

One important effect of the flattening design trend is making animated icons easier to make and more productive. This group of activities related to the circular icon with a bright color, but the effect is professional enough, which the action design rhythm is very strong, looks bright and unique.

Animated icons by Tommaso Dal Poz

This is a group of animated icons designed to attract your eyes in the first time, its visual design is exemplary, it is the most prominent place there are two, one is the beginning of the color switch, one is the icon after the subtle movement effect.

Animated Icons by Zach Murphy

This set of icons is also a flat wind, animated display so that it can be in a process containing three different types of icons, three independent dynamic effect seamless integration.

Concept Icon Animation 2 by Reigndesign

Animation icon has a popular way to display the production process of the icon, and this concept icon is so play, this looks beautiful dialog icon is so simple, but after a few simple steps, is a fine flat wind icon.

Houston, We Have a Problem by Mike Russo

This is the two simple and clear medical animation icon, animated display of the elements of the icon in the process of composition, including a lot of medical-related elements, fun and fun, but also contains metaphors.

Thumbs down by Mike Russo

This thumbs down icon is more artistic than the other, although it is also close to the flat wind, but the meticulous and retro texture and smart movement to make it stand out, although the thumb downward but the rhythm of the entire animation is interesting and positive.

Tiny Icon animations:new & Fixed by Fabricio Rosa Marques

Meticulous sketches and beautiful colors make icons look good, and subtle animation makes the entire icon alive. Although their changes are not complicated, but make the whole design lively, this is called the finishing touch of the pen bar.

Weather Icon by Miguel Natividad

This animated icon shows a set of exquisite stylish weather icon controls, the icon from the sun to rainy days not only shows the transformation of the icon, but also very suitable for the dynamic effect of the weather switch, these simple lines constitute the weather icon itself easier to achieve.

Google Express by Jason Zigrino

This real and vibrant icon is designed for Google Express, the entire animation changes in the process, the package from the sky, parachute distraction, movement into the middle of a circular icon, natural and smooth.

B by Al Boardman

Change is a very interesting thing, animation is to show the process of transformation. From complexity to simplicity and simplicity to complexity is equally interesting, complex elements together make up the outline of the capital letter B, and then to simplify, a flat intuitive B came out.

Sports Analytics Icons by Mike Mirandi

This set of motion-related icons is also a simple and intuitive way to go, and its prominence, like the others, gives it a sense of vitality and a refreshing sensation, with rhythmic and subtle motion animations.

Concept Icon Animation by reigndesign

This concept icon design is also to show from the wireframe to the final icon molding process, looking at this bright and delicate finished again before the comparison of simple block diagram, very interesting.

Conclusion

Many designers are still accustomed to using after effect to make animated icons, in fact, with JS also can. Flat wind makes animated icons easier to implement, but if you want to make it look less blunt, you need to get a deeper understanding of the physical world's real movement. The ultimate goal, of course, is to make these icons with a lot of information become an important part of your interface and guide your users. Since a picture wins thousand words, how many articles can the animation omit? You can have your brain mended.