The Ultimate List of Free Resources for Developers in 2021

Here are some of the best free resources for developers that I've come across.

These aren't just any resources pulled together from the internet. No, not at all.

I have been collecting this list for over nine months and, every single resource in this list is tested and proven useful and high quality.

There are more than 100 resources, so I hope there is something for everyone!

Table of Contents

• Background patterns
• Graphics
• Color tools

• UI Components & Code Snippets

  • Loading Spinners
  • CSS Code Snippets
  • Device Mockups
  • Other Ui Components
• Icons
• Photos & Video
• Illustrations
• Music and Sounds
• Hosting
• APIs
• Other Useful Tools

Background Patterns

• Subtle patterns
  Over 500 background patterns under CC BY-SA 3.0 licence.
• Hero patterns
  A collection of repeatable SVG background patterns for you to use on your projects.
• CSS3 Pattern gallery by Lea Verou
  Small collection of cool CSS background patterns.
• Patternico
  Create your own background pattern from font-awesome or Line icons!
• BGJar
  Free svg background generator for your websites, blogs and app.
• Trianglify
  Tool to generate low-poly backgrounds, textures, and vectors.
• Gradienta
  Awesome gradients to use as a background!
• The Pattern Library
  This on-going project compiles patterns shared by the most talented designers out there for you to use freely in your designs.

Graphics

• Wave generator
  Create SVG waves for your website or app.
• Blob generator
  Blobmaker is a free generative design tool made with 💕 by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes.
• Another blob generator
  Generate beautiful blob shapes for web and Flutter apps under MIT licence.
• Custom shape dividers
  Awesome tool for creating custom dividers for websites or apps!

Color tools

• Gradihunt
  Great tool for searching and comparing gradients.
• Gradientos
  Find and see gradients on a live demo site.
• ColorSandFonts
  Color & typography tools for web developers and digital designers.
• Coolors
  Create color palettes super fast!
• Colordot by hailpixel
  Another tool for creating color palettes quickly.
• Color Hunt
  Lot's of color palettes for finding inspiration.
• Adobe Color
  Use Adobe color wheel to generate color palettes.
• palette.app
  Different kind of take on creating color palettes.
• Colormind
  Generate color palettes and see them live on demo website!
• UI Gradients
  Browse through gradients and copy the CSS code for them.
• Picular
  Search for colors of anything! For example you could search 'coffee' and it will give you good color to use for coffee.
• MyColor.space
  Generate color palettes from single color and create CSS gadients.

UI Components and Code Snippets

Loading spinners

• Single Element CSS Spinners
  CSS loading Spinners by Luke Haas.
• Spin Kit
  Kit of CSS loading spinners by Tobias Ahlin.
• Loaders.css
  Delightful and performance-focused pure css loading animations.
• SpinThatShit
  A set of SCSS mixins for single-element loaders and spinners.

CSS Code snippets

• CSS Box Shadow Examples
  Beautiful CSS box-shadow examples.
• Box shadow generator
  Generate CSS box-shadows and copy the CSS code for it.
• Animista CSS animation snippets
  Code snippets for all kinds of CSS animations.

Device mockups

• devices.css
  Pure CSS mockups for mobile devices, tablets and laptops.
• Minimal devices by Jared Hardy
  Minimal Apple device CSS mockups.
• Device shots
  The single best tool for creating device mockup PNGs with your custom screen content!

Other ui components

• Moving text animations
  Moving text animations by Tobias Ahlin.
• UI Design daily
  Free UI Components to use in Figma, Adobe XD, Sketch or Photoshop.

Icons

• Zondicons
  A set of free premium SVG icons for you to use on your digital products.
• Line Icons
  2000+ Line Icons for Designers and Developers!
• Feather Icons
  Simply beautiful open source icons.
• Lucide
  An open-source icon library, a fork of Feather Icons.
• JAM Icons
  Jam icons is a set of SVG icons designed for web projects, illustrations, print projects, etc. Licensed under MIT.
• Orion Icon library
  6014 Free SVG Vector Icons.
• Radix Icons
  A crisp set of 15×15 icons designed by the Modulz team.
• Icon Park
  IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons.
• Font Awesome
  Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
