I am trying to add a custom animation to an icon but I can’t find the section to insert the code.
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.
1 Like
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.
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.
1 Like
