Top 10 free graphic resources for web developers

In my article on "The 8 steps to creating a website or web application", I explained that in some cases design can't necessarily be handled by an expert, and must be delegated directly to the developer.

Even though the professions of designer and developer are very different, there are now many resources that make it easy to offer a simple yet elegant design.

Personally, I love design, and my development projects regularly include this aspect, so over the years I've gathered platforms that allow me to deliver quality results thanks to graphic elements that are royalty-free or commercially usable.

So today I've decided to present the list of free graphic resources that I mainly use for designing applications and websites:

Flat UI Colors

Color palettes

If I had to find a single answer to the recurring question "How do you manage to design applications while being colorblind?", it would simply be: "Flat UI Colors".

You don't have a painter's eye when it comes to choosing colors for your projects? Flat UI Colors offers 14 different palettes gathering 280 colors hand-picked and that go wonderfully well with one another.

The icing on the cake? Click on a color and the corresponding hexadecimal code (or other format) will be directly copied to your clipboard for reuse elsewhere!

Available here: https://flatuicolors.com/

uiGradients

Gradient palette

Sometimes a simple color isn't enough to bring a design to life properly, but as a non-designer, it's tricky to build a decent gradient on your own.

That's why I use uiGradient, and unlike the hundreds of sites offering randomly generated gradients supposedly "mathematically" correct, uiGradient is a static palette that designers can contribute to, but where all gradients are validated beforehand.

You'll find hundreds of gradients, each more beautiful than the last, all you have to do is find the one made for your project!

Available here: https://uigradients.com

Flaticon

Icons

This is THE largest library of free icons available on the web. It totals (including the premium version) more than 2.5M icons grouped into several hundred categories.

Unlike Freepik, it's very easy to find a whole set of icons sharing the same graphic style, and most of the time each icon comes in several color variants.

Bonus: Creating an account gives you free access to the icon customization tool as well as the creation of infinitely repeatable "wallpapers"!

Disponi

Available here: https://flaticon.com

Unsplash

Photos

Unsplash is one of the image libraries most appreciated by creators online because it contains more than a million beautiful, high-quality photos.

But the difference with most other platforms lies in the fact that you can use the images for commercial purposes without having to credit the author or the platform! And even though I encourage you to credit authors as much as possible, this makes things easier for certain projects where crediting the author would be difficult without harming the design!

Available here: https://www.unsplash.com

Pexels

Photos and videos

Can't find what you're looking for on Unsplash? Then go check out Pexels, and the platform even offers gorgeous royalty-free videos!

Available here: https://www.pexels.com

UnDraw

Illustrations (svg)

UnDraw is THE go-to gallery of SVG images with more than 500 unique illustrations, all sharing the same graphic style and beautifully designed.

Be careful though, this platform is sometimes overused, and if your project's design uses too many illustrations from this bank, it can quickly end up looking like many other sites or applications.

Available here: https://undraw.co/illustrations

ManyPixels Gallery

Illustrations (svg)

The ManyPixels platform's gallery isn't the most extensive, but I really like the very soothing vibe the illustrations bring. Whether used in the foreground or background, the images blend in perfectly as long as you have a fairly light and neutral design.

Bonus: the site includes a color editor to change the shade of all illustrations in real time.

Available here: https://www.manypixels.co/gallery

Haikei

Shape generator (svg)

Sometimes the line between an overly simplistic design and a simple yet elegant one comes down to very little: a graphic transition between the different sections of your pages by adding a few waves, or even replacing the eternal circle with a blob that has a bit more character—there's a lot you can do with SVG shapes!

Haikei is a wave generator that lets you get very different results depending on the settings entered. In addition to being practical, the tool is nice-looking, easy to use, and very polished.

And with the clip-path property, you could for example give a particular shape to profile photos using a blob generated by the app!

I used to recommend Get Waves and Blobmaker, but Haikei combines all their features and much more since you can generate a huge variety of different shapes!

Available here: https://app.haikei.app/

Hero Patterns

Pattern library (svg)

It's not necessary to put large images in the background of a site to make it appealing—that often weighs pages down and does nothing to improve text readability.

One alternative is to add a discreetly repeatable pattern to give a more polished effect than a simple background color. For that, I often use the Hero Pattern library.

The site isn't very pretty and some patterns are very specific, but there's a lot you can cleverly repurpose for unique results!

For example, I used it to build the background for my tutorial "Creating a responsive credit card in HTML/CSS"

Available here: https://www.heropatterns.com/

Google Fonts

Fonts

Having a good font is like doing your housework properly—people don't notice it, but on the contrary, if you neglect it, that's all anyone will notice.

Google Fonts is perfect for choosing an aesthetically pleasing, royalty-free font that's especially compatible with the web! And there's no risk of stumbling upon a missing character by surprise—the fonts are very complete.

Bonus: Most are available in multiple weights, and integrating them into the final code takes just one line!

Available here: https://fonts.google.com/