August 31, 2020

Free Web Design Tools and Resources

Free Web Design Tools and Resources


Over time we have collected many interesting and essential web design tools and graphic resources every freelancer designer or non-designer should know! Make your website UI/UX friendly and amaze your visitors with ready-made graphic designs. Simply power-up your web and graphic design projects whenever it is a landing page, blog post, email newsletter, theme, template, print material, or a social media post.

Our web design toolkit for bloggers, designers, non-designers, artists, and creatives provides essential design materials, apps, and resources that will enhance your design skills and speed up your workflow! Even if you don't have any design experience, you will find most of these design tools very user-friendly and useful when creating your next project. And best you'll get all of this for absolutely free. You don't have to spend a penny on hiring a graphics designer or paying fees to graphic design shops! These tools will save you time and money, so you'll probably don't want to miss it! This article won't give you the answer to what are the best free web design tools. You'll have to figure out yourself!

This web design toolbox will cover a lot of graphic design freebies and free website design tools including Free Icons, Stock Images, Stock Videos, Illustrations, and Fonts, Color Scheme and Element Generators, Compressors, and more...

Make sure to bookmark this page as we will update it from time to time! We also have other collections: Free Web Development Tools or Free SEO Tools.

Minify, Compress & Resize Images

These tools will allow you to make your website faster and save bandwidth by compressing or resizing your images.
  • ResizeImage - Free online image resizer.
  • TinyJPG - Smart JPEG compression by 40-60% without losing quality.
  • TinyPNG - Free lossless image compression tool. Powered by smart PNG compression algorithms that shrink the image by 50-80% while preserving full transparency and quality.
  • ImageCompressor - Online image optimizer that uses lossy compression algorithms to reduce the filesize of JPEG and PNG images to the minimum possible size without losing quality.
  • PicResize - Free easy to use online image resizing tool. You can crop, resize, and edit any image from your PC or a URL.
  • Compress-or-Die - Online image compressor and resizer for design professionals.
  • iLoveIMG Image Resizer - Resize JPG, PNG, SVG or GIF by defining new height and width pixels. Change image dimensions in bulk.
  • Kraken Image Optimizer - Free online image optimizer by Kraken.io, free edition offers only compressing of images.
  • Squoosh - Free online image compresser and resize. Easily compress images right in your browser.
  • Img2Go - Free online image compresser and resize tool. Reduce the size of an image or resize it to a new dimensions.

Color Pickers, Color Schemes and Palettes

Get inspired with thousands of design-ready color palettes and schemes or generate a new color palette from a single color.
  • Hailpixel - An easy way to create and share color palettess.
  • Color Space - Enter a color and generate cool color palettes.
  • Adobe Color CC - Create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.
  • Coolors - Super fast color schemes generator.
  • ColorFavs - Free random color palette creator. simply discover new colors or palettes to use on your projects. You can also create a palette from an image (you can also load from URL).
  • Canva Colors - Design wiki on colors.
  • Material Palette - Material design color palette generator.
  • Color Safe - Generate color palettes.
  • ColorHunt - Thousands of trendy hand-picked color palettes.
  • ShutterStock Colors Schemes - A full spectrum of beautiful colors for any color palette or color scheme.
  • LolColors - Curated color palette inspiration.
  • BrandColors - Collection of official brand color codes.
  • 0to255 - Free color picker tool that helps you to find color variations. You can also choose colors for your design files and adjust them fast and easy.

Element Generators

Easily create new design elements such as buttons, menus, ribbons, backgrounds, and more...

Online Editors

  • Pixlr Editor - Online Photo Editor.
  • Visme - Create engaging presentations, professional infographics, and other stunning visuals online.
  • Vectr - A free graphics software used to create vector graphics easily and intuitively.

Free Icons/Cliparts

