# \[FEATURE-15148\] Need some help for animated icons

**URL:** <https://forum.inductiveautomation.com/t/feature-15148-need-some-help-for-animated-icons/28883>\
**Category:** Ignition Early Access\
**Created:** [October 7, 2019, 4:55pm UTC](https://forum.inductiveautomation.com/t/feature-15148-need-some-help-for-animated-icons/28883 "2019-10-07T16:55:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 7, 2019, 4:55pm UTC](https://forum.inductiveautomation.com/t/feature-15148-need-some-help-for-animated-icons/28883/1 "2019-10-07T16:55:33Z")

</div>

Hi  
I see some wonderful animated icons in following link from [material.io](http://material.io) which use CSS3 to create them.  
[https://material.io/design/iconography/animated-icons.html#](https://material.io/design/iconography/animated-icons.html#)

Right now perspective style class support limited set of option for animation. and I only can change change color, move, rotate svg object by changing size, position and rotation of object and apply transition:all .5s linear in style section of object.

What I mostly need transition from one svg shape to another svg shape. There are a lot good tutorial for creating these effect with a lot of line of CSS3 code but I don’t know how should I deploy them in perspective.  
what is the straight forward way to put my CSS3 code for each object?

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [October 7, 2019, 7:40pm UTC](https://forum.inductiveautomation.com/t/feature-15148-need-some-help-for-animated-icons/28883/2 "2019-10-07T19:40:46Z")

</div>

Hi @nader.chinichian, Those animations are pretty awesome! They all involve animating different layers of an SVG, which is something we don’t support at the moment. I can open a feature request for allowing enhanced animations of icons.

To get a similar result with what is available today, you can modify the `path` property of your icons based on user events (`onMouseEnter`, `onMouseLeave`, etc). You can also add/remove classes to adjust the CSS as you were mentioning:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/517e5f0664e12ec63e3da6663a7940b4cf3ffcc3.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a320ce0448530dbc000c08fa2dbbe9acb6c2f198.png)  
 ![animated-icon-hover](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fe4116af51ad9ca8a3f5bcee22f9f4a718a97387.gif)