Web designer’s ultimate list of free resources

Whether you build a site or an app you need to use some resources in your design process: images or fonts, background patterns or color suggestions. Maybe you’re stuck in a rut and need some inspiration?

In this article I’ll show you the best free resources to use in your next design. These are the resources I use everyday and I decided to compile them and create this ultimate list of free resources and share it with you.

All the resources are indexed for quick access on GitHub, without descriptions or associated pictures.

Updated on 6 September 2015 with new resources added in: Typography, Favicons, Placeholder Text, Site optimization, Inspiration.

Updated on 1 December 2015 with new resources added in: Free stock videos, Pattern libraries, Placeholder Text, Color Pallets, Typography, Inspiration.

Web designer’s ultimate list of free resources index

1. Free stock photos

Let’s take a look at some of the best free stock photos sites.


Picjumbo has a great assortment of searchable pictures. You can even check how the picture would look on your site with some overlay text or buttons by selecting the “test drive” option.

The pictures included in the Business category are perfect for your site’s hero/banner area.
The site is easily searchable, pictures are categorized and are free for commercial and personal use.


Pixabay not only includes really high-quality photos, but also vectors and illustrations. The submitted pictures are curated by the site admins, so you can be sure that the quality is high.
You can use the photos freely, as they are released under CC0 – Public Domain license.


LibreShot is an easy to use site that features really great images. It even has a really interesting Macro category. The best part? All the pictures are released under Creative Commons Zero, so you can use them everywhere.


StockSnap has a nice collection of really high-quality pictures. They are released under Creative Commons Zero license and you can search or sort the images by: Date, Trending, Views, Downloads or Favorites. If you’re a web designer and you need background pictures for the Hero or Testimonial sections of your site, you must check StockSnap.


Pexels currently has over 2700 pictures on their site, all released under the CC0 license. They publish daily 10 new images hand-picked from free image sources like Unsplash, Gratisography, Little Visuals so you can be sure that you’ll only find high-quality pictures.


IsoRepublic is a site founded by designer and photographer Tom Eversley. The site is easily searchable and the photos are organized under categories. If you’re after really high-quality Urban or Architecture pictures this is the site for you. You can also find some amazing pictures under the Textures categories, really useful if you need a background image in your designs.

Designer Pics

DesignerPics is created by web designer & developer Jeshu John. The featured images are top-notch and free to use for personal or commercial projects.

Realistic Shots

Realistic Shots has some amazing pictures released under a CC0 license in the following categories: Startup, Nature, People, Travel, Architecture.


SplitShire offers a selection of super high-quality photos ready to use in your next personal or commercial project.


FoodiesFeed features free food related images and illustrations. If you’re building a restaurant theme, this is the perfect site for photos. The only problem is that after you browse the images, you’ll get really hungry :)


Unsplash is one of the first free stock photos sites and is well-known for its high-quality pictures ranging from technology to nature. The images are free to use and they publish 10 new pictures every 10 days.


Gratisography is a well known site with free and beautiful pictures. The pictures from the Whimsical category are really interesting and expressive.

User Inter Faces

A collection of user faces to use in your projects: admin section, testimonial area, etc. The users in the Authorized category gave their consent to be used on live websites. If you need some names for the faces, you can use UI Names.

2. Placeholder Images

Using a placeholder image service speed-up your workflow considerably: you won’t have to edit or crop the pictures anymore, instead you’ll add the image URL directly to img source attribute.

Usually, the URL look something like this: placeholder.com/width/height. Some services may serve you a gray scale picture if you add g in front of the width: placeholder.com/g/width/height


LoremPixel is one of the first placeholder services. It has 13 categories to choose from and can serve color or gray scale pictures. You can even add a custom text to be displayed on the image. If you don’t specify a certain picture to be shown, the images that will be displayed will be randomized.


If you want some nice placeholder images from popular cartoons, then you have to use LoremPicsum. The image categories are: Finding Nemo, Futurama, RIO, The Simpsons and UP.


