Uwarp

useAnimations: micro-animated icon library

Feather-style Lottie JSON and SVG micro-animations (useanimations.com), 32px grid. Multi-platform. Read Licensing & terms before client work.

What is a micro-animations library?

A micro-animations library packages short motion for buttons, toasts, loaders, and affordances: enough movement to show state without a full video. useAnimations standardizes that idea around line-style icons, pairs each asset with a clear interaction (click, hover, or loop in many entries), and ships vectors so art stays crisp. Teams adopt these clips when they want motion in onboarding, empty states, and controls but do not have an in-house motion designer for every state. Uwarp only surfaces the public site here; Patrik Svoboda is credited as the maker on useanimations.com, and you should read the current license and any attribution requirements on the same domain before you ship a build that includes the downloads.

What the library offers

Micro-motion for common UI actions, distributed as Lottie and SVG.

  1. Lottie JSON: Vector-based animation files you can drive with Lottie on web and mobile, including looping and one-shot states listed per icon.
  2. SVG option: When you need a static vector or a simpler pipeline, the site lists SVG next to the Lottie download path.
  3. 32px grid: Icons are built on a 32px grid, which makes spacing and hit targets more predictable in dense interfaces.
  4. Categorized set: Browse groups such as alerts, notifications, navigation, action, content, form, media, loading, and social, plus a general other bucket for utilities.
  5. Feather-style lineage: The project describes work as free animated icons built on and inspired by Feather, a familiar line-icon language for product teams.
  6. Cross-surface use: The site calls out use on sites, Android, and iOS from one set of source files, subject to your integration and license checks.

How to work with this page

From browse to a safe file in your repo.

  1. Pick a category: Start from the group that matches your feature (for example form for checkboxes, loading for spinners, social for sign-in footers).
  2. Test the trigger: Use the on-page preview for hover, click, or loop behavior so the motion matches the interaction model you are coding.
  3. Download and wire: Save Lottie JSON (and SVG if you need it), then connect to your Lottie or SVG layer in the stack you already use.
  4. Read the license: Open the Licensing and terms page on useanimations.com and keep a record for your release process.

Tips for ship-ready motion

Keep animated icons fast and on-brand.

  1. Prefer short loops in lists: Long, busy loops in tables or feeds distract users; reserve looping loaders for the places that truly need activity.
  2. Respect reduced motion: Pair Lottie with prefers-reduced-motion and provide a static fallback for accessibility.
  3. Size and color in code: Test stroke weight and color against your design tokens so the icon does not look like a different design language.

Great for

Roles that need a quick motion baseline.

  1. Product designers: Prototype live micro-interactions next to Lottie in design tools or dev handoff.
  2. Front-end developers: Drop in JSON and wire to existing Lottie runtimes in React, native, or web views.
  3. Mobile engineers: Share one Lottie file across iOS and Android with platform players.
  4. Marketing pages: Light motion on CTAs and social proof without commissioning custom loops.
  5. Design systems: A starter pack of motion for common states while you build longer-term motion tokens.

Why use this library in discovery?

Reasons teams bookmark useAnimations during UI polish.

  1. State-specific motion: Icons are labeled for interaction, not only static silhouette.
  2. Familiar form factor: Feather-inspired shapes pair with many flat UI kits.
  3. Vector-first: Lottie and SVG help across densities and light/dark themes with less raster churn.
  4. One hub: Browse, preview, and download in one place instead of rebuilding common loops.
  5. Documentation entry points: The site links to Lottie ecosystem resources for implementation context.

Frequently Asked Questions

Have questions? We have answers.