I kept running into the same small annoyance. I'd need one animated icon, so I'd hand-roll it in Motion, and the result never quite matched the res...
For further actions, you may consider blocking this person and/or reporting abuse
Cool. A search would be fine for mobile UX. I'm interested in SVgs
The search point is a fair hit — thank you. The gallery leans on
Cmd/Ctrl + K, which is no use at all on a phone. A visible search field for mobile is a real gap, and I'll fix it.On SVGs, two halves to the answer:
Static: the glyphs are Phosphor's, unchanged, so you can pull the plain SVGs from phosphoricons.com right now, same MIT license, and mine are pixel-identical at rest.
Animated: not currently. The motion is React plus
motion, written as spring-based variants rather than declarative keyframes. I could bake those springs down to CSS keyframes and ship framework-agnostic animated SVGs, the cost is interruptibility, since a real spring interrupted mid-hover resolves from its current velocity and a baked keyframe track can't. For a plain hover in and out, that's probably an acceptable trade.Not promising it yet, but it's the most interesting request I've had. What are you building with, a non-React framework, or plain HTML?
Just to clarify, I’m framework-less, but my original point wasn’t really about the framework. 😄 I meant the long scroll to find each SVG on the gallery. A visible search would make that much easier on mobile.
Yeah, will be adding in the next release: mobile-friendly search. Thanks for the suggestion as well
It can be useful for other devices too. It took me a while to find search.
Thanks for the feedback.
I am saving this post. This may be useful for me. I'll start the repo.
Appreciate it! If you hit an icon that's missing when you get to it, drop me a note; I'd rather build the ones people actually need than guess.
The iconset is already pretty comprehensive! I'll notify if I think something's missing.
I'm updating weekly it with new icons as well
Thanks, will be added in the next release
This is a really useful idea. Hand-rolling the same icon animations over and over is one of those small things that ends up eating way more time than it should. I especially like the decision to stick to the Phosphor grid so the animated icons actually feel consistent with an existing icon set.
Thanks <3
This looks soooo cool!
Is there a way to install all of the icons directly? I know how to do it manually from the repo but I was wondering if you are thinking of adding a npm command to make it easier :)
Will be adding it; thanks for the suggestions. Can expect it in the upcoming suggestions. Writing it down on my roadmap
does this work well with framer motion or is it a custom wrapper? ngl hand-rolling those every time is a pain lol
Sorry for the slow reply! Good news, it is motion (motion.dev, i.e. Framer Motion after the rename), so if you're already using it, you're set. No custom wrapper around it.
Each icon is just plain
Variantsplus two small shared pieces: auseHoverhook that gates enter/leave/focus/blur through one source of truth, and a token module of named springs and durations. That second one is exactly the pain you're describing — you stop re-deriving timings per icon and just reach forSWEEPorARRIVE.Both get inlined into the file the registry drops in, so the only runtime dep is
motionand you can edit any curve you disagree with.If there's an icon you keep hand-rolling, tell me which and I'll add it.