Unsplash.it is a really awesome service that generates placeholders using pictures from Unsplash. This means that the images will always be top-notch. The instructions to generate the placeholder images are very clear and you can simply copy them from the main page.


PlaceIMG offers images for layout purposes only and fall under Creative Common Licenses. While the license is a little confusing, the images are great and the site is really easy to use.


The internet is for cats, so it was only normal that a placeholder service dedicated to our favorite furry friend to exist.


Placehold.it doesn’t display photos, instead uses grey placeholders.

For example, this placehold.it/350x250&text=This is a test wil generate this:

placeholdit - example

3. Image compression services

After you decided what pictures to use in your design or article, you have to optimize them and decrease the file size to decrease loading time and save bandwidth. You can do this in an image editing software or you can use an online image optimization service. You just have to upload the image and the site will quickly reduce the file size without losing too much image quality. You can barely see the difference between the original photo and the processed one.

To test the compression size, I used the Sand Dunes photo from IsoRepublic.
The original photo is a 4.94 MB JPG and has a resolution of 4000×2666.

Test image
Test image


Despite the name, TinyPNG supports both PNG and JPG files. The really cool thing is that it supports and preserves transparent PNGs.

One thing to notice is that the compression is lossy and you would be able to see the differences between the original and compressed file.

The user interface is extremely simple and efficient, the file size limit is 5 MB and you can upload up to 20 images at a time, but after compression you have to download them individually.

In our compression test, TinyPNG performed exemplary: from 4.94 MB to 1.58 MB. At normal resolution, you can barely notice any difference, but if you zoom in you can see some small image pixelation.


CompressJPG has a simple drag & drop interface. You can adjust the compression settings and you can download the images individually or in a ZIP archive.

Our test image was compressed to 2.52 MB using the default settings.


Compressor supports 4 file formats: JPEG, PNG, GIF and SVG and the file size limit is 10 MB.

The test image was compressed to 2.54 MB using the lossy compression.

My favorite online image compression service is TinyPNG. It has a simple interface and the best compression rate. However, it only supports JPEGs and PNGs and you can’t adjust the settings.

CompressJPG allows you to adjust the settings and see the chamges in real time and you can download all the pictures in a zip file.

Compressor supports 4 file types, has a 10 MB image size limit (more than enough) and you can download your photo to Dropbox or local hard drive. The only downside is that you can only upload one picture at a time.

4. Free stock videos

One popular trend is to display and auto play a video in the Hero/Banner area of your site. If you don’t have your own video, you can use one from the sites mentioned bellow.


Coverr is the new kid on the block, but already boasts an impressive collection of really useful videos. All the videos are released under CC0 – Public domain and they release 7 new videos every Monday. The site is easy to use, all the videos are categorized and you even get code snippets to easily add the video to your web project.

Life of Vids

Life of Vids has footage videos, loops and clips free of any any copyright restrictions. To use a video, you have to visit their Vimeo account and download it from there.

Pexels Videos

Pexels Videos has a large library of CC0 videos. You can use the videos any way you want and attribution is not necessary.


Videvo has a large library of over 3000 videos. The license used is Creative Commons 3 and to download the videos you have to register for a free account or login with Facebook/Google+/Yahoo.


Distill is currently in Beta, so the site is a little buggy. The videos are free for personal and commercial use and 10 new videos are released every 10 days.


Vidsplay offers a large collection of royalty-free stock videos ready to be used in your next project. You can search for videos, but the videos are not categorized, so you’ll not be able to browse specific categories.

5. Pattern libraries

Luckily we’ve moved past the era of Web 2.0 design with harsh gradient backgrounds and glossy buttons. But some subtle textures can add interest to your site or app if they are used tastefully.

Subtle Patterns

Subtle Patterns has one of the most popular pattern libraries. The site is curated Atle Mo and all the resources are released under a CC BY-SA 3.0 license. This means you can use the textures in your personal or commercial projects, but you have to give credit.

Place Pattern

Place Pattern could also be filed under the Placeholder images category. It generates unique patterns for your design, some patterns are really subtle, while are others are really “in tour face”.

The Amazing Pattern Library

