Add the Rive CDN script to your page head, drop a canvas in an Embed block, and init with your .riv URL. State machine inputs work through inline JavaScript.
In Webflow: go to Page Settings → Custom Code → Head Code. Paste the Rive CDN script.
<script src="https://unpkg.com/@rive-app/webgl@2.9.1"></script>Upload your icon to Webflow Assets and copy the URL. Or use any public HTTPS host — jsDelivr, S3, Cloudflare R2.
Add an HTML Embed element to your page. Paste a canvas element and the Rive initialisation script. The onLoad callback sets up mouse event listeners for hover interaction.
<canvas id="rive-icon" width="150" height="150" style="cursor:pointer;"></canvas>
<script>
const canvas = document.getElementById("rive-icon");
let hoverInput = null;
const r = new rive.Rive({
src: "https://your-domain.com/your-animation.riv",
canvas: canvas,
autoplay: true,
artboard: "Main",
stateMachines: ["State Machine 1"],
onLoad: function() {
const inputs = r.stateMachineInputs("State Machine 1");
hoverInput = inputs && inputs.find(function(i) { return i.name === "Hover"; });
canvas.addEventListener("mouseenter", function() {
if (hoverInput) hoverInput.value = true;
});
canvas.addEventListener("mouseleave", function() {
if (hoverInput) hoverInput.value = false;
});
}
});
</script>Custom code requires a paid Webflow plan
Head Code and published Embed elements need a paid Webflow site plan. They preview in the designer on all plans.
Do I need a paid plan?
Yes. Head Code and published embeds require a paid Webflow site plan.
Where do I host the .riv file?
Webflow Assets is easiest — upload and copy the URL. Any public HTTPS host also works.
How does hover work?
Inside the onLoad callback, find the Hover input and attach mouseenter/mouseleave listeners to the canvas. Step 3 shows the full code.
Related guides
Get your animated icons
Browse icons ready for Webflow — free to download.