Find free SVG & PNG icons for your projects from and for designers and developers around the world. Some of the services require you to give attribution to the original author. so please make sure you check the license info of each material you use.
  • Iconify - Search for glyph fonts and SVG icons on multiple free or open source collections.
  • Font Awesome - Popular and easy to use icon set and toolkit. Get vector icons and social logos on your website.
  • SimpleIcons - Over 1400 Free SVG icons for popular brands. CC0 licensed.
  • RemixIcon - Set of open-source neutral-style system symbols elaborately crafted for designers and developers. free for both personal and commercial use.
  • Icons8 (Free License) - Download free icons for free.
  • GlyphSearch - Search for icons from icon packs such as Font Awesome, Foundation, Glyphicons, and more.
  • UXWing (Free License) - Exclusive collection of carefully crafted vector icons for user interface design & Web and Application development.
  • IconFinder - Free and premium vector icons. 3+ million SVG icons. Make sure to check if license of free icon whenever it is "free for commercial use" or "Creative Commons (Attribution 3.0 Unported)".
  • Noun Project - Over 2 Million curated icons, created by a global community.
  • IcoMoon - Over 5k open source and free icons available.
  • IconMonster - Free simple icons for your next project.
  • Fontello - A tool to quickly pack vector images into webfonts.
  • FlatIcon (License Info) - Large database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
  • BoxIcons (License Info) - Open source web project that provides high-quality simple vector icons for designers and developers.
  • LineIcons (License Info) - Free collection of 2000+ handcrafted line icons for designers and developers developing modern user interfaces.
  • IconArchive - Icon database of 730k+ icons and 2400+ iconsets. check License section of each icon.
  • IconShock - Get free SVG and PNG icon packs free to use for all your apps, web and social media projects.
  • PNGGuru - Get free PNG clipart images for non-commercial use.
  • Iconscout Icons (Licensing) - Search through 2 Million+ Icons and Images from 1200+ Contributors.
  • IconStore (Licensing) - A library of free vector icons for personal and commercial projects, designed by first-class designers.
  • GraphicBurger (Licensing) - Collection of icon freebies.
  • FreebiesBug - Hand-picked resources for web designer and developers.
  • StreamlineIcons (Free Pack License) - Download 30,000 free icons.
  • PNGTree Icons (License Info) - Download free icons in PNG, Vector and PSD format.

Free Fonts

  • Google Fonts (previously Google Web Fonts) - Search for free fonts. over 800 font families.
  • Font Squirrel - A great source for free fonts.
  • Abstract Fonts - Free simple icons for your next project.
  • DaFont - Archive of freely downloadable fonts.
  • FontSpace - Find and download legally licensed fonts. The site offers a collection of 67,000+ free fonts from over 2,900 designers.
  • 1001 Fonts - 22,167 free fonts in 11,870 families.
  • Urban Fonts - Download Free Fonts and Free Dingbats.
  • FontSpring - tons of free fonts for designers on a budget.
  • Fontsly - Big collection of Free Fonts for Download. Browse fonts by style, by type, by alphabet, by author or by popularity.

Free Textures, Backgrounds, & Patterns

Free quality free stock textures, backgrounds, and patterns. Most of the services require you to give attribution, please make sure you read the instructions on how to credit the authors properly.

100%-Free Stock Images

Find 100%-free stock photos and images contributed by designers around the world for your design needs. Most of the design materials are published under the "public domain", or CC0 (Creative Commons Zero) licenses and are free for both personal and commercial use (You can use it for a wide range of projects whenever if its a website, template, print material, social post, or else). Some of the services require you to give attribution to the original photographer or the service provider so don't forget to check the license info of each element you use. Make sure you know What is the difference between "Commercial Use"and "Editorial Use".
  • FreeImages (License Info) - Browse over 300,000 free stock photos and find the perfect royalty-free image quickly.
  • FreeImages (License Info) - A great source for free handpicked, non-stocky photos from designers around the world.
  • Pixabay (License Info) - Get over 1.8 million high quality stock images and videos shared by the community.
  • StockSnap (License Info) - Hundreds of free high resolution stock images for creatives.
  • Unsplash (License Info) - Beautiful, free high-definition images and photos that you can download and use for almost any project with no attribution required.
  • Pexels (License Info) - Inclusive royalty-free stock of high-quality photos.
  • GratisoGraphy (License Info) - Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restrictions.
  • Burst By Shopify (License Info) - Free stock images that were shot by global community of photographers. Free use them for commercial use with no attribution required.
  • NegativeSpace (License Info) - High-Resolution free CC0-licensed stock photos.
  • Iconscout Photos (License Info) - Collection of 9K+ royalty free stock photos for personal and commercial use.
  • LibreStock (License Info) - A service that index the best free photos from the top stock sites, so that you can find that perfect image much, much quicker.
  • Motosha (License Info) - Community-based archive that pffers free stock photos for blogs, websites, and all other projects!
  • FreeRangeStock (License Info) - Royalty-Free stock images. Totally free commercial photography and textures.
  • Vecteezy (License Info) - High-quality vector graphics for personal and commercial use.
  • PicJumbo (License Info) - Free high-definition vector graphics for personal and commercial use.
  • Canva Free Photos (License Info) - A library of royalty-free stock images from Canva.
  • TWNSND (License Info) - Find free historical and vintage photos from the public archives. Most photos are available for commercial use, but to make sure check the link to the original Flickr post.
  • FocaStock Photos (License Info) - Curated collection of CC0-licensed images that can be used for free on commercial projects.
  • RawPixel (License Info) - Find free high-definition stock photos for personal or commercial use.
  • ISORepublic Images (License Info) - Curated collections of free high-resolution CC0 photos and videos.
  • SplitShire (License Info) - Exclusive collection of free beautiful stock photos, free stock videos & high resolution images for personal and commercial use.
  • PhotoPin (License Info) - A free source to quickly find and add Creative Commons photos for commercial use on your website. You must give attribution.
  • KaboomPics (License Info) - Discover free stock photography. All photos or photoshoots are free to download for personal or commercial use, no attribution required.
  • ShotStash (License Info) - CC0 licensed stock photos for personal or commercial purposes.
  • FreeStocks (License Info) - Free stock photos under CC0 (Creative Commons Zero) license for creative professionals.
  • PikWizard (License Info) - Free library of over 1 million high quality stock photos. CC0 (Creative Commons Zero). safe for commercial use with no attribution required.
  • StockVault (License Info) - Collection of free stock images.
  • LibreShot (License Info) - Free archive of stock images for commercial use with no attribution required.
  • SkitterPhoto (License Info) - Free library of public domain photos free to use for any purpose with no attribution required.
  • DreamStime (License Info) - Large collection of high resolution royalty-free and public domain stock images provided by contributors from around the world.

