No plugin needed. Use the Custom HTML block in Gutenberg — paste the Rive CDN script, a canvas element, and init code. Hover state machine works inline.
WordPress Media Library won't accept .riv files by default. Upload it to a CDN (jsDelivr, Cloudflare R2, S3) and copy the public HTTPS URL.
Open your page or post in the WordPress editor. Click + to add a block, search for 'Custom HTML', and add it.
Paste this into the Custom HTML block. Replace the src URL with your .riv file URL. The inline script loads the CDN, initialises Rive, and wires up hover.
<script src="https://unpkg.com/@rive-app/webgl@2.9.1"></script>
<canvas id="rive-icon" width="150" height="150" style="cursor:pointer;"></canvas>
<script>
(function() {
var canvas = document.getElementById("rive-icon");
var hoverInput = null;
var r = new rive.Rive({
src: "https://your-domain.com/your-animation.riv",
canvas: canvas,
autoplay: true,
artboard: "Main",
stateMachines: ["State Machine 1"],
onLoad: function() {
var 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>Multiple icons on the same page
If you add more than one Rive icon, give each canvas a unique ID (e.g. rive-icon-1, rive-icon-2) and update the getElementById call in each block accordingly.
Do I need a plugin?
No. The Custom HTML block and CDN script handle everything.
Where do I put the .riv file?
Not WordPress Media — it rejects .riv by default. Use jsDelivr, S3, Cloudflare R2, or any public HTTPS URL.
Works with Elementor/Divi?
Yes. HTML widget in Elementor, Code module in Divi. Same code, same result.
Related guides
Get your animated icons
Browse icons ready for WordPress — free to download.