DEV Community

Cover image for Designers Take: Free Vector Resources for Devs
Kyle Luke
Kyle Luke

Posted on

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)


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!.

FreePik: Stories
icons8: illustrations
The Pattern Library


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)
Font Awesome: Cheatsheet
*Honorable Mention (because of it's free option!):


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


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)

tracycss profile image
Jane Tracy 👩🏽‍💻

Amazing resources. 💯🙌🏽

andrewbaisden profile image
Andrew Baisden

Some good resources thanks for sharing.

asyraf profile image
Amirul Asyraf

Thanx for awesome resources

kethmars profile image

Thank you for those resources :)!