100%-Free Illustrations

Find free beautifully designed SVG or PNG illustration images for your design projects (landing pages, blogs, email newsletters, and more). Don't forget to check the license of each element you use.
  • UnDraw - Find open-source illustrations to use in any project, commercial or personal without attribution or any costs.
  • Iconscout Illustrations (License Info) - Browser free collection of 11K+ royalty free illustrations for personal and commercial use.
  • Icons8 Illustrations (License Info) - Browser free collection of 1K+ royalty free illustrations for personal and commercial use.
  • Lukaszadam - Free SVG illustration library. All images are MIT licensed and can be used completely free for commercial projects - no attribution required.
  • ManyPixels Illustrations - Discover MIT-licensed SVG illustrations. Free for commercial or non-commercial use.
  • PNGTree Illustration (License Info) - Free collection of illustration images. Can be used for both personal and commercial use.
  • DrawKit (License Info) - Free vector SVG illustrations to use in your web projects. No attribution required!
  • Humaaans - Free collection of people illustrations with a design library. Illustrations are CC0 licensed and can be used commercial or personal use.
  • Freepik's Illustrations (License Info) - Free illustrations for your next project. You can animate them as well
  • GlazeStock (License Info) - Curated royalty-free illustration library for designers and developers. You can use all illustration for free with attribution.
  • Isometric (License Info) - Free collection of SVG isometric illustrations published under the MIT license that premits using for personal and commercial projects without the need for attribution.

100%-Free Stock Videos

Find free stock videos and clips in 4K and HD. All videos can be used for both noncommercial and commercial purposes. Videos are licensed under the Creative Commons Zero (You don't have to give attribution), or Creative Commons 3.0 (must be attributed to the original author). Don't forget to check the license info of each video.

Design Inspiration

Get updates on the latest design trends from designers around the world and get inspired by new creative ideas for your next web projects.
  • DeviantArt - Get inspired from professional designers community.
  • Behance - Discover new design trends with gallery of quality web designs.
  • Dribbble - Discover new design creatives from top designers and gain inspiration for your design projects.
  • Awwwards - An online resource for web design inspiration, that showcase awarded sites with great designs.
  • CSSNectar - A website design gallery for website design inspiration.
  • CollectUI - Get daily inspiration of hand-picked designs elements.
  • SiteInspire - Showcase of the great website designs.
  • TheBestDesigns - Discover the last web design trends.

Miscellaneous

  • Brusheezy - Free Photoshop Brushes & PSDs.
  • Firefox Eyedropper - Build-in tool in Firefox that enables you to select colors in the current page.
  • ColorZilla - Free eyedropper browser extension to read colors from any point in the browser. Also offers a Webpage Color Anylazer to extract all the colors used in a webpage, Color Picker, and Palette Browser.
  • Eye Dropper - Open-source simple eyedropper chrome extension that allows you to pick a color from a webpage.
  • ColorPick - A chrome extension to detect colors on any website. Very precise tool. If you make a profit using this tool you are required to buy license.
  • WhatTheFont - Detect font from an image.
  • WhatFontIs - Find any font from any image. In order to detect the font this service is using 600K+ fonts (commercial or free) and font finder AI.
  • WhatFont - Easily get font information about the text you are hovering on.
  • Fount - Identify any web font you see in the browser.
  • TWBSColor - Generate your own Bootstrap navbar.

That's it! Hope you found our free Web Design tools collection helpful. if you have any suggestions please feel free to contact us by email.