Rive animated icons — production-ready
Unicorn Icons is the only icon library that ships every icon as a native Rive .riv file. 400+ icons with state machine support — hover, click, loop — for React, Flutter, iOS, Android, and more.
Why native Rive matters
Most icon libraries are Lottie-only. LottieFiles can convert files to Rive, but the library icons aren't native Rive. Lordicon and Icons8 have no Rive support at all. Unicorn Icons builds every icon natively in Rive from the start — state machines, interaction triggers, and all — then also exports Lottie JSON so you have both.
Why Rive over Lottie for UI icons
Lottie is a baked timeline — it plays from A to B. Rive is a state machine — it responds to input. For interactive UI icons (hover, active, loading states), Rive is the right tool.
Interactive state machines
Icons respond to hover, click, and scroll via Rive's state machine — no JavaScript event handling required. Drop in the component and the interactions just work.
True cross-platform
One .riv file works across React, Vue, Flutter, iOS (Swift), Android (Kotlin), and React Native via official Rive runtimes. No platform-specific recreations.
Tiny file sizes
Rive files are vector-based and runtime-rendered. A typical icon is 5–20KB — no frames baked in. Scales to any resolution without quality loss.
No conversion needed
Unicorn Icons ships native .riv files tested against the Rive runtime — not converted from Lottie. No compatibility issues, no animation artifacts.
Rive vs Lottie — quick comparison
| Capability | Rive | Lottie |
|---|---|---|
| Hover / click triggers | ✕ | |
| State machines | ✕ | |
| Loop / once / ping-pong | ||
| Vector — scales losslessly | ||
| Timeline animation | ||
| React / web runtime | ||
| Flutter / iOS / Android | ||
| File size (typical icon) | 5–20 KB | 10–60 KB |
| Requires JS event handling | ✕ |
Unicorn Icons ships both formats in every download — use Rive where you need interactivity, Lottie where you need broad ecosystem coverage.
Integration examples
3 lines in every major runtime.
@rive-app/react-canvasimport { useRive } from '@rive-app/react-canvas'
export function IconButton() {
const { RiveComponent } = useRive({
src: 'icon.riv',
autoplay: true,
})
return <RiveComponent style={{ width: 48, height: 48 }} />
}rive (pub.dev)import 'package:rive/rive.dart'; RiveAnimation.asset( 'assets/icon.riv', fit: BoxFit.contain, )
RiveRuntime (SPM)import RiveRuntime let view = RiveView() try view.setRiveFile( riveFile: RiveFile(name: "icon") )
What you get with every Rive icon
- Native .riv file — built in Rive, not converted from Lottie
- Lottie JSON — for Lottie-first workflows and ecosystems
- SVG — static fallback, scalable at any size
- GIF — for older platforms and email
- WebM — for video embeds and backgrounds
- PNG — raster fallback at standard resolutions
- Browser color editor — match brand colors before you download
- Commercial license — client work, SaaS, apps, resale
Frequently asked questions
What are Rive animated icons?
Rive animated icons are icon animations built in the Rive format (.riv). Unlike Lottie animations, Rive uses a state machine model — icons can react to hover, click, and scroll events with lightweight runtime logic. This makes them ideal for interactive UI elements like buttons, toggles, loading states, and navigation icons.
Which platforms support Rive icons?
Rive has official runtimes for React (web), Flutter, iOS (Swift), Android (Kotlin), React Native, Vue, and plain HTML/JavaScript. Unicorn Icons ships every icon as a native .riv file tested against these runtimes.
How do I use a Rive icon in React?
Install the @rive-app/react-canvas package, download your icon as a .riv file, then: import { useRive } from '@rive-app/react-canvas'; const { RiveComponent } = useRive({ src: 'icon.riv', autoplay: true }); return <RiveComponent />
Is there a free Rive icon library?
Yes — Unicorn Icons includes 100 free Rive icons with no credit card required. Every free icon ships as a native .riv file alongside Lottie JSON, SVG, GIF, WebM, and PNG.
100 Rive icons free — no card.
Native .riv files + Lottie JSON + SVG + GIF + WebM + PNG. Customize colors. Ship in 5 minutes.
Lifetime deal · 7-day money-back · Commercial license included