The Amazing Pattern Library currently has over 50 patterns ready to use. The patterns are interesting, some are subtle, others are more bold, suitable for an infographic or an illustrative site or project.

6. Color Pallets

Color Pallets are really useful if you’re tired of the same colors that you’re using and you need some new color inspiration.

Flat UI Colors

Flat UI Colors is one of the most popular color pallets sites. It only has 20 colors, but you can be sure that they look good together. I’m sure you’ve seen some of the colors suggested here used on numerous websites.

Material Palette

Material Design is a popular design trend nowadays and if you need some color suggestions for you next Material Design inspired app, this site is perfect. You start by selecting 2 of the 19 colors and then an 8 color pallete is generated. Really cool and useful!


Color-hex allows you to select colors from an already established color pallete or create your own. Select a color and all the color information, tints, related colors will be shown. It even generates some CSS3 examples for you to use.

Adobe Color CC

If you don’t want to open you Photoshop and use the Adobe Kuler plugin, you can use an online version. Adobe Color CC is a powerful app, yet simple to use: simply drag the sliders to your favorite colors and see the suggested colors that go well with your selections or browse other user created pallets.


Palleton is an online app somehow similar to Adobe Color CC. You can select your color from the colored circle and your color pallete is generated. What I find really useful are the tools at your disposal: you have presets, numerous preview options, a lot of examples with your generated colors – ranging from full site layouts to animations and artworks and a really useful Vision Simulation mode. This mode allows you to simulate color blindness, to desaturate the colors or to view the results in a 256 color legacy mode.

If you want to test the color pallete and plan for accessibility, this web application is heavily recommended.

0 to 255

0 to 255 generates darker and lighter colors based on a selected color.

UI Gradients

UI gradients has a nice library of color gradients that you can immediately use in your design since the CSS gradient color is provided.


A collection of 20 nice and modern gradients are ready to be used in your next site!


Ever wondered what colors a specific brand uses? This site contains an exhaustive list of all the major brands and the colors associated with them.


Pictaculous is an amazing web app by the awesome folks at MailChimp that generates a color palette from a picture. This is really useful if a client sends you a picture that they want to use on the site. You can simply use Pictaculous to extract the main colors from the picture and then build the site using the generated colors.

You even have Kuler (Adobe Color) and ColourLovers palette suggestions based on the picture colors and you can download the palette as an Adobe Swatch file.

7. Typography

Typography is one of the most important aspects in design. If your fonts are properly matched and readable, the user will enjoy using your site or application.

To increase the readability of your text, don’t forget to set the proper line-height. To calculate the line height, you can use this formula: font size * 1.5. For example, if you have a 16 pixel (1 em) font-size, your line height will be 24 pixels (1.5 em).

Another aspect to take in consideration is the text line length. You don’t want it to be too short or too long as this would be too tiring for eyes. Try to use around 50 – 80 characters per line.

Fonts are generally categorized in:

  • serif – According to Wikipedia, a serif is a small line attached to the end of a stroke in a letter or symbol. In print, serif fonts are generally preferred because it’s believed to increase the legibility of the text. Examples: Times New Roman, Bitter, Droid Sans
  • sans-serif – These are fonts without serifs, without the small lines at the end of the letter. On the web, sans-serif fonts are generally used for content. Examples: Arial, Helvetica, Source Sans Pro
  • script – Script fonts mimic handwriting. Because they use letter decoration to add interest and mimic handwriting they are better suited for headings. Examples: Pacifico, Handlee, Satisfy

7.1 Free fonts

After this short introduction, let’s take a look at some free font resources.

Google Fonts

Google fonts is one of the most popular free font library on the web. You can directly download the font or include it on your site using Google’s CDN. It’s really easy to choose a font, since you can test it, sort the fonts by various criteria or see some font pairing suggestions.

Font Squirrel

Font Squirrel is another popular site that has an impressive library of free fonts. The site is really easy to use, you can search or browse categories or “test-drive” fonts.

Font Space

