loading...
Cover image for Designers Take: Free Vector Resources for Devs

Designers Take: Free Vector Resources for Devs

lukekyl profile image Kyle Luke ・2 min read

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.

Discussion

pic
Editor guide
Collapse
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’»

Amazing resources. πŸ’―πŸ™ŒπŸ½

Collapse
andrewbaisden profile image
Andrew Baisden

Some good resources thanks for sharing.

Collapse
asyraflabs profile image
Amirul Asyraf

Thanx for awesome resources

Collapse
kethmars profile image
kethmars

Thank you for those resources :)!