# Question about animations

**URL:** <https://community.penpot.app/t/question-about-animations/10414>\
**Category:** Ask the community\
**Created:** [March 14, 2026, 8:06pm UTC](https://community.penpot.app/t/question-about-animations/10414 "2026-03-14T20:06:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luis\_Adrian\_Alvarez](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/luis_adrian_alvarez/32/10055_2.png) [@Luis\_Adrian\_Alvarez](https://community.penpot.app/u/Luis_Adrian_Alvarez)\
**Post date:** [March 14, 2026, 8:06pm UTC](https://community.penpot.app/t/question-about-animations/10414/1 "2026-03-14T20:06:49Z")

</div>

I am trying to add a custom animation to an icon but I can’t find the section to insert the code.

---

<div class="post-metadata">

**Author:** ![taylorbrooksps0319](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@taylorbrooksps0319](https://community.penpot.app/u/taylorbrooksps0319)\
**Post date:** [March 23, 2026, 8:56am UTC](https://community.penpot.app/t/question-about-animations/10414/2 "2026-03-23T08:56:24Z")

</div>

If you mean adding custom JS/CSS for the icon animation inside Penpot itself, I don’t think there’s a place for that in the editor right now.

Penpot’s animation flow is mostly prototype transitions and interaction settings, not arbitrary code injection. If you need a truly custom animation, the usual workaround is to design the states in Penpot, then add the animation in the exported / embedded frontend layer.

If you share the exact effect you want, like hover, loop, or click-triggered motion, people can probably suggest the closest Penpot-native setup.

---

<div class="post-metadata">

**Author:** ![Luis\_Adrian\_Alvarez](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/luis_adrian_alvarez/32/10055_2.png) [@Luis\_Adrian\_Alvarez](https://community.penpot.app/u/Luis_Adrian_Alvarez)\
**Post date:** [March 27, 2026, 7:51pm UTC](https://community.penpot.app/t/question-about-animations/10414/3 "2026-03-27T19:51:26Z")

</div>

It is a somewhat simple animation that I want to make, something like 2 spins in opposite directions on the 2 circles of the Settings icon of my app when hovering the cursor over it.

---

<div class="post-metadata">

**Author:** ![taylorbrooksps0319](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@taylorbrooksps0319](https://community.penpot.app/u/taylorbrooksps0319)\
**Post date:** [April 17, 2026, 4:07pm UTC](https://community.penpot.app/t/question-about-animations/10414/4 "2026-04-17T16:07:13Z")

</div>

Penpot won’t let you attach custom CSS or JS hover animation directly to that icon inside the editor.

The closest native path is to split the settings icon into separate layers, turn it into a component with a default variant and a hover variant, then rotate the two circles in opposite directions between those variants and connect them with a **While hovering** interaction plus **Smart animate**.

If Smart animate still feels too limited, that usually means you’ve hit Penpot’s prototype ceiling and the fallback is to export the asset and handle the hover animation in code after export.