ActiveIcons/logos141
@heroicons-animated
Icons/logos · MIT · data updated 2026-07-28
An open-source library of 316 animated Heroicons for React, built with Motion (Framer Motion) and distributed as a shadcn-compatible registry. Each icon has smooth SVG animations triggered on hover or programmatically, and all are copy-paste installable via the shadcn CLI. MIT-licensed, fully customizable, free. TypeScript/React, works with Next.js and Vite. Use for: replacing static Heroicons with animated equivalents in React apps where subtle icon motion improves perceived interactivity without adding a large animation library.
aestheticanimationblocksbuttonscardschartse-commerceiconsmarketing
Install
npx shadcn@latest add https://www.heroicons-animated.com/r/registry.jsonHealth
StatusActive
Last commit1 month ago
LicenseMIT
Open issues1
ArchivedNo
Stars141
Components (316)
academic-capadjustments-horizontaladjustments-verticalarchive-box-arrow-downarchive-box-x-markarchive-boxarrow-down-circlearrow-down-leftarrow-down-on-square-stackarrow-down-on-squarearrow-down-rightarrow-down-trayarrow-downarrow-left-circlearrow-left-end-on-rectanglearrow-left-start-on-rectanglearrow-leftarrow-long-downarrow-long-leftarrow-long-rightarrow-long-uparrow-path-rounded-squarearrow-patharrow-right-circlearrow-right-end-on-rectanglearrow-right-start-on-rectanglearrow-rightarrow-top-right-on-squarearrow-trending-downarrow-trending-uparrow-turn-down-leftarrow-turn-down-rightarrow-turn-left-downarrow-turn-left-uparrow-turn-right-downarrow-turn-right-uparrow-turn-up-leftarrow-turn-up-rightarrow-up-circlearrow-up-leftarrow-up-on-square-stackarrow-up-on-squarearrow-up-rightarrow-up-trayarrow-uparrow-uturn-downarrow-uturn-leftarrow-uturn-rightarrow-uturn-uparrows-pointing-inarrows-pointing-outarrows-right-leftarrows-up-downat-symbolbackspacebackwardbanknotesbars-2bars-3-bottom-leftbars-3-bottom-right
Components: academic-cap, adjustments-horizontal, adjustments-vertical, archive-box-arrow-down, archive-box-x-mark, archive-box, arrow-down-circle, arrow-down-left, arrow-down-on-square-stack, arrow-down-on-square, arrow-down-right, arrow-down-tray, arrow-down, arrow-left-circle, arrow-left-end-on-rectangle, arrow-left-start-on-rectangle, arrow-left, arrow-long-down, arrow-long-left, arrow-long-right, arrow-long-up, arrow-path-rounded-square, arrow-path, arrow-right-circle, arrow-right-end-on-rectangle, arrow-right-start-on-rectangle, arrow-right, arrow-top-right-on-square, arrow-trending-down, arrow-trending-up, arrow-turn-down-left, arrow-turn-down-right, arrow-turn-left-down, arrow-turn-left-up, arrow-turn-right-down, arrow-turn-right-up, arrow-turn-up-left, arrow-turn-up-right, arrow-up-circle, arrow-up-left, arrow-up-on-square-stack, arrow-up-on-square, arrow-up-right, arrow-up-tray, arrow-up, arrow-uturn-down, arrow-uturn-left, arrow-uturn-right, arrow-uturn-up, arrows-pointing-in, arrows-pointing-out, arrows-right-left, arrows-up-down, at-symbol, backspace, backward, banknotes, bars-2, bars-3-bottom-left, bars-3-bottom-right, bars-3-center-left, bars-3, bars-4, bars-arrow-down, bars-arrow-up, battery-0, battery-100, battery-50, beaker, bell-alert, bell-slash, bell-snooze, bell, bold, bolt-slash, bolt, book-open, bookmark-slash, bookmark-square, bookmark, briefcase, bug-ant, building-library, building-office-2, building-office, building-storefront, cake, calculator, calendar-date-range, calendar-days, calendar, camera, chart-bar-square, chart-bar, chart-pie, chat-bubble-bottom-center-text, chat-bubble-bottom-center, chat-bubble-left-ellipsis, chat-bubble-left-right, chat-bubble-left, chat-bubble-oval-left-ellipsis, chat-bubble-oval-left, check-badge, check-circle, check, chevron-double-down, chevron-double-left, chevron-double-right, chevron-double-up, chevron-down, chevron-left, chevron-right, chevron-up-down, chevron-up, circle-stack, clipboard-document-check, clipboard-document-list, clipboard-document, clipboard, clock, cloud-arrow-down, cloud-arrow-up, cloud, code-bracket-square, code-bracket, cog-6-tooth, cog-8-tooth, cog, command-line, computer-desktop, cpu-chip, credit-card, cube-transparent, cube, currency-bangladeshi, currency-dollar, currency-euro, currency-pound, currency-rupee, currency-yen, cursor-arrow-rays, cursor-arrow-ripple, device-phone-mobile, device-tablet, divide, document-arrow-down, document-arrow-up, document-chart-bar, document-check, document-currency-bangladeshi, document-currency-dollar, document-currency-euro, document-currency-pound, document-currency-rupee, document-currency-yen, document-duplicate, document-magnifying-glass, document-minus, document-plus, document-text, document, ellipsis-horizontal-circle, ellipsis-horizontal, ellipsis-vertical, envelope-open, envelope, equals, exclamation-circle, exclamation-triangle, eye-dropper, eye-slash, eye, face-frown, face-smile, film, finger-print, fire, flag, folder-arrow-down, folder-minus, folder-open, folder-plus, folder, forward, funnel, gif, gift-top, gift, globe-alt, globe-americas, globe-asia-australia, globe-europe-africa, h1, h2, h3, hand-raised, hand-thumb-down, hand-thumb-up, hashtag, heart, home-modern, home, identification, inbox-arrow-down, inbox-stack, inbox, information-circle, italic, key, language, lifebuoy, light-bulb, link-slash, link, list-bullet, lock-closed, lock-open, magnifying-glass-circle, magnifying-glass-minus, magnifying-glass-plus, magnifying-glass, map-pin, map, megaphone, microphone, minus-circle, minus, moon, musical-note, newspaper, no-symbol, numbered-list, paint-brush, paper-airplane, paper-clip, pause-circle, pause, pencil-square, pencil, percent-badge, phone-arrow-down-left, phone-arrow-up-right, phone-x-mark, phone, photo, play-circle, play-pause, play, plus-circle, plus, power, presentation-chart-bar, presentation-chart-line, printer, puzzle-piece, qr-code, question-mark-circle, queue-list, radio, receipt-percent, receipt-refund, rectangle-group, rectangle-stack, rocket-launch, rss, scale, scissors, server-stack, server, share, shield-check, shield-exclamation, shopping-bag, shopping-cart, signal-slash, signal, slash, sparkles, speaker-wave, speaker-x-mark, square-2-stack, square-3-stack-3d, squares-2x2, squares-plus, star, stop-circle, stop, strikethrough, sun, swatch, table-cells, tag, ticket, trash, trophy, truck, tv, underline, user-circle, user-group, user-minus, user-plus, user, users, variable, video-camera-slash, video-camera, view-columns, viewfinder-circle, wallet, wifi, window, wrench-screwdriver, wrench, x-circle, x-markPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@heroicons-animated · academic-cap
npx shadcn@latest add https://www.heroicons-animated.com/r/academic-cap.jsonView source