Show HN: Free animated icon library for Vue

Posted by evolabs 5 days ago

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!

Comments

Comment by albert_e 2 days ago

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

Comment by serious_angel 2 days ago

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/

Comment by evolabs 2 days ago

Thanks! Great to learn about other new icons libs, too

Comment by serious_angel 2 days ago

Thank you for the response!

To clarify, are you the author of the animations, or is it anyone/anything else as LLM, as the Claude used?

It seems like some look like of artists' Elliot Sutton (imskyleen at GitHub) and/or and dmytro (pqoqubbw at GitHub).

Oh... and the animation ease effect of rating items is also of dmytro's, isn'it it? It may be seen at:

- https://lucide-animated.com/

In this case, what is the main reason of your/LLMs project, if I may ask? What does it provide the aforementioned don't?

// ----- Edit (+20m)

I see, your project is a port to Vue you started:

- https://github.com/imskyleen/animate-ui/discussions/178

Relatively similar to projects as RadixVue, ShadcnVue, and the following:

- https://github.com/iloomilo/itshover-vue

Just in case, the aforementioned `icones.js.com` is not "new", but a project of Vue Community, initiated by Anthony Fu (antfu at GitHub), who is a member of the Vue core Team.

Regardless, though I don't appreciate use of LLMs (and presenting its output as personal work/effort), I appreciate you heartfelt for the added support for the ineffably marvelous Vue!

Comment by evolabs 2 days ago

Lot to unpack in the comment, but maybe to clarify from my end >

I'm not the author of most of the animations so far, only a tiny fraction is remade as of now, I just started building tooling for me to develop new / more useful animations or animations for icons that dont exist yet from the lucide lib.

The majority of animations was ported from animate-ui and lucide-animated (github.com/imskyleen/animate-ui, lucide-animated.com), mentioned in the attributions, also visiable on the bottom of each icon page.

The reason I worked on this was that these components were built for react, and we're on vue for all of our work projects (and I use vue for my private ones, too).

Then I added additional QoL features to make the icons easy to use, not conflict with static lucide icons you might already use, and fix various animation bugs I encountered.

Not possible time-wise without LLMs here, for this project I see them mostly as an enabler to make this possible :)

Comment by evolabs 2 days ago

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.

Comment by evolabs 1 day ago

Follow-up based on your feedback: I added a no-JS "copy as code" option for variant that produce faithfully in plain CSS, some things dont work like this as mentioned before, but atleast many icons & animations can now be used even without the lib. Also fixed the mobile Back button. Thanks for the feedback!

Comment by kevin_thibedeau 2 days ago

Can't these just be done as SVG hover transitions? Then you have the option to use them inline with no JS.

Comment by evolabs 2 days ago

For a subset, definitly. Anything that's just transform/opacity/stroke-draw can be done.

However, this works only for hover animations then, I believe. The library also provides other triggers.

And some icons use springs, where when you hover away mid-animation it settles "smoothly".

But yes, I can defs add a no JS option for selected icons :)

Comment by jasonjmcghee 2 days ago

Some of the animations are really good and make sense based on the icon.

Others just draw the SVG path or wiggle/bounce a bit.

If I were the creator here I might differentiate this into two buckets: custom animation or not. And then allow the generic animations to be applied to any of them.

Comment by evolabs 2 days ago

Good idea, might also make it easier to pick icons / see whats there already and what might need more work (if it makes sense based on the icon, as you mentioned)

Comment by evolabs 2 days ago

Most of the animations so far are ported from pqoqubbw/icons and github.com/imskyleen/animate-ui, I'm planning to add more complex / meaningful animations as new variants in the future :) always happy to know which icons are most relevant for that.

Comment by jodacola 2 days ago

Nit on the page itself: let me use my back button after opening an icon instead of having to reach up for the close button.

When I hit back and get returned here when I wanted to check out other icons made me not go back to check out others.

Comment by evolabs 2 days ago

Fair, will adjust :D Didn't test too much on mobile tbh

Comment by jodacola 2 days ago

Nice. Yeah, I was checking it out while drinking my coffee and thought I'd share the impact of the experience, because I'm sure you'd like folks to hang around and check it out more!

Comment by evolabs 1 day ago

Absolutely!

Comment by AltruisticGapHN 2 days ago

That's awesome. I wish there was like a "raw code" option like on many icons sites you can just copy the SVG.

Comment by evolabs 2 days ago

Thanks and noted!

I can add something like this, limited to "simple" animations, tho. Transform, opacity, stroke-draw ones should work, then you'd need zero dependencies. Everything that uses spring, path-morph or state-driven animation likely cant be flattened to static code.