Limited offer — lifetime access:$99$79
Articlefigmaanimated iconslottierivedesign handoff

Animated Icons in Figma — How to Use Lottie & Rive in Your Design Files

How to use animated icons in Figma — importing Lottie files, using the LottieFiles plugin, adding Rive components, and handing off to developers without losing animation data.

Figma doesn't natively play Lottie or Rive animations in prototype mode — but there are workflows that let you design with animated icons and hand off to developers cleanly. Here's what works.

Figma's native animation support (what it can and can't do)

Figma supports basic transitions and Smart Animate in prototypes. It does not natively render Lottie JSON or Rive .riv files in the editor or prototype view.

What this means in practice:

  • You can't drag a .json Lottie file into Figma and see it play
  • You can't embed a .riv file and preview state machine interactions
  • Figma prototype animations are separate from Lottie/Rive implementations

For animated icons in Figma, there are two realistic workflows: the LottieFiles Figma plugin, and using static representations with annotated handoff.

Option 1: LottieFiles Figma plugin

The LottieFiles Figma plugin lets you:

  • Search the LottieFiles library inside Figma
  • Import a Lottie animation and render it as a preview image on the canvas
  • "Bake" frames to Figma shapes (converts animation to static vectors)

Limitation: it renders a static snapshot or GIF preview — not a live animation in the Figma canvas. The icon appears on your design, but doesn't animate while you're designing.

For Unicorn Icons specifically: download the icon's GIF or WebM file, import it into Figma using the media plugin or as a fill. This gives designers a visual reference of the animation on the canvas.

Option 2: Design with static, annotate for animation

The most pragmatic workflow for most teams:

  1. Use the SVG for layout and spacing in Figma — position, size, and color decisions
  2. Use the GIF as a reference layer (locked, low opacity) to show the animation behavior
  3. Add annotations on the design that point to the icon name and link to the icon page on Unicorn Icons

Example annotation:

Icon: "arrow-right"
Source: unicornicons.com/icons/arrow-right
Format: Lottie JSON (.json) or Rive (.riv)
Trigger: on hover — play once, hold last frame

This gives the developer everything needed without requiring Figma to render the animation.

Option 3: Figma Variables + component library

For design systems teams who want animated icons in a component library:

  1. Add the static SVG as a Figma component
  2. Set fill colors using Figma variables (design tokens)
  3. When colors change in the token system, update the variable — same token drives the SVG in Figma and the Lottie JSON color param in code

Unicorn Icons' browser color editor exports icons with the chosen color baked in. If you're using design tokens, use the editor to preview the token value → export the file → commit to your icon repo.

Developer handoff for animated icons

The cleanest handoff workflow:

In the design file:

  • Use SVG for accurate static representation
  • Include an annotation layer naming the icon and specifying the trigger behavior
  • Export the SVG from Figma as the reference

In the handoff doc (Notion/Linear/PR description):

  • Link to the icon on Unicorn Icons
  • Specify the trigger: hover, click, scroll into view, on mount (autoplay), or state machine input name if using Rive
  • Specify the loop behavior: loop, play once, play once and hold

In the codebase:

  • Download Lottie JSON or Rive from Unicorn Icons with the brand colors set
  • Commit the file to /public/icons/ or a dedicated assets directory
  • Never load animated icons from a CDN URL — own the files

Colors in Figma vs animated icon files

Figma components use fill colors from your design tokens or color styles. When you hand off an animated icon:

  1. Note the hex value from Figma
  2. Open the icon in Unicorn Icons' browser editor
  3. Set the color to match
  4. Export — the file is now matched

This is the advantage of Unicorn Icons' color editor: it handles the "Figma says #4F46E5 but the downloaded icon is black" problem that breaks most animated icon workflows.

Prototype animation: LottieFiles Interactive prototype plugin

If you need a clickable prototype that actually plays the animation:

The LottieFiles Interactive Prototype plugin lets you attach a Lottie JSON file to a frame and play it during prototype presentation mode. It's limited to Figma presentation view (not design canvas), but it works for stakeholder demos.

To use with a Unicorn Icon: download the Lottie JSON, use the plugin to attach it to the relevant frame in your prototype.

Summary: the practical workflow

For most teams:

  1. Design phase: SVG in Figma components, GIF/WebM as reference layers, annotation layer specifying icon names and triggers
  2. Token sync: Figma color variables → browser color editor in Unicorn Icons → export with matching colors
  3. Handoff: link to icon page in PR description, specify trigger and loop behavior
  4. Implementation: developer downloads Lottie/Rive with correct colors, commits file, implements per the relevant guide

This keeps Figma as the source of truth for layout/spacing/color, and Unicorn Icons as the source of truth for animation files.

Related: How to add animated icons to Next.js → · Browse icons → · How to use Lottie in React →

Back to Blog