Font Spacefontspace
Font Space has an impressive collection of over 27 000 free fonts. Some fonts look amazing, while others look a little rough around the edges. Don’t forget to always check the license to see if the fonts you choose are free for commercial use.

Font Fabric

The available fonts are gorgeous and you can really see that authors put good effort in creating them.

Da Font

Da font has a huge library of over 28 000 fonts. Be sure to check the license, as some fonts are only available for personal use. Luckily, you can sort by many criteria, including the license type.

1001 Fonts

1001 Fonts has over 7500 fonts and over 4000 fonts for commercial use. Before you download a font be sure to check the license to see the if you have to credit the author!

7.2 Font Utilities

We’ll take a quick look at some useful font utilities like: font pairing and size suggestions sites. Using these resources will guarantee that your fonts will look great.

Font Pair

Font Pair shows pairing suggestions using fonts from Google.

Beautiful Web Type

You can use this site for some really cool font pairing suggestions using Google Fonts. The examples presentation is really cool and interesting.

Google Fonts Typography

You can see some font pairings in action and read Tales from Aesop’s Fables. Good stuff.

Type genius

Enter a font and Type genius will show pairing suggestions and display real-life websites that use the same font pairing.


Typewolf is an awesome resource created by designer Jeremiah Shoaf. His goal is to create the best web-typography resource on the net and I think he achieved it. You can find comprehensive lists about font pairing suggestions, in-depth guides and read blog entries about typography.

The Art Of Mixing Typefaces Google Fonts Edition

A really useful article and infographic about Google fonts pairing that features 20 fonts and the suggested matches.


Tobias Ahlin created this list of 11 font pairings. The suggested fonts are free for use, since they are Google Fonts.

Type Scale

If you’re not sure what size your heading and copy fonts should have, then Type Scale is the site for you. After you finish tweaking the font options, you can easily download a custom CSS snippet that contains the rules for body and heading typography.

What the Font!

Sometimes you find a really nice font and you want to use it too. But you don’t know the name of the font. Enter What the Font! Upload an image of the font and this cool site will find the closest font matches.

8. Font Icons and Font icons generators

The main advantage of using font icons instead of classic image icons is that you can easily style them with CSS. If you want to change the size, color or add some shadows, you can do that with CSS and you won’t have to fire up your image editing software and adjust the image icon settings there.

To use them in your projects, you simply have to load the icon font’s CSS file:

8.1 Font Icons

Now let’s take a look at the best free font icons around the web.

Font Awesome

Font Awesome is the most popular icon font site. It has 585 icons, ranging from general purpose icons to specialized ones, like medical icons.
You can download the icons or include them on your site via CDN.


The 178 Octicons are created by the awesome folks at GitHub. If you’re building an UI, you might want to take a look at this icon set, since they are primarily created for this purpose.

Foundation Icon Fonts

You don’t have to use Foundation Framework if you want to use these icons on your site. They currently have a collection of 283 elegant and high-quality icons to include in your next project.


The 528 Ionicons are created for the Ionic Framework, but you can use them freely in your projects. You can download them or include them via CDN.

Open Iconic

open iconic
Open Iconic has 233 open source icons. You can get them in a variety of file formats: from SVGs and PNGs to TTF and EOT.

Payment Webfont

If you need to add an icon of a payment system, Payment Webfont is the way to go. You have 34 glyphs to choose from.

Themify Icons

Themify Icons offers you 320 font icons, 100% free. The icons are very cool and modern, since they are inspired by the iOS7 look.

Linea Iconset

Linea Iconset has an impressive collection of over 730 outline icons. If you want a modern “ghost-like” look for your next project, take a look at this awesome resource. The license is Creative Commons Attribution 4.0.

Web Hosting Hub Glyphs

WebHostingHub Glyphs has a huge collection of 2075 icons. You can easily find an icon for your taste by searching of visiting the icon categories. License is CC3.

Map Icons

Map Icons has an impressive collection of over 140 icons licensed under CC3. They are ideally used to indicate places on maps: restaurants, subways, bars, leisure activities etc.

PW Drawn Icon Font

