Subscribe
Sign in
Motion — An animated SVG icon editor
Motion is an animated icon editor! It let's you quickly find an icon you like, made some tweaks and adjustments and plug it into whatever project you are working on!
There are hundreds of icons to use and it's free!
17
Replies
Best
Scott Wyden Kivowitz
Looks great, but two things.
1. Can you use your own SVG ?
2. If you have Apple Motion installed, there is a conflict in App names.
Report
Share
@scottwyden Hey mate, thanks for the kind words! 1. You are unable to use your own SVG files with Motion. It's a pre-built icon library. 2. Thanks for that tip. Not sure how I will go about solving that other than re-naming my app. Hmmm 🤔
Pros: A Large collection of delightfully drawn and animated icons. You can change fill and line colour as well as line width. You can even adjust the speed!
Just save or copy the icon and use directly in your production. Pasting an icon directly into Sketch works great.
You will find just about anything turned into an icon. A rich collection of items both everyday stuff as well as UI components. Well done!
Cons: As expected you will only find one illustration style in this library. A strong, sharp-edged design language. The icons export in 80 x 80 px size which can be problematic for some.
For anyone in need of setting some flare on their digital product, this is great. Good control, a vast library and nice animations.
Personally, I'd get inspired to add some animation to my own icon libraries and implement subtly into production.
There's a gap in the market. We need more performant, delightful animated SVGs, but they are hard to make! Motion tries to solve this by having a large (and growing!) collection of high quality, hand drawn and coded icons that you can plug and play into production. And best of all, it's free! :D
I'd love to hear any feedback and thoughts you all have! Let's chat!
It's a cool library of animated SVG icons, but I hope you don't mind me saying that you're being a bit misleading with the subtitle. It's not exactly an "animated SVG editor", is it. You can't create or edit animations, you can merely customize the color, stroke and speed of a fixed set of animated SVG icons (which is still cool). I really hoped this would be something similar to the Google Web Designer or old school Macromedia Flash in terms of UI with the ability to create vector animation with SVG+CSS transform/animation output.
each update reduce the number of free icon. I use some for experiment and now they lock behind a paywall. Same screen almost all Pro : https://imgur.com/PDKS6kd
@rad_val_ Hey, what do you mean exactly by this? If you have ideas for new icons, let me know and I'll be happy to try and work it in.
@daniel_mcfarland This is a tricky one. Each animation in Motion is following a very specific set of rules, naming conventions and technical requirements. In order to add your own, it's quite likely you'll have to make some major adjustments to the CSS/SVG code and the animation itself.
So if I add this, it will likely be a stringent, step-by-step wizard. And that's just to get your own icons working in your copy of Motion. Ideally, if you add an icon, everyone that uses Motion has access to it, to help build a community and ensure everyone benefits! So in that scenario a wizard is vital to ensure all icons are lightweight, performant and accessible.
Long answer: No plans in the short/medium term. But I'd still love to do this :) Hope this helps.
It would be more compelling if you had a list of available icons. Looks fantastic!
