Designers Take: Free Vector Resources for Devs

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.