• Fontisto
  Fontisto - the iconic font and css toolkit · 616+ free icons.
• Evil Icons
  Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.
• Phosphor Icons
  Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
• Iconhub
  Just practical stunning icons for everyone.
• Basicons
  Basic icons for product design & development
• Tabler Icons
  A set of over 950 free MIT-licensed high-quality SVG icons for you to use in your web projects.
• Heroicons
  Another set of MIT-licenced SVG icons.
• Eva Icons
  Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.
• CSS GG
  700+ Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API
• Devicon
  Devicon is a set of icons representing programming languages, designing & development tools. You can use it as a font or directly copy/paste the svg code into your project.
• Simple icons
  1477 Free SVG icons for popular brands.

Photos and Video

• Lorem Picsum
  Lorem ipsum for photos!
• Lost And Taken
  Free texture stock photos.
• Unsplash
  Beautiful free images and pictures.
• Pexels
  Free stock photos and videos.
• Pixabay
  Stunning free images & royalty free stock.
• Mixkit
  High quality free stock video clips, music and sound effects.

Illustrations

• Undraw
  Open-source illustrations for any idea you can imagine and create.
• Glaze
  Royalty-free illustration library.
• Delesign
  Free illustrations and icons. No attrribution required.
• Scale
  One new high-quality, open-source illustration each day.

Music and sounds

• CCHound
  100% free, quality CC audio.
• Unminus
  Free premium music for your projects.
• Mixkit
  Free stock music and sound effects.

Code playgrounds

• StackBlitz
  Online code editor for web apps
• JSFiddle
  Javascript, HTML, CSS code playground.
• CodePen
  Popular online code editor.
• JSBin
  Another online code editor for web developers. Focuses on sharing your code.
• Code Sandbox
  Free, instant, collaborative sandboxes for rapid web development.

Hosting

• Heroku
  Great Paas for deploying and hosting node.js (and other) apps for free.
• Github pages
  Host websites and web apps for free straight from your github repo!
• Firebase
  Fast and secure web hosting.
• Surge
  Static web site publishing for front-end developers. For free.
• Vercel
  HTTPS enabled custom domains, continous deployment with git and unlimited free websites and APIs.
• Netlify
  An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.
• Render
  Render is a unified cloud to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git.

APIS

Some of the coolest free API:s you can use on your projects!

• OpenWeatherMap
  Classic weather API.
• Pokemon API
  All the Pokémon data you'll ever need in one place, easily accessible through a modern RESTful API.
• NASA APIs
  Bunch of different APIs for accessing NASA data including Mars rover photos, satelite photos of earth, exoplanet database and much more!
• Yelp Fusion API
  Get information about local businesses around the world with Yelp Fusion API.
• Youtube API
  Add YouTube functionality to your sites and apps.
• New York Times APIs
  Differetn APIs for New York Times content including news articles, movie reviews, bestseller books reviews & lists.
• OMDb API
  The OMDb API is a RESTful web service to obtain movie information.
• JoeSchmoe avatar API
  An illustrated avatar collection for developers and designers.
• Initials Avatar Generator API
  Get placehoder SVGs for profile pics containing users name initials.
  Example return for 'John Doe' with orange bakcground.
• Coingecko API
  The world's most comprehensive cryptocurrency API.
• JSON Placeholder
  Mock JSON data API for testing.

Other useful tools

• Omatsuri
  Open source browser tools for everyday use.
• Responsively.app
  Develop responsive web apps 5x faster!
  "A must-have DevTool for all Front-End developers that will make your job easier."
• Favicon.io
  The only favicon generator you need for your next project. Create favicons from text, images or even emojis.
• Carbon
  Create and share beautiful images of your code.
• Codepng
  Turn your source code into awesome pictures!
• ray.so
  Like Carbon but different.
• Blaze
  Cool (and fast) way to share files with any devices.
• Screely
  Instantly Turn a Screenshot or Image into a Browser Mockup.
• Sweet Alert
  A beautiful replacement for javascript alert() messages.
• diagrams.net
  The world’s most widely used browser-based end-user diagramming software.

Conclusion

Thanks for reading!

You can find up to date list of these resources from my Github repo.