# Rive Library

> Ready-made Rive animations (logos, icons, interface pieces) with working code for plain HTML and React. Every file is public and CORS-enabled, so a page can load it straight from the URLs below.

How to use any sample: open its README (linked below). It gives the exact artboard, state machine and controls, plus a complete HTML and React example. In short:

- Runtime: `<script src="https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.42.1/rive.js"></script>` (global `rive`), or npm `@rive-app/canvas` / `@rive-app/react-canvas`.
- `new rive.Rive({ src, canvas, artboard, stateMachine, autoplay: true, autoBind: true, onLoad })`.
- Change it through `r.viewModelInstance`: `.number(name).value`, `.color(name).rgb(r, g, b)`, `.boolean(name).value`, `.trigger(name).trigger()`.
- Never redraw the artwork yourself; load the .riv.

## Logos

- [EU logo (European Commission)](https://floridagames.github.io/rive-library/samples/logo-eu/README.md): The European Commission logo builds itself up: stripes fly in, the flag unfolds, twelve stars pop in.
- [Tilburg University logo](https://floridagames.github.io/rive-library/samples/logo-tiu/README.md): The TiU logo assembles itself: letters rise, the tree grows, the eight diamonds pop in.

## Illustrations

- [EU Council vote](https://floridagames.github.io/rive-library/samples/eu-council-vote/README.md): The Council of the EU round a table, all 27 member states. Hold a vote: country by country the seat lights up while it votes, then shows yes, no or abstain.

## Icons

- [Banknote](https://floridagames.github.io/rive-library/samples/icon-banknote/README.md): A line icon that draws itself in (Lucide "banknote"). Colour and stroke width are adjustable.
- [Book open](https://floridagames.github.io/rive-library/samples/icon-book-open/README.md): A line icon that draws itself in (Lucide "book-open"). Colour and stroke width are adjustable.
- [Briefcase](https://floridagames.github.io/rive-library/samples/icon-briefcase/README.md): A line icon that draws itself in (Lucide "briefcase"). Colour and stroke width are adjustable.
- [Clock](https://floridagames.github.io/rive-library/samples/icon-clock/README.md): A line icon that draws itself in (Lucide "clock"). Colour and stroke width are adjustable.
- [Eye](https://floridagames.github.io/rive-library/samples/icon-eye/README.md): A line icon that draws itself in (Lucide "eye"). Colour and stroke width are adjustable.
- [File text](https://floridagames.github.io/rive-library/samples/icon-file-text/README.md): A line icon that draws itself in (Lucide "file-text"). Colour and stroke width are adjustable.
- [Footprints](https://floridagames.github.io/rive-library/samples/icon-footprints/README.md): A line icon that draws itself in (Lucide "footprints"). Colour and stroke width are adjustable.
- [Handshake](https://floridagames.github.io/rive-library/samples/icon-handshake/README.md): A line icon that draws itself in (Lucide "handshake"). Colour and stroke width are adjustable.
- [Hourglass](https://floridagames.github.io/rive-library/samples/icon-hourglass/README.md): A line icon that draws itself in (Lucide "hourglass"). Colour and stroke width are adjustable.
- [Landmark](https://floridagames.github.io/rive-library/samples/icon-landmark/README.md): A line icon that draws itself in (Lucide "landmark"). Colour and stroke width are adjustable.
- [Newspaper](https://floridagames.github.io/rive-library/samples/icon-newspaper/README.md): A line icon that draws itself in (Lucide "newspaper"). Colour and stroke width are adjustable.
- [Scale](https://floridagames.github.io/rive-library/samples/icon-scale/README.md): A line icon that draws itself in (Lucide "scale"). Colour and stroke width are adjustable.
- [Shield alert](https://floridagames.github.io/rive-library/samples/icon-shield-alert/README.md): A line icon that draws itself in (Lucide "shield-alert"). Colour and stroke width are adjustable.
- [Shield check](https://floridagames.github.io/rive-library/samples/icon-shield-check/README.md): A line icon that draws itself in (Lucide "shield-check"). Colour and stroke width are adjustable.
- [Users](https://floridagames.github.io/rive-library/samples/icon-users/README.md): A line icon that draws itself in (Lucide "users"). Colour and stroke width are adjustable.
- [Vote](https://floridagames.github.io/rive-library/samples/icon-vote/README.md): A line icon that draws itself in (Lucide "vote"). Colour and stroke width are adjustable.
- [Wallet](https://floridagames.github.io/rive-library/samples/icon-wallet/README.md): A line icon that draws itself in (Lucide "wallet"). Colour and stroke width are adjustable.

## Optional

- [library.json](https://floridagames.github.io/rive-library/library.json): every sample with its controls and file URLs, machine-readable
- [Gallery](https://floridagames.github.io/rive-library/): live previews and copy buttons