PW Drawn Icon Font has a collection of 90 icons that look like they were drawn by hand. You can use them in you personal or commercial projects.

Weather Icons

Weather Icons provides us with 189 icons ready to use in your weather-related projects.

Flat Icon

Flat Icon is the largest database of free vector fonts. The site offers flexibility in choosing you preferred icon format: fonts, PNGs, SVGs, PSDs. THe license used is free license with attribution. You can use the icons, but you have to give credit.

Modern UI Icons

1259 icons are ready to use in your next projects. The web font version is released under MIT license and contains a smaller selection of icons, but you can easily convert the SVG icons to fonts using Font icons generators.

Material Design Icons

Material Design Icons has an impressive collection of over 1200 icons licensed under the SIL Open Font License 1.1, so you can use them in both personal and commercial projects. The icons are inspired by the Material Design trend (hence the name) and new icons are added regularly by the community.

8.2 Font Icon Generators

If you have your own icons that you want to convert into an icon font, you can use some really useful online apps. Upload an SVG icon and it will be converted to a font icon.

Maybe you only want a few icons out of an icon library, or you want icons from different libraries, for example 3 icons from Font Awesome, 1 from Octicons and 5 icons from Foundation icons. You can combine them in one font that only has 9 icons, instead of installing 3 different font libraries.

All these tasks can easily and quickly be solved by using Font Icons Generators.


You can create you own custom font icon by uploading an SVG file or you can browse the collection of ready – made icon fonts and select the ones you need to use. This is a very practical solution, since you’ll only download the icons that you need in your project, not the entire icon collection.


To create your icon font from a custom SVG or to choose fonts from an impressive library, you have to create a free account. After you login, you’ll be creating font icons in no time. The UI is great and really easy to use, so you won’t have any problems creating font icons from the many available free or premium font icon libraries.

You can even host your generated icons in the cloud with the free service provided. This service has a limit of 5000 page views/month. A pretty good number, especially if you’re just starting out.

Icomoon App

Icomoon app is another font generator service. The free Icomoon icons are really great, and you have 490 icons to choose from. If you need more icons, you can add other free or premium icon sets.
One really cool thing that sets Icomoon app apart is that you can save your icon fonts as SVGs and PNGs, not just as fonts.

9. Placeholder text

Content is king, but you’ll very rarely have some meaningful text ready for your site. Clients don’t provide content, so you’ll have to use some dummy text instead.


Lorem Ipsum is the industry placeholder standard. It’s a passage taken from a piece of very old Latin literature.

Not Lorem Ipsum

Not Lorem Ipsum provides placeholder text for over 40 industries. It provides realistic placeholder text for a main page and a sub-page.

Check this real example, taken from the App development example section:

This app does everything you could possibly want it to do and not only that, it is beautifully designed and extremely intuitive to use. Download it from the App Store for FREE if you don’t mind some adverts popping up or if you prefer an ad-free experience then you can down load the ad-free version for 99p.

If you want to add some realism to your mock-ups, Not Lorem Ipsum is the obvious choice.


Fillerama offers you quotes from the scripts of popular movies and TV series: Arrested Development, Doctor Who, Dexter, Futurama, Monty Python, The Simpsons, Star Wars and Lorem Ipsum. At least, the Lorem Ispum passage is not that common.


Fillerati provides content from classical works by famous authors like: Lewis Carroll, Jack London, Jules Verne or H.G Welles.

Picksum Ipsum

Picksum Ipsum generates quotes and lines from your favorite Hollywood legends: Clint Eastwood, Michael Caine, Jim Carrey, Morgan Freeman, Johnny Depp or Christopher Walken.

Corporate Ipsum

Corporate Ipsum is the ideal placeholder text to use in your next corporate project, thanks to the business buzzwords used: synergy, clicks-and-mortar solutions, revolutionary ROI.

UI Names

Sometimes you need a list of names to add to your site sections, like testimonial or admin sections. You can easily generate names from 46 countries and add them to your apps.

10. Favicons

