Subscribe
Sign in
Motion
p/motion-3An animated SVG icon editor
Start new thread
Philip Ardeljan

Motion - An animated SVG icon editor

by•

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!

Add a comment

Replies

Best
Philip Ardeljan
Maker
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!
David Chang
This is dope!
Daniel McFarland
Any plans to allow animating SVGs imported into the app?
Philip Ardeljan
Maker
@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.
Kristian Gerardsson
Super cool! :D
Patrik Winter
Its quick and easy to use!!
Felipe Otálora
I like this very much, I had used SVGator but it felt too complex
Mahdi Rahmani
so useful :)
Jorgen Gedeon
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.
Valentin Radu
?makers Any plans for building custom animations?
Philip Ardeljan
Maker
@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.
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.
Philip Ardeljan
Maker
@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 🤔
Dustin McCaffree
This is really cool! I'm obsessed with animated SVG right now... 🔥
Tom Frazier
It would be more compelling if you had a list of available icons. Looks fantastic!
Mathieu Veronneau
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
Bence Fodor
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.