Motion isn’t just a piece of entertainment in user interfaces. Used wisely, UI animation can strengthen usability and navigability of the layout, make microinteractions clear and transitions beautiful. Also, it adds the mood and connects a digital product with objects from the real world, which may be the factor of comfort for many users. Continuing the theme of effective motion in user interfaces, today we’ve collected the set of inspiring designs with animated icons.

Animated Icons in Interfaces

ui animationTab bar icons animated by Midinventory.

ui animationSearch icon transition to cursor by Oleg Frolov.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnother view on search icons interactions with text prompts on category of content by Oleg Frolov.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimation of plus icon in the minimalist tab bar of a mobile app by Eddie Lobanovskiy.

UI Animation: 30 Creative Concepts of Animated Icons | pictureWebsite navigation transitions with icon animation by Ramotion.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated icons for buttons of home conditions in the app for smart home by Tubik.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated microinteraction for notification icon by Paarth Desai.

Galshir notificationOne more animated concept for notification icon by Gal Shir.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated icons for a restaurant app imitating the physical respond of the objects on pulling and pushing by Sergey Valiukh.

UI Animation: 30 Creative Concepts of Animated Icons | pictureCool and harmonic animation of icons for mail widget by Jona Dinges.

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated icons for the tab bar of the mobile app by Andrew McKay.

UI Animation: 30 Creative Concepts of Animated Icons | pictureOne more motion design concept for tab bar icons by Dimest.

Icons Morphing and Transitions

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated concept of icons for AI assistant by Gleb Kusnetsov.

UI Animation: 30 Creative Concepts of Animated Icons | pictureA piece of design fun: transitions for iOS icons from Google translate through Facebook, Twitter, Waze, Weather, Soundcloud, Health all the way to YouTube by Platform.

UI Animation: 30 Creative Concepts of Animated Icons | pictureControl center icons morphing with elegant trasitions, also by the Platform team.

UI Animation: 30 Creative Concepts of Animated Icons | pictureFantasy icons morphing experiment featuring digital devices by Peter Smart.

UI Animation: 30 Creative Concepts of Animated Icons | pictureYouTube morph animation by Icons8.

UI Animation: 30 Creative Concepts of Animated Icons | pictureA couple of morphing animations for social sharing icons by Icons8.

UI Animation: 30 Creative Concepts of Animated Icons | picturePractice on icon animation by UIGreat.

UI Animation: 30 Creative Concepts of Animated Icons | pictureMaterial icons morphing animation by Divan Raj.

UI Animation: 30 Creative Concepts of Animated Icons | pictureIcons morphing practice by Paarth Desai (the original .aep file is also shared by the designer in the shot). 

UI Animation: 30 Creative Concepts of Animated Icons | pictureCatchy transformation of the line searchbox into the search icon by Paarth Desai.

Icon Packs in Motion

UI Animation: 30 Creative Concepts of Animated Icons | pictureAnimated icons for rewards by the Microsoft design team.

UI Animation: 30 Creative Concepts of Animated Icons | pictureThe collection of animated pictograms by Ramotion.

UI Animation: 30 Creative Concepts of Animated Icons | pictureCommunication icons animated by Alex Kunchevsky.

E commerce patternE-commerce icons in motion by Alex Kunchevsky.

UI Animation: 30 Creative Concepts of Animated Icons | pictureThe set of animation concepts for icons by Null.

UI Animation: 30 Creative Concepts of Animated Icons | picturePQ icons animation by Edyta Konstanska.

UI Animation: 30 Creative Concepts of Animated Icons | picture

UI Animation: 30 Creative Concepts of Animated Icons | pictureSome of the animated icons for a big freebie shared by the Icons8 team

Get inspired and share with us your creative experiments. New inspiring collections for designers are coming soon.

Title image by Marina Fedoseenko from Icons8 team

Check the big set of our animated icons and feel free to use them for your projects.

Read the articles about 7 basic types of UI animation and 3 key uses of animation in mobile interfaces.

 

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Background Remover Background Remover, AI-based online tool for removing background from any photo
Mega Creator Mega Creator, online tool for creating visual content from pre-made elements
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit