Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Free animated icon library for Vue

respeak-io.github.io

Post reply on HN
Print view View original

1–10 of 22 posts

Show HN: Free animated icon library for Vue

#1

Post by evolabs »

Hi everyone!

Tim here, maintainer of the lucide-motion-vue library. I build this as a way to use nice animated icons in my webapps. We were already on lucide, and found animate-ui animated icons as a great collection, unfortunately React only or made to be used with shadcn.

So I ported the library to Vue, and combined it with another library (lucide-animated.com). As both libraries dont share the same animations and/or icons, this creates the largest animated icons library for vue that can be used from one source.

Additionally, I've made several quality of live changes to make it easier to use the icons: - drop-in replacement for lucide icons, or use a seperate namespace if you want - several animation variants - easy to be used standalone or in buttons - several animation triggers - comprehensive overview, playground and docs page, comes with llms.txt to be used by agents

Finally, the repo also contains a "forge". With this, you can

a) take any icon from the lucide library, or have ai suggest some b) autogenerate animations for these icons c) add them to the library with one click

We'll use the forge over time to hopefully create animated variants for all of lucides icons, if these icons are useful to be animated.

Looking forward to hear your feedback Cheers!

Show HN: Free animated icon library for Vue
respeak-io.github.io

Re: Show HN: Free animated icon library for Vue

#4

Post by albert_e »

I like the idea

Some examples need more work i think

"Database backup" has circular arrow spinning backwards

"Earth" shows lines being drawn -- instead i expected it to show an abstract spin of the globe

"Droplet" animates the outline draw. Expected a droplet that starts small and descends to become full size.

Same with "flame" -- should ideally be an animated flame licking up / whisps

"Copy" and "File Stack" -- the animation shown should ideally be reversed i think

"Git-branch" -- animation is wrong, doesn't show branching -- just drawing nodes and lines.

"Hand-grab" -- should start with open palm and then the grab.

Same with "hand-fist"

Many animations are simple zoom/enlarge - like those on right angle arrows are not serving a purpose

Re: Show HN: Free animated icon library for Vue

#5

Post by serious_angel »

albert_e wrote: post #4

I like the idea Some examples need more work i think "Database backup" has circular arrow spinning backwards "Earth" shows lines being drawn -- instead i expected it to show an abstract spin of the globe "Droplet" animates the outline draw. Expected a droplet that starts small and descends to become full size. Same with "flame" -- should ideally be an animated flame licking up / whisps "Copy" and "File Stack" -- the…

Thank you for the great comment, the effort, and your view/experience shared!

The droplet is what I found unexpected, too, indeed. Yet, the overall ideas, including the reverse animations on rotating ones, with some funky ease, is purely genius, I believe...

If the actual animations/work are of hand of the Tim Rietz, the developer signed alongside Claude LLM, the they are a great artist!

Related: https://icones.js.org/

Re: Show HN: Free animated icon library for Vue

#6

Post by evolabs »

albert_e wrote: post #4

I like the idea Some examples need more work i think "Database backup" has circular arrow spinning backwards "Earth" shows lines being drawn -- instead i expected it to show an abstract spin of the globe "Droplet" animates the outline draw. Expected a droplet that starts small and descends to become full size. Same with "flame" -- should ideally be an animated flame licking up / whisps "Copy" and "File Stack" -- the…

Hi! Thanks for checking it out and for the specific examples. I agree, many of the animations are quite basic, will put this on the agenda for improvement. The library already supports multiple variants, so the new animations can be added without breaking existing usage.

Re: Show HN: Free animated icon library for Vue

#7

Post by evolabs »

serious_angel wrote: post #5
albert_e wrote: post #4

I like the idea Some examples need more work i think "Database backup" has circular arrow spinning backwards "Earth" shows lines being drawn -- instead i expected it to show an abstract spin of the globe "Droplet" animates the outline draw. Expected a droplet that starts small and descends to become full size. Same with "flame" -- should ideally be an animated flame licking up / whisps "Copy" and "File Stack" -- the…

Thank you for the great comment, the effort, and your view/experience shared! The droplet is what I found unexpected, too, indeed. Yet, the overall ideas, including the reverse animations on rotating ones, with some funky ease, is purely genius, I believe... If the actual animations/work are of hand of the Tim Rietz, the developer signed alongside Claude LLM, the they are a great artist! Related: https://icones.js.or…

Thanks! Great to learn about other new icons libs, too
Post reply on HN