Webflow SVG animation only works with <circle>, breaks when I switch to <rect>. Any fix?

Hey everyone,

I’m stuck with a weird issue in Webflow.
I’ve got an SVG icon inside an Embed block that consists of multiple <circle> elements. Webflow adds an attribute staggered-icon to the wrapper, and when I click the parent element, the animation triggers:

• all circles go from fill="var(--grey-light)" to fill="var(--brand)"
• the effect runs with a nice staggered delay.

This works perfectly as long as the elements are <circle>.

But as soon as I swap <circle> for <rect> (to make squares instead of dots), the animation completely stops applying. It looks like Webflow’s interaction engine is targeting the <circle> tag specifically, not just “children of this embed.”

I don’t see any way to edit this in the Interactions panel — it’s invisible there, but still runs on click.

Any Webflow folks run into this?

Thanks!