How to Find the Right Animated Icon in useAnimations

Updated

The fastest way to find an icon on useAnimations is to combine three tools on the library page: the search box for name matching, the Interaction filter for behavior, and the category list for browsing. If you already know the icon name, search it directly. If you know how it should behave but not what it looks like, filter by interaction first. If you're exploring, browse by category. Once you open an icon, you get its code and download options (Lottie JSON, SVG, and ZIP).

Search by icon name

Use the search box when you have a specific icon in mind — for example, a notification bell or a burger menu.

  1. Go to the library section of useAnimations.
  2. Type the icon name into the Search icons field.
  3. Scan the results, which show the icon, its name, and its interaction type.

The results list labels each icon with its interaction (for example, "Loop," "Click," or "Hover"), so you can confirm you've found the right behavior before opening it.

Filter by interaction type

If your decision is driven by how the icon should move rather than what it depicts, filter by interaction. useAnimations ships six built-in interactions, and each icon is designed around one of them:

Interaction Behavior Typical use
loop Plays continuously Loaders, ambient status
click-toggle Switches between two states (menu/close, play/pause) Toggle controls
click-replay Replays from the start on every click Click feedback
hover Plays forward on enter, back on leave Hover affordances
hover-loop Loops while hovered, finishes its cycle on leave Attention on hover
hover-replay Plays once from the start on every enter Repeated hover feedback

To filter: open the Interaction dropdown and select one option (or All interactions to see everything). The grid updates to show only icons with that behavior.

A practical note: the interaction is built in, but you can override it with a single prop when using the React component — so an icon's default interaction isn't a hard constraint. Filtering is still the quickest way to find icons that were designed for the motion you want.

Browse by category

When you don't have a name or behavior in mind, browse by category. useAnimations organizes its 300 icons into groups including:

  • Alerts
  • Notifications
  • Navigation
  • Action
  • Content
  • Form
  • Media
  • Text editing
  • Communication
  • Devices
  • Weather
  • Maps & location
  • Commerce
  • Charts
  • Development
  • Design & layout
  • Shapes & math
  • Loading
  • Social media
  • Other

Pick the category closest to your UI context, then scan the grid. Each card shows the icon and its interaction label, so you can judge both look and motion at a glance.

Open an icon for code and downloads

Clicking any icon card opens its detail view. This is where you get what you actually need to ship it:

  • Code — the snippet for using the icon (for example, as a React component or via shadcn/ui).
  • Downloads — Lottie JSON, SVG, and a ZIP.

If you're working in React, the package install command shown on the site is:

npm i react-useanimations

The library is MIT licensed, has zero dependencies, and the player is about 8 kB gzipped — useful context if bundle size is part of your decision.

A quick decision path

  • Know the name? → Search.
  • Know the behavior? → Filter by Interaction.
  • Know the context but not the icon? → Browse by category.
  • Ready to use it? → Open the icon for code and downloads.

One caveat worth checking yourself: the site lists 300 icons and six interactions, but not every category is guaranteed to contain every interaction. If you need a specific combination (say, a hover-loop icon in Commerce), filter by interaction first and then scan the categories in the results rather than the other way around.