Favicon is usually the most neglected component of your website. Without one, your site will be difficult to bookmark, the favicon won’t appear in your browser tab and you’ll get a lot of File not Found 404 errors.

Generally, the site logo is used as a favicon. The minimal size is 16×16 pixel icon, but 32×32 px or bigger are also common. One favicon.ico file can contain more than one icon: 16px, 32px versions are usually grouped together.

To add a favicon to your site, you have to add the following code in the head section of your site:


If you don’t want to use an editing software to create your favicon, you can use this online generator. Yo can either create you icon or import it and save it as a .ico file.

Real Favicon Generator

Real Favicon Generator is an awesome tool that creates favicons for all the possible devices and resolutions. You have to submit a square picture, minimum 70×70 pixels and your favicons will be generated. You can even test how your site’s favicon appears on various devices by using the favicon checker.

I always use this awesome site to create and test my favicons.

Audreyr’s Favicon cheat sheet

Audreyr’s Favicon cheat sheet is one of the best and comprehensive information source about favicons on the web. Be sure to read it before creating your next site icon!

11. Site optimization

After you’ve completed your new website project, it’s time to test it for speed, optimization and device compatibility.

For a website, speed is crucial. Studies show that if your site has a high loading time, your potential visitors will lose interest and leave the page. Also, a fast response time, will place you higher in Google results page.

Mobile users currently represent over 50% of the online market, so you have to be sure that your site is responsive and looks good on various devices.

Google Page Speed Insights

Enter your web address and Google will display a list of suggestions to improve your site. Some are easy to implement, while some are more difficult, depending on your skill level or technology you use to power your website.

Pingdom Tools

Test you site with Pingdom Tools and find out its performance. You can see a detailed report about speed, resources and general performance. They even have suggestions to improve the performance.

GT Metrix


WebPage Test

WebPage Test is another online site tester that goes really in depth with site analysis.

Gift of Speed

Gift of Speed can test your site speed and also has additional tools to test various aspects, like image delivery test, a checker for broken links, etc. Read the guides to dramatically boost your site performance.


Responsinator is a useful app that tests your site on various devices and screen resolutions.

Responsive Design Checker


Am I Responsive?


Browser Shots

Enter your site address and Browser Shots will take screenshots of your site on various browsers, operating systems and resolutions. A really useful tool to check the design consistency on various platforms. The only small downside is that the process takes some minutes, since you have to wait for the process queue to finish.

12. Inspiration

If you need some inspiration for your next project, visit this sites and find the latest trend!


Dribbble is the go-to place for quality design and inspiration. You will find the coolest designs here, from beautiful websites, awesome UIs to inspiring vector art.


You can post your portfolio on Behance and receive valuable feedback or job opportunities. Browse other designers portfolios and be inspired by their work.

Site Inspire

Site Inspire showcases well designed sites. If you have a great site design you can submit it and if it’s good enough, they’ll publish it.

Land Book

Land Book features the best landing pages around the web.

One Page Love

Get some inspiration for your next one page site design!


Flat design is still a popular trend and this site features the best flat sites.


Awwwards is one of the most important inspiration and design critique sites. They organize yearly conferences and prize-giving ceremonies. You can submit your website and can vote for site of the day.

Material Up

Material Up showcases the best apps and sites that use Material Design. You can also read article about material design here.

Call To Idea

Call To Idea has a nice collection of specific design elements to inspire you: footers, forms, 404 pages, about pages and more.

Header Love

The header/hero area is the first section your visitors will see when browsing your site. If you need some inspiration or just want to see the latest header design trends, just visit headerlove.com

Very Nice Sites

Very nice sites, as the name suggests, features a collection of nice site designs curated by Max Min.

Brief Generator

Brief Generator is a different inspiration source. Instead of a list of awesome sites, it generates a design brief for you to follow when building design for practice.


A big thank you goes to the creators of these awesome free resources. Thanks to them, the webdesign community is a better place.

I hope you’ll enjoy the resources I compiled for you. If you liked this list, don’t forget to spread the word and share it with others.


Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles


Leave a Reply

Your email address will not be published. Required fields are marked *