Skip to content
Day 69: new resources are added every day. See what's new

Website

Koven Animated Icons

207 animated React icons whose colours follow your shadcn/ui theme.

  • Rating

    4.4 / 5

  • Pricing

    Free

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

What is Koven Animated Icons?

Koven Animated Icons is a set of 207 animated React icons with one to three colour slots that read from your shadcn/ui theme tokens, including dark mode. Each icon has its own animation variants, round, bevel or sharp corners, and hover, click or in-view triggers. Install from npm or copy individual icons with the shadcn CLI.

Pros: what Koven Animated Icons does well

  • Icons pick up your theme colours automatically
  • Several animations per icon
  • MIT licensed, install one icon or all

Cons: where it falls short

  • Only for React projects
  • Smaller set than static icon libraries

Who Koven Animated Icons is for

Developers using shadcn/ui who want icons with built-in motion.

Who can skip it

Projects that only need static icons.

Koven Animated Icons alternatives

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

Keyline Icons

Focus: svg, design and open source. Shares icons and react with Koven Animated Icons. Rated 4.6 (Koven Animated Icons: 4.4).

WebsiteFreeWeb

Anicon

Focus: svg. Shares animated icons and react with Koven Animated Icons. A template, not a website. Same 4.4 rating.

TemplateFreeWeb

21st

Focus: tailwind, components and ui. Shares react and shadcn with Koven Animated Icons. Freemium (Koven Animated Icons: Free). Rated 4.7 (Koven Animated Icons: 4.4).

WebsiteFree planWeb

shadercn

Focus: shaders, webgpu and wgsl. Shares react and shadcn with Koven Animated Icons. Rated 4.5 (Koven Animated Icons: 4.4).

WebsiteFreeWeb

ForgeUI

Focus: tailwind, ui components and templates. Shares react and shadcn with Koven Animated Icons. Freemium (Koven Animated Icons: Free). Same 4.4 rating.

WebsiteFree planWeb

Motion (motion.dev)

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

FrameworkFreeWeb

Free alternatives to Koven Animated Icons

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

Coded Visuals

Focus: animated visuals, landing pages and marketing. Shares react and shadcn with Koven Animated Icons. A framework, not a website. Rated 4.6 (Koven Animated Icons: 4.4).

FrameworkFreeWeb

Kokonut UI

Focus: ui components, tailwind and nextjs. Shares react and motion with Koven Animated Icons. A framework, not a website. Rated 4.6 (Koven Animated Icons: 4.4).

FrameworkFreeWeb

Toggles.dev

Focus: theme toggle, dark mode and svelte. Shares react and shadcn with Koven Animated Icons. A framework, not a website. Rated 4.6 (Koven Animated Icons: 4.4).

FrameworkFreeWeb

Heroicons Animated

Focus: heroicons and ui components. Shares animated icons and react with Koven Animated Icons. Rated 4.5 (Koven Animated Icons: 4.4).

WebsiteFreeWeb

pdfcn

Focus: pdf, components and documents. Shares react and shadcn with Koven Animated Icons. A framework, not a website. Same 4.4 rating.

FrameworkFreeWeb, Cross-Platform

Iconly

Focus: icon design, inspiration and app icons. Shares icons with Koven Animated Icons. Rated 4.6 (Koven Animated Icons: 4.4).

WebsiteFreeWeb
Are you the maker of Koven Animated Icons?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.