Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Website

Heroicons Animated

316 free animated Heroicons for React, copy-paste ready.

Visit Heroicons Animated4.5

  • Rating

    4.5 / 5

  • Pricing

    Free

  • Difficulty

    Beginner

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is Heroicons Animated?

Heroicons Animated is a free, MIT-licensed collection of 316 smoothly animated versions of the Heroicons set for React, built with Motion. Add icons with the shadcn CLI or copy the code, and customise them like any SVG.

Pros: what Heroicons Animated does well

  • 316 polished animated icons
  • Free and open source (MIT)
  • Installs with the shadcn CLI

Cons: where it falls short

  • React only
  • Too much icon motion can distract users

Who Heroicons Animated is for

React developers who want subtle, polished icon animations.

Who can skip it

Projects that do not use React or prefer static icons.

Heroicons Animated alternatives

Not sold on Heroicons Animated? These do a similar job, and each card says what it has in common.

All Workflows resources

Kokonut UI

Focus: tailwind, nextjs and open source. Shares ui components and react with Heroicons Animated. A framework, not a website. Rated 4.6 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.6Visit

Lordicon

Focus: lottie and ui design. Shares animated icons and motion with Heroicons Animated. Freemium (Heroicons Animated: Free). Rated 4.6 (Heroicons Animated: 4.5).

WebsiteFree planWeb
4.6Visit

Amicro

Focus: micro-interactions and animation. Shares react and ui components with Heroicons Animated. Rated 4.4 (Heroicons Animated: 4.5).

WebsiteFreeWeb
4.4Visit

ForgeUI

Focus: tailwind, shadcn and templates. Shares react and ui components with Heroicons Animated. Freemium (Heroicons Animated: Free). Rated 4.4 (Heroicons Animated: 4.5).

WebsiteFree planWeb
4.4Visit

shadcn/ui

Focus: tailwind, open source and design system. Shares ui components and react with Heroicons Animated. A framework, not a website. Rated 4.9 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.9Visit

Free alternatives to Heroicons Animated

Want to spend nothing? These free picks cover similar ground.

Motion (motion.dev)

Focus: animation, javascript and vue. Shares react and motion with Heroicons Animated. A framework, not a website. Rated 4.7 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.7Visit

React Bits

Focus: animations, effects and open source. Shares ui components and react with Heroicons Animated. A framework, not a website. Rated 4.7 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.7Visit

Anicon

Focus: shadcn and svg. Shares animated icons and react with Heroicons Animated. A template, not a website. Rated 4.4 (Heroicons Animated: 4.5).

TemplateFreeWeb
4.4Visit

Great UI

Focus: tailwind, framer motion and typescript. Shares ui components and react with Heroicons Animated. A framework, not a website. Rated 4.4 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.4Visit

Kumo

Focus: design system and cloudflare. Shares react and ui components with Heroicons Animated. A framework, not a website. Rated 4.4 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.4Visit

beUI

Focus: animated components, tailwind and shadcn. Shares react and motion with Heroicons Animated. A framework, not a website. Rated 4.3 (Heroicons Animated: 4.5).

FrameworkFreeWeb
4.3Visit
Are you the maker of Heroicons Animated?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.