As a designer turned developer, some tools are relevant to both and need to stay sharp in the toolbox. One of those tools I have found are the use of vector graphics. There are several types of vector graphics used frequently within web design and development including illustrations, icons, and even animations. I have collected this list by category of some of my favorite (and generally free) resources for vectors. Hopefully this list provides you with some additional tools for your own toolbox to keep your designs and skillset sharp.
Free Vector Graphic Sites (by Category)
Illustrations
These platforms have a wide variety of fun and customizable set of illustrations you may find useful for your project. They can be used for things such as splash page images, hero images, or even on your 404 page!.
unDraw
FreePik: Stories
Blush
icons8: illustrations
The Pattern Library
Icons
Icons can be used for a variety of things across a web application and its nice to keep your project's icon set fresh. This list provides you a TON of free and easily customizable icons to use throughout your project.
The Noun Project (Also has a great photo selection)
Flaticon
Heroicons
icons8
Font Awesome: Cheatsheet
*Honorable Mention (because of it's free option!): Shape.so
Animations
The use of animations on the web is very popular already, and can be used for stylistic and attention grabbing purposes. I will leave the specific learning of javascript animation frameworks for another day, but instead provide a list of free resources that allow for the free downloading and insertion of pre-made animations (Lottie), animation prototyping tools, and principals for when and how to use animations across your projects.
Lottie by AirBnb
LottieFiles: Searchable lottie animations
Framer: Free animation prototyping tool
Origami: Free animation prototyping tool
Material Design: Understanding Motion
Conclusion
With the right box of sharpened tools, we all can produce more beautiful, more powerful, and more effective work. One of the tools you should include in your dev toolbox is the resources for finding beautiful and customizable vector graphics. I hope you find some value in the above resources, and are able to pick and choose a few of your own favorites to sharpen this fun and important tool in your box.
Top comments (4)
Amazing resources. 💯🙌🏽
Some good resources thanks for sharing.
Thanx for awesome resources
Thank you for those resources :)!