As a designer, people also wondered what new tools and utilities were used by other designers? Well, we have compiled a list of all the designers’ resources and utilities recognized worldwide. These free design resources are recommended by the expert designers to assist you in this mission. Check out the list and you can finally pick the ones that suit your requirements correctly.
This is a GitHub repo bradtraversy/design-resources-for-developers: Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more started by Brad Traversy, a popular online instructor and full-stack web developer.
To identify different types of design resources, this article will be divided into 31 categories as below:
2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part1 2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part2 2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part3
Table Content
- UI Graphics
- Fonts
- Colors
- Icons
- Logos
- Favicons
- Icon Fonts
- Stock Photos
- Stock Videos
- Stock Music & Sound Effects
- Vectors & Clip Art
- Product & Image Mockups
- HTML & CSS Templates
- CSS Frameworks
- CSS Methodologies
- CSS Animations
- Javascript Animation Libraries
- Javascript Chart Libraries
- UI Components & Kits
- React UI Libraries
- Vue UI Libraries
- Angular UI Libraries
- Svelte UI Libraries
- React Native UI Libraries
- Design Systems & Style Guides
- Online Design Tools
- Downloadable Design Software
- Design Inspiration
- Image Compression
- Chrome Extensions
- Others
UI Graphics
Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI
| Website | Description |
|---|---|
| UI Design Daily | Awesome UI Components of all types |
| 100 Daily UI | Free Figma library of products, elements, and screens |
| Sketch App Sources | Sketch UIs, wireframes, icons and much more |
| Humaaans | Cool illustrations of people with the ability to mix and match |
| Paaatterns | Free collection of beautiful patterns for all vector formats |
| thepatternlibrary | Free beautiful background patterns |
| 404 illustration | Free illustrations for 404 pages |
| Drawkit.io | Illustrations for designers and startups |
| Absurd.design | Free surrealist illustrations for designers and developers |
| Undraw.co | Open-source illustrations for any idea you can imagine and create |
| Manypixels.co | Monochromatic, Isometric high-quality illustrations |
| Open Peeps | Hand drawn illustration library |
| UI Space | Thousands of great UI freebies |
| Animations.co | Beautiful, customizable animated GIF icons |
| Uplabs | High-quality design resources (Free & Premium) |
| InvisionApp | Library of free, high-quality UI kits, icon packs, and mockups |
| Open Doodles | A Free Set of Sketchy Illustrations |
| Avataaars | Free sketch library of avatars illustrations by Pablo Stanley |
| Blush | Free customizable illustrations with Figma Plugin |
| Hero Patterns | A collection of repeatable SVG background patterns |
| BEAUBUS Patterns | A set of 150+ free SVG patterns (backgrounds) |
| IsoFlat | A Free collection of Isometric SVG graphic resources |
| IRA Design | An open-source gradient illustrations collection by creative tim. |
| Transparent Textures | A collection of transparent textures background patterns. |
| icons8.com/illustrations | Free vector illustrations to class up your project |
| Patternico | Seamless Pattern Maker |
| Freellustrations | Free Background Images for awesome landing Pages |
| Pixeltrue Illustrations | Free Animated Illustrations |
| Abstract User Avatar API | API to create simple yet flexible user avatars from user names or emails |
| sketchvalley | Download free PNG, SVG or AI file . |
| PatternPad | Free and unlimited unique pattern designs. |
| Dimensions | Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces |
| Freebiesbug | Hand-picked resources for web designers and developers, constantly updated. |
| Flexiple | One new high-quality, open-source illustration each day. |
| Cool Text | Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work |
| illustration kit | Premium open source illustrations added daily |
| Doodad Pattern Generator | Create unique, seamless, royalty-free patterns. |
| Pattern Monster | A simple online pattern generator to create repeatable SVG patterns |
| Exemplar | Free Avatar Library for Figma and Sketch |
| UIBundle | Thousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more. |
| openby.design | Custom crafted free UI design resources, for personal and commercial projects. No attribution is required. |
| Design Stripe | Create beautiful illustrations, no design skills needed. |
| HOLA SVG! | An SVG playground to share SVG stuff. |
| symu.co | Free templates, UI kits, icon, PSD |
| Mesh Gradient | Generate & download beautiful mesh gradients. |
Fonts
Websites that offer free fonts as well as font-based tools
| Website | Description |
|---|---|
| Google Fonts | Library of around 1000 free licensed font families |
| DaFont | Archive of freely downloadable fonts |
| Use & Modify | Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces |
| 1001 Free Fonts | I think the name speaks for itself :smirk: |
| Font Squirrel | Font Squirrel scours the internet for high quality, legitimately free fonts |
| Font Fabric | A digital type foundry crafting retail fonts and custom typography for various brands |
| Tiff | A type diff tool that visually contrasts the differences between two fonts |
| TypeKit Practice | Learn about typography practices |
| Fontjoy | Generate font pairing in one click |
| Golden Ratio | Golden Ratio Typography Calculator |
| FontGet | Has a variety of fonts available to download and sorted neatly with tags |
| FontPair | Helps you pair Google Fonts together |
| Font Space | A designer-centered free font website that has quick customizable previews |
| Abstract Fonts | Fonts free for personal and commercial use |
| Free Typography | A list of high quality fonts |
| Leon Sans | A geometric sans-serif typeface made with code |
| Lexend | A variable font empirically shown to significantly improve reading-proficiency |
| Fonts for Apple Platforms | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| SFWin | San Francisco Fonts for Windows 10 and non-Apple Platform |
| Font Flipper | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
| Fonts Arena | Free curated fonts |
| Befonts | High quality fonts for free |
| Arabic fonts | Arabic fonts for free |
| FontDrop | Simple and easy way to view the contents of font files |
| Open Foundry | FREE platform for curated open-source typefaces |
| Glyphter | Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded |
| Google Webfonts Helper | A Hassle-Free Way to Self-Host Google Fonts |
| Rough Font Awesome | When RoughJS meets Font Awesome |
| FFonts | Stylish fonts for free |
| Malayalam Fonts | Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC) |
| Dev Fonts | Find and use the coding fonts for free |
| Font M | Free font you can download for material coding and design |
| W Fonts | Download Free fonts |
| Modern fluid typography editor | Fluid typography is a modern way of approaching responsive typography. |
Colors
Websites and resources that help with choices related to colors
| Website | Description |
|---|---|
| Branding Colors | a hand-curated collection of color palettes best fitted for branding. |
| Color Brewer 2 | The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest. |
| Huetone | A tool to create accessible color systems. |
| Colormind.io | Color palette generator |
| ColorCurves.app | Color palette generator that uses curves to generate color palettes |
| ColorGradient | A free tool to create simple and complex CSS Gradients visually |
| Coolors | Create the perfect palette or get inspired by thousands of beautiful color schemes |
| HTML Color Codes | Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names |
| Colors & Fonts | A curated library of colors, fonts and resources |
| Palette List | Pick 2 colors you like and the tool generates thousands of palettes for you. |
| Google Material Color Tool | Official Google Material Color Palette Tool |
| Material Palette | Free to pick palettes, icons and colors for Material Design |
| ColorSpace | Generate nice color palettes from one color |
| FlatUIColors | Beautiful set of color palettes in various flavors |
| Adobe Color | Create color palettes, extract gradients from images, etc. |
| Colorsinspo | All-in-one resource for finding everything about colors |
| ColorsWall | Place to store your color palettes and generate palette in one click |
| Happyhues | Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child |
| Adobe Trends | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock |
| Color Hunt | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| Gradient Hunt | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
| Web Gradients | A free website to find good CSS gradients |
| ColorBox | A free website to produce color set |
| CSS gradient | A free website to make custom gradient and some examples of gradient |
| gradienta | A pure css and jpg gradients |
| UI Gradients | UI gradients color generator |
| Palette Generator | Generate new color palette with every spacebar press |
| Material Palettes | 1000+ Material Design palettes |
| Grabient | Gradient Selector |
| ShadeSwash | Quickly generate shades of any color |
| BrandColors | The biggest collection of official brand color codes |
| BRAND PALETTES | Logo Color Codes and Palettes |
| Material Design Palette Generator | Generate theme and color palette Material Design-like |
| Colorate | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. |
| 0to255 | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. |
| Color Blender | A tool that shows the midpoint colors between two colors |
| Gradient Buttons | Ready to use copy/paste gradient buttons |
| Khroma | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. |
| whocanuse | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. |
| Colorable | Color combination contrast tester |
| Color Hex Picker | Tool to get hex code along with name of the color. |
| Saruwakakun | The stunning color scheme for website & App Designs with previews |
| Paletton | Paletton.com is a designer color tool designed for creating color combinations that work together well. |
| Colorzilla | A powerful online Photoshop-like CSS gradient editor |
| CSS Gradient Editor | You may only need this tool for creating CSS gradient backgrounds and patterns. |
| Image Color Picker | Image color picker and palette generator |
| CombineCOLORS | Color mixing tool |
| Color Lovers | It will show the color schemes which are popular in the outside world. |
| HTML CSS Color | Free online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc. |
| HEX Color Codes | It gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. |
| CoolHue 2.0 | A free tool that shows different gradient examples in CSS and PNG format |
| Colors.lol | Interesting color palettes generated by a Twitter bot, there are hex codes and descriptive names for each color. |
| colors.dopely | Super-fast and simple color palette generator, palettes can be saved and shared in seconds. |
| UIColor Picker | A collection of UI Colors with hex codes available to be copied in just one click. |
| Color Hex | Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK) and generates a simple css code for the selected color. |
| FarbVelo | A random color palette generator |
| Veranda Color | Browse color palettes made by other designers, generate and submit your own |
| Duo | Duo is a collection of colour combinations that I’ve curated from personal projects or that I’ve come across on the web. |
| Lospec Palette List | The Lospec Palette List is a database of palettes for pixel art. |
| Palettte App | Build smooth color schemes that flow from one color to another. |
| Eggradients | Gradient Background Colors with eggs. |
| Gradientos | Find and test gradients easily. |
| Encycolorpedia | Website for referencing web colors. Color knowledge, Web colors, Hex color codes. |
| Croma | A website for pick colors quickly from image or manually. It's color picker is easier to use. |
| Color Designer | A gradient generetor from one color. |
Icons
Resources for Icons including png, svg and more
| Website | Description |
|---|---|
| UXWing | Well Optimized, Free icons for commercial use |
| Shapedfonts Iconclub | 8000+ free icons |
| Feather Icons | Beautiful, customizable open source icons |
| Tabler Icons | 470+ highly customizable open source SVG icons |
| Xicons | SVG Vue/React components integrated from fluentui-system-icons, ionicons, etc. (Vue3, Vue2, React, SVG). |
| Iconoir | Free library of 900+ open source icons |
| Simple Icons | 1307 Free SVG icons for popular brands |
| Linear Icons | 1000+ Ultra crisp vector icons |
| Icons8 | Free icons, photos, vectors and tools |
| Flat Icon | The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats |
| The Noun Project | Over 2 Million curated icons, created by a global community |
| Iconscout | Free Download Icons illustrations stock photos at one place |
| IconSear.ch | Search engine with over 50,000 SVG icons indexed |
| Nucleo App | Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) |
| Icon-icons.com | Free Icons PNG, ICO, ICNS and Vector file SVG |
| Bootstrap Icons | Free Icons built for Bootstrap but they'll work in any project |
| Remix Icon | Simply Delightful Icon System |
| Iconmonstr | Discover 4496+ free icons in 313 collections |
| Vivid.js | Ready to use Free and Open Source SVG Icons Pack JavaScript Library. |
| Iconfinder | Free and premium vector icons in SVG, PNG, CSH and AI format |
| Lordicon | 50 free animated interactive icons |
| UseAnimations | Free Animated Icons in SVG and Json Format(for lottie) |
| css.gg | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API |
| IconBros | 7843+ free icons grouped in 182 collections |
| Material Design Icons | An icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
| Heroicons | Free, open source icons from the creators of Tailwind CSS. |
| Zondicons | A set of free premium SVG icons for you to use on your digital products. |
| Endless Icons | A website offering a number of free icons. Icons are tagged and also compressed into kits. |
| Icomoon | Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. |
| Eva Icons | Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. |
| Cryptoicons | A set of 430 crypto and fiat currency icons. Completely free. |
| Ikonate | Fully customizable & accessible vector icons |
| appicon | Quickly generate app icons in different sizes for your IOS, macOS and Android projects |
| LineIcons | 2000+ Essential Line Icons for Designers and Developers |
| Evericons | Evericons is a big pack of over 460 free icons designed by Aleksey Popov. |
| SVG Repo | Download free SVG Vectors for commercial use. |
| Convertio | Convert PNG files to SVG online & free. (One of the services provided by it.) |
| CSS ICON | Icon set made with pure css code, no dependencies, "grab and go" icons |
| Unified icons | Thousands of icons, one unified framework. One library, over 40,000 vector icons. |
| System UIcons | 220+ icons in a growing collection. |
| IconPark | Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons |
| Radix Icons | A crisp set of 15×15 icons designed by the Modulz team. All icons available as individual react component,SVG and more. |
| EOS Icons | A pixel-perfect, open source iconic font available as ligature and SVG. |
| Ionicons | Beautifully crafted open source icons for use in web, iOS, Android, and desktop apps. |
| Phosphor Icons | Phosphor is a flexible icon family for interfaces, diagrams, presentations |
| Teeny Icons | TeenyIcons is a set icons in SVG format easy to use in html |
| Lucide | Lucide is an open-source icon library, a fork of Feather Icons. |
| Icones | Icon Explorer with Instant searching, powered by Iconify. |
| Shitty Icons | Collection of Free icons. |
| Iconspedia | Iconspedia is a website that contains a large collection of high quality free icons. |
| iconhub | Just practical stunning icons for everyone |
| 3DICONS | Beautifully crafted open source 3D icons |
| IconsDb | Free Custom Icons |
Logos
Resources for Logos
| Website | Description |
|---|---|
| Instant Logo Search | Thousands of free brands logos ( SVG - PNG ) |
| LogoSear.ch | Search engine with over 200,000 SVG logos indexed |
| SVGPorn | 1000+ high-quality SVG logos |
| Payment System Logos | Logos for payment systems available in png and svg |
| Browser Logos | High resolution web browser logos |
| VectorLogoZone | Consistently formatted SVG logos |
| World Vector Logo | Download vector logos of brands you love |
| Logo Maker | Create custom logos |
| Free Logo Maker | Fast, All-in-One Logo Generator |
| LOGOwine | Brand Logos Free Download in SVG Vector & PNG File Format |
Favicons
Resources for Favicons
| Website | Description |
|---|---|
| Favicon.io | Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats |
| Favicomatic | Generate favicons of all the sizes and formats as well as the HTML code needed to support every possible browser or device |
| Favicon Generator | Generate favicon ico files for your website |
| RealFaviconGenerator | Generate icons for all platforms (Windows, iOS, Android) |
| FontIcon | Generate favicons and images from Font Awesome icons |
| Favicon.cc | Draw a favicon online and browse through a library of favicons made by other users |
| Maskable.app Editor | Generate maskable PWA icons based on your existing icon |
Icon Fonts
Resources for Icon Fonts
| Website | Description |
|---|---|
| Font Awesome | The web's most popular icon set and toolkit |
| Line Awesome | Swap in replacement of Font Awesome with modern line icons |
| Material Icons | Material design icon library |
| IonIcons | Beautifully crafted open source icons from Ionic team |
| Zurb Foundation Icons | Customizable Foundation icons |
| Fontisto Icons | Fontisto the iconic font and css toolkit · 616+ free icons |
| Boxicons | Boxicons is a free collection of carefully crafted open source icons |
| Icofont | 2100+ free icons to spice up your creative designs |
| Material Palette | Free to pick palettes, icons and colors for Material Design] |
| Material Design Iconic Font | Material design icon font |
| Vscode Codicons | The icon font from Visual Studio Code |
| Devicon | Devicon is a set of icons representing programming languages, designing & development tools |
| PaymentFont | A sleek web font for payment operators and methods. Featuring 116 icons |
| Weather Icons | Weather Icons is the only icon font with 222 weather themed icons |
| Stroke 7 | 202 thin stroke icons inspired by iOS 7 |
| Jam Icons | 890+ handcrafted icons to make your web app awesome |
| Fontello | 200+ web icons where you can customize the names or codes of icons. |
| Linea | Linea: Featuring 750+ Free Icons |
| Unicons | A set of 1100+ Free line style icons available as web font, SVG icons, and as components for JS frameworks like React, Vue and React Native. |
| Mobirise Icons | A free, open source set of 150 elegant, pixel-perfect linear icons, available as web icon font and SVG icons. |
| Hero Icons | Free Open Source Svg Icon Library |
Stock Photos
Websites that offer free stock photos of all kinds for your websites and apps
| Website | Description |
|---|---|
| Pexels | Free stock photos shared by talented creators |
| Unsplash | The internet’s source of freely usable images |
| Pixabay | Over 1.7 million+ high-quality stock images and videos |
| Magdeleine | Gallery & free high-resolution photo everyday |
| Picspree | Royalty free images, stock photos, illustrations, and vectors |
| Burst | Free stock photos collections |
| Gratisography | Free collection of free high-resolution pictures |
| Life of Pix | Free high-resolution photography |
| Stock Snap | Hundreds of high quality photos added weekly |
| Morguefile | Over 350,000 free stock photos for commercial use |
| Kaboom Pics | Stock photography and color palettes. Good for product images |
| New Old Stock | Stock vintage photos |
| Pic Jumbo | Good collections of different types of photos |
| Public Domain Pictures | Public domain images of all types |
| Find A Photo | Searches multiple stock photo websites |
| Stockvault | Categorized stock photos |
| Placeholder | A free image placeholder service for the web. You can specify image size and format |
| Realistic Shots | Free high-resolution stock photos |
| Negative Space | High-Resolution Free Stock Photos |
| SkitterPhoto | Free high-resolution photography |
| PicoGraphy | Gorgeous, High-Resolution, Free Photos |
| Wunder Stock | Stunningly amazing free photos |
| PxHere | Free Images & Free stock photos - PxHere |
| Piqsels | Royalty Free Stock Photos |
| FoodiesFeed | Food photo stock |
| Nappy | A website offering Beautiful, high-res photos of black and brown people. |
| Generated Photos | Unique AI Generated model photos |
| Reshot | Uniquely free photos. Handpicked, non-stocky images. |
| Free Images | Find and download free stock photos - all free for personal and commercial use |
| Lorem Picsum | An easy to use API to get beautiful placeholder images. Size and other parameters can be specified. |
| scienceimage | An image library specializing in science and nature images |
| Integration & Application Network Image Library | Free images to provide scientists, resource managers, government agencies, community groups and graphics professionals with a resource for enhancing science communication. |
| Saxifraga | Free nature images |
| Creative Commons | Search for free images to reuse. |
| AllTheFreeStock | a curated list of free stock images, audio and videos. |
| Lorem.space - Placeholder image generator | API for placeholder images but useful! |
| Openverse | Openverse is a search engine for openly-licensed media |
Stock Videos
Websites that offer free stock videos of all kinds for your websites and apps
| Website | Description |
|---|---|
| Pexels | Largest library of free to use videos, donated by the community |
| Pixabay | Large library of free to use videos, donated by the community similar to Pexels |
| Coverr.co | Beautiful free stock video footage |
| Videezy | Free HD stock footage & 4K videos |
| Mix Kit | Stock video clips & music |
| Life Of Vids | Free video clips and loops |
| Videvo | Free and premium stock videos |
| Loopvidz | Free To Use Cinema graphs Created With VIMAGE App |
| SplitShire | Beautiful & exclusive free stock videos & photos |
Stock Music & Sound Effects
Websites that offer free stock music and/or sound effects
| Website | Description |
|---|---|
| Free Stock Music | Royalty free stock music for YouTube videos, podcasts, etc |
| Bensound | Download Royalty Free Music for free and use it in your project |
| Mixkit | Free music for your projects |
| Freesound | Free stock music and sounds |
| Free Music Archive | Collaborative database of creative-commons licensed sound for musicians and sound lovers |
| Musopen | An online copyright free classical music library |
| Pixabay | Free music downloads for your project like Youtube videos, Music, Vlog, Film, Podcast etc. |
| Unminus | Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube. |
Vectors & Clip Art
Free vectors, clipart, illustrations, patterns and more
| Website | Description |
|---|---|
| Vecteezy | Find and download free vector art |
| Freepik | Free vectors, stock photos, PSD and icons |
| Free Vectors | Community of vector lovers who share free vector graphics |
| PNGTree | png, backgrounds, templates, text effects |
| Vector4Free | Free vector graphics |
| Freeble | Vectors, patterns, mockups and more |
| Lukaszadam | Free Vector artworks |
| Illlustrations | Beautiful 100 Illustrations - png, svg |
| Clipart | Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
| Growwwkit illustrations | A set of 8 simple, black & white, stylish illustrations |
| trianglify.io | Generate low-poly backgrounds, textures, and vectors |
| blob | Generate Blob shapes for Web and Flutter apps |
| HiClipart | A community for designers to share & download transparent background PNG cliparts |
| Stories by Freepik | A collection of free and customizable illustrations for projects |
| Black Illustrations | Beautiful illustrations of black people (free and premium) |
| Delesign | A collection of free illustrations and more |
| Custom Shape Dividers | Free tool to make it easier for designers and developers to export a beautiful SVG shape divider |
| Servier Medical Art | 3000 free medical images to illustrate your publications and PowerPoint presentations |
| Clker | Free clip art you can use for anything you like |
| SVG wave | A free, & customizable gradient 🌈 SVG wave generator for UI designs . |
| Heritage Library | Vintage Illustrations (vector and png) |
| ROBOHASH | Generate unique images from any text |
| Tabbied | Create and customize minimally generated patterns/artwork to use for background images, print and other projects. |
| Haikei | An awesome multishape web app. |
