12 Animated UI Icons

12 Animated UI Icons
12 Animated UI Icons

About 12 Animated UI Icons

Add polished animated icons to your Framer site in seconds. This pack includes 12 ready-made Lottie UI icons for the actions people use most. Everything is controlled from Framer's Style panel, with no code and no Lottie files to find or upload.

Why choose this pack

  • Recolor in one click. Match any brand color or dark and light theme with the Icon Color control.

  • Adjust stroke width. Make icons thinner or bolder to fit your design. This works on the line-based parts of each icon.

  • Full playback control. Loop, autoplay, speed, play on hover, and reverse on mouse leave.

  • Nothing external to set up. All animation data is built in. Pick an icon from the dropdown and it works.

  • Works in any Framer project. Drag the component in, choose an animation, adjust the controls.

What's included (12 animations) Settings, Love, Add, Bookmark, Link, Arrow, Star, Trash, Best, Home, Signal, Download.

Perfect for Navigation menus, buttons, cards, dashboards, landing pages, web apps, portfolios and mobile-style UI prototypes.

How to use it

  1. Install the component and drag it onto your canvas.

  2. Choose an icon from the Animation dropdown.

  3. Set color, stroke width and playback in the Style panel.

From Balazs Renata

30 Lottie Animations
Glowing Particles
Interactive Grids

Related Components

Toolstack Gallery
Particle Shapes
Lenis
Better Counter