├── LICENSE ├── contributing.md ├── header_image.png └── readme.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Brad Traversy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | - Add single resource in one pull request as it will allow for easier review. 4 | 5 | - Pull request title should include resource name and resource section. 6 | - Example: `[Tailwind CSS] -> [CSS Frameworks]` 7 | 8 | - Provide a link to submitted resource in pull request comment section for easier access without copy paste. 9 | - Example: `Link: https://tailwindcss.com/` 10 | 11 | - Double check if the resource is truly free without any kind of hidden surprises. 12 | -------------------------------------------------------------------------------- /header_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Virajana/Design-resourses-for-Developers/66d0fed9e3aa1d96dff3011c8f091b8f05865866/header_image.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![Repository Banner](header_image.png) 2 | #### Please read [`contributing guidelines`](./contributing.md) before submitting new resources. 3 | 4 | ## Table of Contents 5 | 6 | - [UI Graphics](#ui-graphics) 7 | - [Fonts](#fonts) 8 | - [Colors](#colors) 9 | - [Icons](#icons) 10 | - [Favicons](#favicons) 11 | - [Icon Fonts](#icon-fonts) 12 | - [Stock Photos](#stock-photos) 13 | - [Stock Videos](#stock-videos) 14 | - [Stock Music & Sound Effects](#stock-music--sound-effects) 15 | - [Vectors & Clipart](#vectors--clip-art) 16 | - [Product & Image Mockups](#product--image-mockups) 17 | - [HTML & CSS Templates](#html--css-templates) 18 | - [CSS Frameworks](#css-frameworks) 19 | - [CSS Animations](#css-Animations) 20 | - [Javascript Animations](#javascript-animation-libraries) 21 | - [UI Components & Kits](#ui-components--kits) 22 | - [React UI Libraries](#react-ui) 23 | - [Vue UI Libraries](#vue-ui) 24 | - [Angular UI Libraries](#angular-ui) 25 | - [Svelte UI Libraries](#svelte-ui) 26 | - [Design Systems & Style Guides](#design-systems--style-guides) 27 | - [Online Design Tools](#online-design-tools) 28 | - [Downloadable Design Software](#downloadable-design-software) 29 | - [Design Inspiration](#Design-inspiration) 30 | - [Image Compression](#Image-compression) 31 | - [Others](#others) 32 | 33 | ## UI Graphics 34 | 35 | >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 36 | 37 | | Website                            | Description | 38 | | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | 39 | | [UI Design Daily](https://uidesigndaily.com/) | Awesome UI Components of all types | 40 | | [100 Daily UI](https://100dailyui.webflow.io/) | Free Figma library of products, elements, and screens | 41 | | [Sketch App Sources](https://www.sketchappsources.com/) | Sketch UIs, wireframes, icons and much more | 42 | | [Humaaans](https://www.humaaans.com/) | Cool illustrations of people with the ability to mix and match | 43 | | [Paaatterns](https://products.ls.graphics/paaatterns/) | Free collection of beautiful patterns for all vector formats | 44 | | [thepatternlibrary](http://thepatternlibrary.com/) | Free beautiful background patterns | 45 | | [404 illustration](https://error404.fun/) | free illustrations for 404 pages | 46 | | [Drawkit.io](https://www.drawkit.io/) | Illustrations for designers and startups | 47 | | [Undraw.co](https://undraw.co/) | Open-source illustrations for any idea you can imagine and create | 48 | | [Illustration.co](https://illlustrations.co/) | Open-source illustrations kit | 49 | | [Manypixels.co](https://www.manypixels.co/gallery/) | Monochromatic, Isometric high quality illustrations | 50 | | [Opendoodles](https://www.opendoodles.com/) | Free sketchy illustrations | 51 | | [Open Peeps](https://www.openpeeps.com/) | Hand drawn illustration library | 52 | | [UI Space](https://uispace.net/) | Thousands of great UI freebies | 53 | | [Animations.co](http://animaticons.co/) | Beautiful, customizable animated GIF icons | 54 | | [Uplabs](https://www.uplabs.com/) | High-quality design resources (Free & Premium) | 55 | | [InvisionApp](https://www.invisionapp.com/inside-design/design-resources/) | Library of free, high-quality UI kits, icon packs, and mockups | 56 | | [Open Doodles](https://www.opendoodles.com/) | A Free Set of Sketchy Illustrations | 57 | | [Avataaars](https://avataaars.com/) | Free sketch library of avatars illustrations by Pablo Stanley | 58 | | [FreebieSketch](https://freebiesketch.com/) | Free Sketch designs, wireframes, illustrations, and more. | 59 | | [Blush](https://blush.design/) | Free customizable illustrations with Figma Plugin | 60 | | [Hero Patterns](http://www.heropatterns.com/) | A collection of repeatable SVG background patterns | 61 | 62 |
63 | ↥ Back To Top 64 |
65 | 66 | ## Fonts 67 | 68 | >Websites that offer free fonts as well as font based tools 69 | 70 | | Website                            | Description | 71 | | ----------------------- | ------------------ | 72 | | [Google Fonts](https://fonts.google.com/)| Library of around 1000 free licensed font families | 73 | | [DaFont](https://www.dafont.com/)| Archive of freely downloadable fonts | 74 | | [Use & Modify](https://usemodify.com/)| Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces | 75 | | [1001 Free Fonts](https://www.1001freefonts.com/)| I think the name speaks for itself :smirk: | 76 | | [Font Squirrel](https://www.fontsquirrel.com/)| Font Squirrel scours the internet for high quality, legitimately free fonts | 77 | | [Font Fabric](https://www.fontfabric.com/free-fonts/)| A digital type foundry crafting retail fonts and custom typography for various brands | 78 | | [What Font](http://www.chengyinliu.com/whatfont.html)| Tool for finding the fonts of a website without having to search in the devtools | 79 | | [Tiff](https://tiff.herokuapp.com/)| A type diff tool that visually contrasts the differences between two fonts | 80 | | [Font Flame](http://app.fontflame.com/)| Tool for pairing fonts to see how they look together | 81 | | [TypeKit Practice](https://practice.typekit.com/)| Learn about typography practices | 82 | | [Fontjoy](https://fontjoy.com/)| Generate font pairing in one click | 83 | | [Golden Ratio](https://grtcalculator.com/)| Golden Ratio Typography Calculator | 84 | | [FontSpark](https://fontspark.app/) | Discover Better Fonts | 85 | | [FontPair](https://fontpair.co/) | Helps you pair Google Fonts together 86 | | [Font Space](https://www.fontspace.com/)| A designer-centered free font website that has quick customizable previews | 87 | | [Abstract Fonts](http://www.abstractfonts.com/)| Fonts free for personal and commercial use | 88 | | [Free Typography](https://freetypography.com/)| A list of high quality fonts | 89 | | [Leon Sans](https://github.com/cmiscm/leonsans/)| A geometric sans-serif typeface made with code | 90 | | [Lexend](https://www.lexend.com/)| A variable font empirically shown to significantly improve reading-proficiency | 91 | | [Fonts for Apple Platforms](https://developer.apple.com/fonts/)| Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps | 92 | | [SFWin](https://github.com/blaisck/sfwin/)| San Francisco Fonts for Windows 10 and non-Apple Platform | 93 | | [Font Flipper](https://fontflipper.com/)| Preview 800+ Google Fonts on top of your own designs, without having to download the fonts | 94 | | [Fonts Arena](https://fontsarena.com/) | Free curated fonts | 95 | | [Befonts](https://befonts.com/) | High quality fonts for free | 96 | | [Arabic fonts](https://arabicfonts.net/) | Arabic fonts for free | 97 | | [FontDrop](https://fontdrop.info) | Simple and easy way to view the contents of font files | 98 | 99 |
100 | ↥ Back To Top 101 |
102 | 103 | ## Colors 104 | 105 | >Websites and resources that help with choices related to colors 106 | 107 | | Website                            | Description | 108 | | ----------------------- | ------------------ | 109 | | [Colormind.io](http://colormind.io)| Color palette generator | 110 | | [ColorCurves.app](https://colorcurves.app)| Color palette generator that uses curves to generate color palettes | 111 | | [Coolors](https://coolors.co)| Create the perfect palette or get inspired by thousands of beautiful color schemes | 112 | | [Colors & Fonts](https://www.colorsandfonts.com/)| A curated library of colors, fonts and resources | 113 | | [Palette List](https://www.palettelist.com/)| Pick 2 colors you like and the tool generates thousands of palettes for you. | 114 | | [Google Material Color Tool](https://material.io/resources/color/)| Official Google Material Color Palette Tool| 115 | | [Material Palette](https://www.materialpalette.com/)| Free to pick palettes, icons and colors for Material Design| 116 | | [ColorSpace](https://mycolor.space/)| Generate nice color palettes from one color | 117 | | [FlatUIColors](https://flatuicolors.com)| Beautiful set of color palettes in various flavours | 118 | | [Adobe Color](https://color.adobe.com/create)| Create color palettes, extract gradients from images, etc | 119 | | [Colorsinspo](https://colorsinspo.com/) | All-in-one resource for finding everything about colors | 120 | | [Happyhues](https://www.happyhues.co/) | 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 | 121 | | [Adobe Trends](https://color.adobe.com/trends)| Discover current color trends in different industries from the creative communities on Behance and Adobe Stock| 122 | | [Color Hunt](https://colorhunt.co/)| A free and open platform for color inspiration with thousands of trendy hand-picked color palettes | 123 | | [Gradient Hunt](https://gradienthunt.com/)| A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients | 124 | | [Web Gradients](https://webgradients.com/)| A free website to find good css gradients | 125 | | [ColorBox](https://www.colorbox.io)| A free website to produce color set | 126 | | [CSS gradient](https://cssgradient.io/)| A free website to make custome gradient and some examples of gradient | 127 | | [gradienta](https://gradienta.io/)| A pure css and jpg gradients | 128 | | [UI Gradients](https://uigradients.com/)| UI gradients color generator | 129 | | [Palette Generator](https://palettegenerator.colorion.co/)| Generate new color palette with every spacebar press | 130 | | [Material Palettes](https://material.colorion.co/)| 1000+ Material Design palettes | 131 | | [Grabient](https://www.grabient.com/) | Gradient Selector | 132 | | [ShadeSwash](https://shadeswash.netlify.app/) | Quickly generate shades of any color | 133 | | [BrandColors](http://brandcolors.net/) | The biggest collection of official brand color codes | 134 | | [BRAND PALETTES](https://brandpalettes.com/) | Logo Color Codes and Palettes | 135 | | [ColorSpace](https://mycolor.space/) | Generate color palettes from one color | 136 | | [Material Design Palette Generator](http://mcg.mbitson.com) | Generate theme and color palette Material Design-like | 137 | | [Colorate](https://colorate.azurewebsites.net/) | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. | 138 | | [0to255](https://www.0to255.com/) | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. | 139 | | [Gradient Buttons](https://gradientbuttons.colorion.co/) | Ready to use copy/paste gradient buttons | 140 | | [Khroma](http://khroma.co/) | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. | 141 | | [whocanuse](https://whocanuse.com) | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. 142 | | [Colorable](https://colorable.jxnblk.com/) | Color combination contrast tester | 143 | | [Color Hex Picker](https://colorhexpicker.com) | Tool to get hex code along with name of the color. | 144 | | [Saruwakakun](https://saruwakakun.com/en/color-ideas) | The stunning color scheme for website & App Designs with previews | 145 | | [Paletton](https://paletton.com/)| Paletton.com is a designer color tool designed for creating color combinations that work together well.| 146 | | [Colorzilla](https://www.colorzilla.com/) | A powerful online photoShop-like CSS gradient editor | 147 | | [Image Color Picker](https://image-color.com/) | Image color picker and palette generator | 148 | | [CombineCOLORS](https://combinecolors.com/) | Color mixing tool | 149 | 150 | 151 |
152 | ↥ Back To Top 153 |
154 | 155 | ## Icons 156 | 157 | >Resources for Icons including png, svg and more 158 | 159 | | Website                            | Description | 160 | | ----------------------- | ------------------ | 161 | | [UXWing](https://uxwing.com/)| Well Optimized, Free icons for commercial use | 162 | | [Shapedfonts Iconclub](https://shapedfonts.com/iconclub/)| 8000+ free icons | 163 | | [Feather Icons](https://feathericons.com/)| Beautiful, customizable open source icons | 164 | | [Tabler Icons](https://tablericons.com/)| 470+ highly customizable open source SVG icons | 165 | | [Simple Icons](https://simpleicons.org/)| 1307 Free SVG icons for popular brands | 166 | | [Instant Logo Search](http://instantlogosearch.com/)| thousands of free brands logos ( SVG - PNG ) | 167 | | [Linear Icons](https://linearicons.com/free)| 1000+ Ultra crisp vector icons | 168 | | [Entypo](http://www.entypo.com/)| 411 carefully crafted premium pictograms by Daniel Bruce | 169 | | [Icons8](https://icons8.com/)| Free icons, photos, vectors and tools | 170 | | [Flat Icon](https://www.flaticon.com/)| The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats | 171 | | [The Noun Project](https://thenounproject.com/)| Over 2 Million curated icons, created by a global community | 172 | | [Iconscout](https://iconscout.com/)| Free Download Icons illustrations stock photos at one place | 173 | | [Nucleo App](https://nucleoapp.com/)| Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) | 174 | | [Icon-icons.com](https://icon-icons.com/)| Free Icons PNG, ICO, ICNS and Vector file SVG | 175 | | [Bootstrap Icons](https://icons.getbootstrap.com/)| Free Icons built for Bootstrap but they'll work in any project | 176 | | [Remix Icon](https://remixicon.com/)| Simply Delightful Icon System | 177 | | [Iconmonstr](https://iconmonstr.com/) | Discover 4496+ free icons in 313 collections | 178 | | [Vivid.js](https://webkul.github.io/vivid/)| Ready to use Free and Open Source SVG Icons Pack JavaScript Library. | 179 | | [Iconfinder](https://www.iconfinder.com/)| Free and premium vector icons in SVG, PNG, CSH and AI format | 180 | | [Lordicon](https://lordicon.com/free-icons) | 50 free animated interactive icons | 181 | | [UseAnimations](https://useanimations.com/) | Free Animated Icons in SVG and Json Format(for lottie) | 182 | | [css.gg](https://css.gg/) | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API | 183 | | [SVGPorn](https://svgporn.com) | 1000+ high-quality SVG logos | 184 | | [Payment System Logos](https://github.com/mpay24/payment-logos/) | Logos for payment systems available in png and svg | 185 | | [Browser Logos](https://github.com/alrra/browser-logos/) | High resolution web browser logos | 186 | | [IconBros](https://www.iconbros.com) | 7843+ free icons grouped in 182 collections | 187 | | [LogoHub](https://logohub.io/) | Generate and download your logo for free in PNG and SVG format | 188 | | [Material Design Icons](https://materialdesignicons.com/) | A icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. | 189 | | [Heroicons](https://heroicons.dev/) | Free, open source icons from the creators of Tailwind CSS. | 190 | | [Zondicons](https://www.zondicons.com/icons.html) | A set of free premium SVG icons for you to use on your digital products. | 191 | | [Endless Icons](http://endlessicons.com/) | A website offering a number of free icons. Icons are tagged and also compressed into kits. | 192 | | [Icomoon](https://icomoon.io/app/) |Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. | 193 | | [Eva Icons](https://akveo.github.io/eva-icons/#/) |Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. | 194 | | [Zondicons](http://www.zondicons.com/) | A set of free premium SVG icons for you to use on your digital products. you can download the icons into your desktop | 195 | | [Entypo](http://www.entypo.com/) | 411 carefully crafted premium pictograms | 196 | | [Cryptoicons](http://cryptoicons.co/) | A set of 430 crypto and fiat currency icons. Completely free. | 197 | | [Ikonate](https://ikonate.com/) | Fully customisable & accessible vector icons | 198 | | [appicon](https://appicon.co/)| Quickly generate app icons in diffrent sizes for your IOS, macOS and Android projects| 199 | | [LineIcons](https://lineicons.com) | 2000+ Essential Line Icons for Designers and Developers | 200 | 201 |
202 | ↥ Back To Top 203 |
204 | 205 | ## Favicons 206 | 207 | >Resources for Favicons 208 | 209 | | Website                            | Description | 210 | | ----------------------- | ------------------ | 211 | | [Favicon.io](https://favicon.io/)| Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats | 212 | | [Favicon Generator](http://tools.dynamicdrive.com/favicon/)| Generate favicon ico files for your website | 213 | | [RealFaviconGenerator](https://realfavicongenerator.net/)| Generate icons for all platforms (Windows, iOS, Android) | 214 | | [FontIcon](https://gauger.io/fonticon/)| Generate favicons and images from Font Awesome icons | 215 | 216 |
217 | ↥ Back To Top 218 |
219 | 220 | ## Icon Fonts 221 | 222 | >Resources for Icon Fonts 223 | 224 | | Website                            | Description | 225 | | ----------------------- | ------------------ | 226 | | [Font Awesome](https://fontawesome.com/)| The web's most popular icon set and toolkit | 227 | | [Line Awesome](https://icons8.com/line-awesome)| Swap in replacement of Font Awesome with modern line icons | 228 | | [Material Icons](https://material.io/resources/icons/)| Material design icon library | 229 | | [IonIcons](http://ionicons.com/)| Beautifully crafted open source icons from Ionic team | 230 | | [Zurb Foundation Icons](https://zurb.com/playground/foundation-icon-fonts-3)| Customizable Foundation icons | 231 | | [Fontisto Icons](https://fontisto.com/)| Fontisto the iconic font and css toolkit · 616+ free icons | 232 | | [Boxicons](https://boxicons.com/)| Boxicons is a free collection of carefully crafted open source icons | 233 | | [Icofont](https://icofont.com/)| 2100+ free icons to spice up your creative designs | 234 | | [Material Palette](https://www.materialpalette.com/icons)| Free to pick palettes, icons and colors for Material Design]| 235 | | [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/index.html) | Material design icon font | 236 | | [Vscode Codicons](https://microsoft.github.io/vscode-codicons/dist/codicon.html) | The icon font from Visual Studio Code | 237 | | [Devicon](https://konpa.github.io/devicon/) | Devicon is a set of icons representing programming languages, designing & development tools | 238 | | [PaymentFont](https://paymentfont.com/) | A sleek webfont for payment operators and methods. Featuring 116 icons | 239 | | [Weather Icons](https://erikflowers.github.io/weather-icons/) | Weather Icons is the only icon font with 222 weather themed icons | 240 | | [Stroke 7](https://themes-pixeden.com/font-demos/7-stroke/index.html) | 202 thin stroke icons inspired by iOS 7 | 241 | | [Jam Icons](https://jam-icons.com/) | 890+ handcrafted icons to make your web app awesome | 242 | | [Fontastic.me](http://fontastic.me/) | Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg | 243 | | [Fontello](http://fontello.com/)| 200+ web icons where you can customize the names or codes of icons. | 244 | | [Linea](https://linea.io/)| Linea: Featuring 750+ Free Icons | 245 | 246 |
247 | ↥ Back To Top 248 |
249 | 250 | ## Stock Photos 251 | 252 | >Websites that offer free stock photos of all kinds for your websites and apps 253 | 254 | | Website                            | Description | 255 | | ----------------------- | ------------------ | 256 | | [Pexels](https://www.pexels.com/)| Free stock photos shared by talented creators | 257 | | [Unsplash](https://unsplash.com/)| The internet’s source of freely usable images 258 | | [Pixabay](https://pixabay.com/)| Over 1.7 million+ high quality stock images and videos | 259 | | [Magdeleine](https://magdeleine.co/)| Gallery & free high res photo everyday | 260 | | [Picspree](https://picspree.com)| Royalty free images, stock photos, illustrations, and vectors | 261 | | [Burst](https://burst.shopify.com/)| Free stock photos collections | 262 | | [Gratisography](https://gratisography.com/)| Free collection of free high-resolution pictures | 263 | | [Life of Pix](https://www.lifeofpix.com/)| Free high resolution photography | 264 | | [Stock Snap](https://stocksnap.io/)| Hundreds of high quality photos added weekly | 265 | | [Morguefile](https://morguefile.com/)| Over 350,000 free stock photos for commercial use | 266 | | [Kaboom Pics](https://kaboompics.com/)| Stock photography and color palettes. Good for product images | 267 | | [New Old Stock](https://nos.twnsnd.co/)| Stock vintage photos | 268 | | [Pic Jumbo](https://picjumbo.com/)| Good collections of different types of photos | 269 | | [Public Domain Pictures](https://www.publicdomainpictures.net/en/)| Public domain images of all types | 270 | | [Find A Photo](https://www.chamberofcommerce.org/findaphoto/)| Searches multiple stock photo websites | 271 | | [Stockvault](http://www.stockvault.net/)| Categorized stock photos | 272 | | [Placeholder](https://placeholder.com/)| A free image placeholder service for the web. You can specify image size and format | 273 | | [Realistic Shots](https://realisticshots.com/)| Free high resolution stock photos | 274 | | [Negative Space](https://negativespace.co/)| High-Resolution Free Stock Photos | 275 | | [SkitterPhoto](https://skitterphoto.com/)| Free high resolution photography | 276 | | [PicoGraphy](https://picography.co/)| Gorgeous, High-Resolution, Free Photos | 277 | | [Wunder Stock](https://wunderstock.com/)| Stunningly amazing free photos | 278 | | [PxHere](https://pxhere.com/)| Free Images & Free stock photos - PxHere | 279 | | [Piqsels](https://piqsels.com/)| Royalty Free Stock Photos | 280 | | [FoodiesFeed](https://www.foodiesfeed.com/)| Food photo stock | 281 | | [Nappy](https://www.nappy.co/)| A website offering Beautiful, high-res photos of black and brown people.| 282 | | [Generated Photos](https://generated.photos/)| Unique AI Generated model photos| 283 |
284 | ↥ Back To Top 285 |
286 | 287 | ## Stock Videos 288 | 289 | >Websites that offer free stock videos of all kinds for your websites and apps 290 | 291 | | Website                            | Description | 292 | | ----------------------- | ------------------ | 293 | | [Pexels](https://www.pexels.com/videos)| Largest library of free to use videos, donated by the community | 294 | | [Pixabay](https://www.pixabay.com/videos)| Large library of free to use videos, donated by the community similar to Pexels | 295 | | [Coverr.co](https://coverr.co/)| Beautiful free stock video footage | 296 | | [Videezy](https://www.videezy.com/)| Free HD stock footage & 4K videos | 297 | | [Mix Kit](https://mixkit.co/)| Stock video clips & music | 298 | | [Life Of Vids](https://www.lifeofvids.com/)| Free video clips and loops | 299 | | [Videvo](https://www.videvo.net/stock-video-footage/)| Free and premium stock videos | 300 | 301 |
302 | ↥ Back To Top 303 |
304 | 305 | ## Stock Music & Sound Effects 306 | 307 | >Websites that offer free stock music and/or sound effects 308 | 309 | | Website                            | Description | 310 | | ----------------------- | ------------------ | 311 | | [Free Stock Music](https://www.free-stock-music.com/)| Royalty free stock music for YouTube videos, podcasts, etc | 312 | | [Bensound](https://www.bensound.com/)| Download Royalty Free Music for free and use it in your project | 313 | | [Mixkit](https://mixkit.co/free-stock-music/)| Free music for your projects | 314 | | [Freesound](https://freesound.org/)| Free stock music and sounds | 315 | | [Free Music Archive](https://freemusicarchive.org/)| Collaborative database of creative-commons licensed sound for musicians and sound lovers | 316 | | [Musopen](https://musopen.org/music/)| An online copyright free classical music library | 317 | | [Unminus](https://www.unminus.com/)| Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube. | 318 | 319 |
320 | ↥ Back To Top 321 |
322 | 323 | ## Vectors & Clip Art 324 | 325 | >Free vectors, clipart, illustrations, patterns and more 326 | 327 | | Website                            | Description | 328 | | ----------------------- | ------------------ | 329 | | [Vecteezy](https://www.vecteezy.com/)| Find and download free vector art | 330 | | [Freepik](https://www.freepik.com)| Free vectors, stock photos, PSD and icons | 331 | | [Free Vectors](https://www.freevectors.net/)| Community of vector lovers who share free vector graphics | 332 | | [PNGTree](https://pngtree.com/free-vectors)| png, backgrounds, templates, text effects | 333 | | [Vector4Free](https://www.vector4free.com/)| Free vector graphics | 334 | | [Retro Vectors](http://retrovectors.com/)| Vintage vectors and graphics | 335 | | [Freeble](http://freebbble.com/)| Vectors, patterns, mockups and more | 336 | | [Lukaszadam](https://lukaszadam.com/)| Free Vector atrworks | 337 | | [Illlustrations](https://illlustrations.co/)| Beautiful 100 Illustrations - png, svg | 338 | | [Clipart](https://www.clipart.email/)| Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! | 339 | | [Growwwkit illustrations](https://growwwkit.com/illustrations/phonies)| A set of 8 simple, black & white, stylish illustrations | 340 | | [World Vector Logo](https://worldvectorlogo.com/)| Download vector logos of brands you love | 341 | | [trianglify.io](https://trianglify.io/) | Generate low-poly backgrounds, textures, and vectors | 342 | | [blob](https://blobs.app/) | Generate Blob shapes for Web and Flutter apps | 343 | | [HiClipart](https://www.hiclipart.com/)| A community for designers to share & download transparent background PNG cliparts | 344 | 345 |
346 | ↥ Back To Top 347 |
348 | 349 | ## Product & Image Mockups 350 | 351 | >Create mockups of devices and other products 352 | 353 | | Website                            | Description | 354 | | ----------------------- | ------------------ | 355 | | [Smart Mockups](https://smartmockups.com/)| Create stunning product mockups (free & premium) | 356 | | [Shot Snap](https://shotsnapp.com/)| Create beautiful device mockup images for your app or website design | 357 | | [Screely](https://www.screely.com/)| Instantly turn your screenshot into a mockup | 358 | | [Screen Peak](https://screenpeek.io/)| Create a mockup from a URL | 359 | | [Mockup World](https://www.mockupworld.co/)| The biggest source of free photo-realistic Mockups online | 360 | | [Collab Shot](https://www.collabshot.com/)| Real-time screen grabs and image sharing | 361 | | [Facebook Devices](https://facebook.design/devices)| Images and Sketch files of popular devices | 362 | | [Threed.io](https://threed.io)| Generate 3D mockups right in your browser. | 363 | | [Mockuphone](https://mockuphone.com/)| 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV | 364 | 365 |
366 | ↥ Back To Top 367 |
368 | 369 | ## HTML & CSS Templates 370 | 371 | >Websites that offer free beautiful website templates and themes of all types 372 | 373 | | Website                            | Description | 374 | | ----------------------- | ------------------ | 375 | | [HTML5Up](https://html5up.net/)| Very modern, unique responsive HTML5/CSS3 themes | 376 | | [Templatemo](https://templatemo.com/)| Minimal, resume, gallery themes and more | 377 | | [Templated.co](https://templated.co/)| Tons of minimalistic HTML5/CSS3 themes | 378 | | [FreeHTML5](https://freehtml5.co/)| Free & premium HTML5 and Bootstrap themes | 379 | | [StyleShout](https://www.styleshout.com/free-templates/)| Brilliantly crafted free website templates | 380 | | [Start Bootstrap](https://startbootstrap.com/)| Bootstrap starter themes | 381 | | [Zerotheme](https://www.zerotheme.com/)| HTML5, Bootstrap, Prestashop templates | 382 | | [HTML5xCSS3](https://www.html5xcss3.com/)| Collection of wonderful templates in different categories | 383 | | [Colorlib](https://colorlib.com/wp/templates/)| Almost any category of theme you can think of | 384 | | [Free CSS](https://www.free-css.com/free-css-templates)| Huge collection of free templates | 385 | | [Hubspot](https://www.hubspot.com/resources)| Templates, infographics, banners and much more| 386 | | [Mobirise](https://mobirise.com/html-templates/)| Great looking HTML5/CSS3 templates| 387 | | [Bootswatch](https://bootswatch.com/)| Free themes for Bootstrap| 388 | | [Onepagelove](https://onepagelove.com/)| One page websites, templates and resources| 389 | | [Themes For App](https://themesfor.app/)| Free Bootstrap themes and landing pages| 390 | | [BootstrapTaste](https://bootstraptaste.com/)| Premium & Free Bootstrap Templates| 391 | | [BootstrapMade](https://bootstrapmade.com/)| Elegant, clean and beautiful free templates using Bootstrap. | 392 | | [W3Layouts](https://w3layouts.com/)| W3Layouts: 3784+ Free Website Templates for 2020 | 393 | | [Tooplate](https://www.tooplate.com/)| Tooplate: Free HTML Templates for everyone! | 394 | | [Cruip](https://cruip.com/free-templates/)| Fully coded HTML templates to help you easily build your startup landing page without hassles. | 395 | | [Shade](https://grayic.com/shade/) | Get High Converting Landing Pages For Free! | 396 | 397 |
398 | ↥ Back To Top 399 |
400 | 401 | ## CSS Frameworks 402 | 403 | >CSS/UI frameworks to help build great looking websites and applications 404 | 405 | | Website                            | Description | 406 | | ----------------------- | ------------------ | 407 | | [Tailwind CSS](https://tailwindcss.com/)| Low level, utility-first framework | 408 | | [Bootstrap](https://getbootstrap.com/)| Popular UI framework with tons of components that use both CSS and JS | 409 | | [Materialize](https://materializecss.com/)| A modern responsive front-end framework based on Material Design | 410 | | [Material Design Lite](https://getmdl.io/)| Light framework based on Material Design. No JS dependency | 411 | | [Bulma](https://bulma.io/)| Modern CSS framework with no JS | 412 | | [Skeleton](http://getskeleton.com/)| Extremely light framework for basic UI elements | 413 | | [Semantic UI](https://semantic-ui.com/)| Empowers designers and developers by creating a shared vocabulary for UI | 414 | | [Fomantic UI](https://fomantic-ui.com/)| A community fork of Semantic-UI | 415 | | [Foundation](https://get.foundation/)| Mobile first framework with clean markup | 416 | | [Pure CSS](https://purecss.io/)| A set of small, responsive CSS modules | 417 | | [UIKit](https://getuikit.com/)| Lightweight and modular front-end framework | 418 | | [Susy](https://www.oddbird.net/susy/)| Lightweight, grid-layout engine for Sass | 419 | | [Milligram.io](https://milligram.io/)| Minimalist CSS framework | 420 | | [Vanilla Framework](https://vanillaframework.io/)| Simple, extensible CSS framework written in Sass | 421 | | [Spectre CSS](https://picturepan2.github.io/spectre/)| Lightweight, modern CSS framework | 422 | | [Picnic CSS](https://picnicss.com/)| Lightweight and beautiful library | 423 | | [Wing](https://kbrsh.github.io/wing/)| A beautiful CSS framework designed for minimalists | 424 | | [Chota](https://jenil.github.io/chota/)| A micro (~3kb) CSS framework | 425 | | [Blueprint CSS](https://blueprintcss.dev/)| A lightweight layout library for building great responsive mobile first UIs that work everywhere | 426 | | [W3.CSS](https://www.w3schools.com/w3css/) | A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library | 427 | | [98.css](https://jdan.github.io/98.css/)| A design system for building faithful recreations of old UIs | 428 | | [NES CSS](https://nostalgic-css.github.io/NES.css/)| NES-style CSS Framework | 429 | | [Shoelace.css](https://www.shoelace.style/)| Lightweight, forward-thinking CSS library built with future CSS syntax | 430 | | [MVP.css](https://andybrewer.github.io/mvp/) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done | 431 | | [Blaze.css](http://blazecss.com/) | Open source modular CSS toolkit providing great structure for building websites quickly | 432 | | [Turret CSS](https://turretcss.com/) | Turret CSS is a styles framework for development of responsive websites. | 433 | | [Cutestrap](https://www.cutestrap.com/) | A strong, independent CSS Framework. | 434 | | [Shorthand](https://shorthandcss.com/) | Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css | 435 | | [XP.css](https://botoxparty.github.io/XP.css/) | XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs. | 436 | | [Framework7](https://framework7.io/) | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. | 437 | 438 |
439 | ↥ Back To Top 440 |
441 | 442 | ## CSS Animations 443 | 444 | >CSS animations to build awesome animations for websites and applications 445 | 446 | | Website                            | Description | 447 | | ----------------------- | ------------------ | 448 | | [Animate.css](https://animate.style/)| Just-add-water CSS animations | 449 | | [Bounce.js](http://bouncejs.com/)| Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations | 450 | | [Anime.js](https://animejs.com/)| Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects | 451 | | [Magic Animations](https://www.minimamente.com/project/magic/)| Animations has been one of the most impressive animation libraries available | 452 | | [Zdog](https://zzz.dog/)| Round, flat, designer-friendly pseudo-3D engine for canvas & SVG | 453 | | [CSShake](http://elrumordelaluz.github.io/csshake/)| CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page | 454 | | [Hover.css](http://ianlunn.github.io/Hover/)| Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website | 455 | | [AniJS](http://anijs.github.io/)| AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure | 456 | | [Animista](http://animista.net/)| CSS Animations On Demand | 457 | | [Tachyons-animate](https://github.com/anater/tachyons-animate)| Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need | 458 | | [Sequence.js](https://www.sequencejs.com/)| Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications | 459 | | [Infinite](https://tilomitra.github.io/infinite/)| These animations, like rotations and pulses, that are specifically designed to run and repeat forever | 460 | | [OBNOXIOUS.CSS](http://tholman.com/obnoxious/)| Animations for the strong of heart, and weak of mind | 461 | | [MOTION UI](https://zurb.com/playground/motion-ui)| A Sass library for creating flexible CSS transitions and animations | 462 | 463 |
464 | ↥ Back To Top 465 |
466 | 467 | ## Javascript Animation Libraries 468 | 469 | >javascript animations libraries to build awesome animations for websites and applications 470 | 471 | | Website                            | Description | 472 | | ----------------------- | ------------------ | 473 | | [Greensock](https://greensock.com/)| A JavaScript library for building high-performance animations that work in every major browser | 474 | | [Velocity.js](http://velocityjs.org/)| Velocity is an lightweight animation engine with the same API as jQuery's $.animate() | 475 | | [lax.js](https://github.com/alexfoxy/laxxx)| Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! | 476 | | [Rellax.js](https://github.com/dixonandmoe/rellax)| A buttery smooth, super lightweight, vanilla javascript parallax library | 477 | | [three.js](https://github.com/mrdoob/three.js/)| An easy to use, lightweight, 3D library with a default WebGL renderer. | 478 | | [wow.js](https://wowjs.uk/)| Reveal Animations When You Scroll. | 479 | | [chocolat.js](http://chocolat.insipi.de/)| Free lightbox plugin. | 480 | | [Animate On Scroll](https://michalsnik.github.io/aos/)| Animate on scroll library to reveal animations when You scroll. | 481 | | [Tilt.Js](http://gijsroge.github.io/tilt.js/)| A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. | 482 | 483 |
484 | ↥ Back To Top 485 |
486 | 487 | ## UI Components & Kits 488 | 489 | >Not quite "frameworks", but tools for creating user interfaces with components or UI kits 490 | 491 | | Website                            | Description | 492 | | ----------------------- | ------------------ | 493 | | [TagFold](https://tagfold.com/)| Useful Bootstrap 4, HTML5, CSS3 Code Snippets to Build Web Layouts | 494 | | [UILang](http://uilang.com/)| A minimal, ui-focused programming language for web designers | 495 | | [Medialoot CSS Components](https://medialoot.com/free-themes/css-components/)| Calendars, price grids and other UI components | 496 | | [Froala Design Blocks](https://froala.com/design-blocks)| Over 170 responsive design blocks ready to be used in your web or mobile apps | 497 | | [Material Design For Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/)| Open source toolkit for building material design with Bootstrap | 498 | | [Photonkit](http://photonkit.com/)| Desktop UI library for Electron | 499 | | [Flat UI](https://designmodo.github.io/Flat-UI/)| Minimal free user interface kit| 500 | | [Shards](https://designrevision.com/downloads/shards/)| A free and modern UI toolkit for web makers based on Bootstrap | 501 | | [Creative Tim](https://www.creative-tim.com/)| All types of UI libraries and kits including JS frameworks like React | 502 | | [Brumm Shadow Maker](https://brumm.af/shadows)| An online tool to make css shadows| 503 | | [AdminLTE](https://adminlte.io/)| Best open source admin dashboard & control panel theme| 504 | | [SpinKit](https://tobiasahlin.com/spinkit/)| Simple CSS Spinners| 505 | | [Epic Spinners](https://epic-spinners.epicmax.co/)| CSS spinners collection with Vue.js integration. | 506 | | [Loading.io](https://loading.io/)| Online service provider for creating simple animations, spinners, progress bar and more | 507 | | [Moving Letters](https://tobiasahlin.com/moving-letters/)| Animated Text with JavaScript and anime.js| 508 | | [CSS Layout](https://csslayout.io/)| A collection of popular web layouts and patterns in pure CSS | 509 | | [Codyhouse](https://codyhouse.co/)| Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components | 510 | | [Tailwind Starter Kit](https://github.com/creativetimofficial/tailwind-starter-kit)| Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source | 511 | | [Tailwindtoolbox](https://www.tailwindtoolbox.com/)| Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. | 512 | | [tailwindcomponents](https://tailwindcomponents.com/)| A free repository for community components using TailwindCSS | 513 | | [sweetalert](https://sweetalert.js.org/)| SweetAlert makes popup messages easy and pretty. | 514 | | [sweetalert2](https://sweetalert2.github.io/)| A beautiful,responsive,customizable,accessible replacement for javascript's popup boxes | 515 | | [tailblocks](https://mertjf.github.io/tailblocks/)| Open source ready-to-use Tailwind CSS components. | 516 | | [Soft Components](https://soft-components-docs.web.app/)| A set of framework-agnostic web components based on neumorphic design. | 517 |
518 | ↥ Back To Top 519 |
520 | 521 | 522 | ## React UI 523 | 524 | >UI and component libraries for the React JavaScript framework 525 | 526 | | Website                            | Description | 527 | | ----------------------- | ------------------ | 528 | | [Material UI](https://material-ui.com/)| React components for faster and easier web development, based on Material Design | 529 | | [Chakra UI](https://chakra-ui.com/)| Build accessible React apps & websites with speed. [Openchakra](https://openchakra.app/) | 530 | | [React Bootstrap](https://react-bootstrap.github.io/)| Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript | 531 | | [ReactStrap](https://reactstrap.github.io/)| Another Bootstrap UI library for React | 532 | | [React Admin](https://marmelab.com/react-admin/)| A frontend Framework for building admin applications. Supports API's out of the box| 533 | | [BlueprintJS](https://blueprintjs.com/)| React-based UI toolkit for the web | 534 | | [React Semantic UI](https://react.semantic-ui.com/)| UI components based off of the Semantic UI framework | 535 | | [Shards React](https://designrevision.com/downloads/shards-react/)| React UI kit featuring a modern design system with dozens of custom components | 536 | | [React Virtualized](https://bvaughn.github.io/react-virtualized)| UI set for data. Includes tables, lists, sorting, etc. | 537 | | [React Toolbox](http://react-toolbox.io/#/)| Material design UI library for React | 538 | | [Elastic UI](https://elastic.github.io/eui/#/)| Distributes UI React components and static assets for use in building web layouts | 539 | | [React Desktop](http://reactdesktop.js.org/)| Desktop styled components in React. Includes MacOS and Windows based components | 540 | | [Onsen React](https://onsen.io/react/)| Distributes Components for hybrid mobile apps with React and Onsen UI | 541 | | [Evergreen](https://evergreen.segment.com/)| Design system for React | 542 | | [Rebass](https://rebassjs.org/)| React primitive UI components built with styled system | 543 | | [Grommet](https://v2.grommet.io/)| mobile first UI component library | 544 | | [Rimble](https://rimble.consensys.design/)| React design kit, library and guides | 545 | | [Landing Page Template](https://github.com/cruip/open-react-template/)| Open source landing page template for react | 546 | | [Elemental UI](http://elemental-ui.com/)| A UI Toolkit for React.js Websites and Apps | 547 | | [Ant Design](https://ant.design/)| Open source design React ui library. | 548 | | [PRIMEREACT](https://www.primefaces.org/primereact/)| The ultimate collection of design-agnostic, flexible and accessible React UI Components | 549 | | [Primer Components](https://primer.style/components/)| Primer Components are React components which implement GitHub's Primer Design System | 550 | | [Orbit](https://orbit.kiwi/)| Design system and React UI components for travel projects. | 551 | | [Base Web](https://baseweb.design/)| Base Web provides a robust suite of components out of the box | 552 | | [Backpack UI](http://lonelyplanet.github.io/backpack-ui/?path=/story/styles--design-tokens)| Backpack is the Lonely Planet toolset that we use to build front end apps. | 553 | | [Reaviz](https://reaviz.io)| Data visualization library for React based on D3 | 554 | | [React Suite](https://rsuitejs.com/en/)| A suite of React components, sensible UI design, and a friendly development experience. | 555 | | [React Spring](https://www.react-spring.io/)| Spring-physics based animation library for React applications. | 556 | | [Recharts](http://recharts.org/en-US/)| A composable charting library built on React components. | 557 | | [Vercel UI](https://github.com/zeit-ui/react) | Modern and minimalist React UI library | 558 | 559 |
560 | ↥ Back To Top 561 |
562 | 563 | ## Vue UI 564 | 565 | >UI and component libraries for the Vue JavaScript framework 566 | 567 | | Website                            | Description | 568 | | ----------------------- | ------------------ | 569 | | [Vuetify](https://vuetifyjs.com/en/)| Material design component framework | 570 | | [Bootstrap Vue](https://bootstrap-vue.org/)| Use Bootstrap components with Vue | 571 | | [Buefy](https://buefy.org/)| Lightweight UI components based on Bulma | 572 | | [Quasar](https://quasar.dev/)| High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions | 573 | | [Element](https://element.eleme.io/#/en-US)| Desktop UI library for Vue | 574 | | [Fish UI](https://myliang.github.io/fish-ui/#/components/index)| Vue UI toolkit for the web | 575 | | [Keen UI](https://josephuspaye.github.io/Keen-UI)| VueUI library with a simple API, inspired by Google's Material Design | 576 | | [Onsen Vue](https://onsen.io/vue/)| Distributes Components for hybrid mobile apps with Vue and Onsen UI | 577 | | [Vuejsexamples](https://vuejsexamples.com)| A nice collection of useful vuejs UI components | 578 | | [Inkline](https://inkline.io)|Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications | 579 | | [Vuesax](https://vuesax.com/)|Unique and reusable UI components | 580 | | [Antdv](https://antdv.com/)|UI library for Vue based on Ant Design | 581 | | [Shards Vue](https://designrevision.com/downloads/shards-vue/)|A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components | 582 | 583 |
584 | ↥ Back To Top 585 |
586 | 587 | ## Angular UI 588 | 589 | >UI and component libraries for the Angular JavaScript framework 590 | 591 | | Website                            | Description | 592 | | ----------------------- | ------------------ | 593 | | [Material Angular](https://material.angular.io/)| UI library for Angular based on Material design | 594 | | [NG Bootstrap](https://ng-bootstrap.github.io/#/home)| UI library for Angular based on the Bootstrap framework | 595 | | [PrimeNG](https://www.primefaces.org/primeng/#/)| Powerful UI component library for Angular | 596 | | [Onsen Angular](https://onsen.io/angular2/)| Hybrid mobile and PWA UI library for Angular and Onsen UI | 597 | | [NG Lightning](https://ng-lightning.github.io/ng-lightning/#/)| Native Angular components & directives for Lightning Design System | 598 | | [NG Semantic](https://ng-semantic.herokuapp.com/)| UI library for Angular based on Semantic UI | 599 | | [Nebular](https://akveo.github.io/nebular/)| Customizable UI Kit, Auth & Security for Angular | 600 | | [Alyle UI](https://alyle.io/)| Minimal components set for Angular | 601 | | [NGX Bootstrap](https://valor-software.com/ngx-bootstrap/#/)| Another UI library for Angular based on the Bootstrap framework | 602 | | [NG Zorro](https://ng.ant.design/)| UI library for Angular based on Ant Design | 603 | 604 |
605 | ↥ Back To Top 606 |
607 | 608 | ## Svelte UI 609 | 610 | >UI and component libraries for the Svelte Javascript compiler 611 | 612 | | Website                            | Description | 613 | | ----------------------- | ------------------ | 614 | | [Svelte Material UI](https://sveltematerialui.com/)| UI library for Svelte based on Material Design | 615 | | [SvelteStrap](https://bestguy.github.io/sveltestrap/)| UI library for Svelte based on the Bootstrap framework | 616 | | [Svelte Flat UI](https://svelteui.js.org/#/checkbox)|UI library for Svelte based on Flat Design | 617 | 618 |
619 | ↥ Back To Top 620 |
621 | 622 | ## Design Systems & Style Guides 623 | 624 | >Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites 625 | 626 | | Website                            | Description | 627 | | ----------------------- | ------------------ | 628 | | [Material Design](https://material.io/)| Google's Material Design | 629 | | [Ant Design](https://ant.design/)| Design system for enterprise-level products | 630 | | [Apple Design Resources](https://developer.apple.com/design/resources/)| Guides and templates for using Apple design and UI | 631 | | [Primer](https://primer.style/)| Design, build, and create with GitHub’s design system | 632 | | [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html)| Oracle's design system and toolkit | 633 | | [Pulse](https://pulse.heartbeat.ua/)| Design system, guides and React component library | 634 | | [Bolt](https://boltdesignsystem.com/)| Robust Twig and web component powered UI components | 635 | | [Clarity Design System](https://clarity.design/)| UX guidelines, HTML/CSS framework, and Angular components | 636 | | [AtlasKit](https://atlaskit.atlassian.com/)| Atlassian's official UI library, built according to the Atlassian Design Guidelines | 637 | | [Audi Design Resources](https://www.audi.com/ci/en/guides/user-interface/introduction.html)| Audi UI design system and toolkit | 638 | | [Carbon Design Systems](https://www.carbondesignsystem.com/)| Carbon is IBM’s open-source design system for products and experiences | 639 | | [Yelp Style Guide](https://www.yelp.com/styleguide)| Yelp style guide, components and toolkit | 640 | | [Comet](https://comet.discoveryeducation.com/)| Scalable design system of visual language, components, and design assets | 641 | | [ETrade Design System](https://etrade.design/)| Guides and toolkits that blend finance with simplicity and ease of use | 642 | | [Fundamental Library](https://sap.github.io/fundamental-styles/)| Open source and community driven project for consistent user interfaces| 643 | | [Infor Design](https://design.infor.com/)| Guidelines and resources to create meaningful experiences for Infor’s products | 644 | | [Lexicon](https://liferay.design/lexicon/)| An experience language for crafting beautiful UI | 645 | | [Mailchimp UI/UX](https://ux.mailchimp.com/patterns/color)| Style guide and components from Mailchimp | 646 | | [Marvel Style Guide](https://marvelapp.com/styleguide/overview/introduction)| Set of design principles and components | 647 | | [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)| Collection of UX frameworks from Microsoft | 648 | | [Pluralsight Design System](https://design-system.pluralsight.com/)| Design guide with components for designing with Pluralsight | 649 | | [Polaris](https://polaris.shopify.com/)|Design system that creates great experiences for all of Shopify’s merchants | 650 | | [Mozilla Protocol](https://protocol.mozilla.org/)| Protocol is a design system for Mozilla and Firefox websites | 651 | | [SendGrid Style Guide](http://styleguide.sendgrid.com/)| UI library for developing consistent UI/UX at SendGrid | 652 | | [VTEX Styleguide](https://styleguide.vtex.com/)| Reusable patterns, components and assets related to product design in VTEX | 653 | | [Rizzo](https://rizzo.lonelyplanet.com/styleguide/design-elements)| Style guide with UI components, JS components, widgets, etc | 654 | | [Atomize](https://atomizecode.com/)| UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly | 655 | | [StyleGuides.io](http://styleguides.io/)| A directory of 500+ styleguides | 656 | | [Done Design System](https://uilibrary.github.io/done-design-system/)| Open source design system, guides & components | 657 | | [Skoda Brand System](https://skoda-brand.com/explore-our-brand) | Design guideline for developing applications under the Skoda brand | 658 | | [Spectrum](https://spectrum.adobe.com/) | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. | 659 | 660 |
661 | ↥ Back To Top 662 |
663 | 664 | ## Online Design Tools 665 | 666 | >All kinds of online tools for design, from photo editors to wireframing, and more 667 | 668 | | Website                            | Description | 669 | | ----------------------- | ------------------ | 670 | | [Figma](https://www.figma.com/graphic-design-tool/)| Online graphic design tool (Free & paid options) | 671 | | [Vectr](https://vectr.com/)| Free vector graphics software| 672 | | [Canva](https://www.canva.com/)| Create beautiful designs (Free & Paid) | 673 | | [Get Waves](https://getwaves.io/)| A free SVG wave generator to make unique SVG waves for web design | 674 | | [Clippy](https://bennettfeely.com/clippy/)| Easy CSS clip-path maker | 675 | | [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/full-control.html)| Eight values specifying border-radius in CSS ( border-radius generator ) | 676 | | [Wireframe.cc](https://wireframe.cc/)| Wireframing tool (free & paid) | 677 | | [Fotor](https://www.fotor.com/)| Photo editor and design maker | 678 | | [Pixlr](https://www.pixlr.com/)| Online photo editor | 679 | | [Animoto Video Maker](https://animoto.com/apps/online-video-maker)| Make videos online | 680 | | [RemoveBG](https://www.remove.bg/)| Remove image backgrounds | 681 | | [Photo Creator](https://photos.icons8.com/creator)| Create your own photos instead of searching for stock | 682 | | [Visme](https://www.visme.co/)| Create presentations, infographics and more | 683 | | [Infogram](https://infogram.com/)| Create infograms | 684 | | [ChartGo](https://www.chartgo.com/)| Create charts and graphs online | 685 | | [Cartoon Photo](https://cartoon.pho.to/)| Turn photos into cartoons | 686 | | [Logo Maker](https://logomakr.com/)| Create custom logos | 687 | | [Whimsical](https://whimsical.com/)| Wireframes, diagrams and more (4 free) | 688 | | [Whiteboard](https://witeboard.com/)| Online drawing tool | 689 | | [Octopus](https://octopus.do/)| Sitemap builder | 690 | | [CTA Button Maker](https://www.clickminded.com/button-generator/)| Create call to action buttons | 691 | | [Blobmaker](https://www.blobmaker.app/)| Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes | 692 | | [Personas](https://personas.draftbit.com/)| A playful avatar generator for the modern age | 693 | | [SoftUI](https://www.softui.io)| A Soft UI (neumorphism) CSS generator | 694 | | [Photopea](https://www.photopea.com)| A Online Photoshop editor | 695 | | [Excalidraw](https://excalidraw.com/)| Virtual whiteboard for sketching hand-drawn like diagrams | 696 | | [Diagrams](https://www.diagrams.net/)| Diagram software and Flowchart maker | 697 | | [MapInSeconds](http://mapinseconds.com/)| Simple way to visualize your data with a map | 698 | | [Grid Malven](http://grid.malven.co/)| A css grid cheatsheet to reference when creating a css grid | 699 | | [Flex Malven](http://flexbox.malven.co/)| A flexbox grid cheatsheet to reference when working with flexbox | 700 | | [Smart Upscaler](https://icons8.com/upscaler) | Upscale images by 2-4x resolution | 701 | | [GetAvataaars](https://getavataaars.com/) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library | 702 | | [Webflow](https://webflow.com/) | Break the code barrier, Build better business websites, faster. Without coding. | 703 | | [Trace](https://stickermule.com/trace) | Instantly remove the background from your photos | 704 | | [Neumorphism.io](https://neumorphism.io/#55b9f3) | Generate Soft-UI CSS shadow code | 705 | | [DB Designer](https://app.dbdesigner.net/) | Design your database for free online | 706 | | [Ui Bakery](https://uibakery.io/) | Create full-fledged web apps visually | 707 | | [Faux](http://knutsynstad.com/fauxcode/) | Turn real code into faux code | 708 | | [Rive](https://rive.app/) | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform. 709 | | [Unscreen](https://www.unscreen.com/) | Remove Video Background 100% Automatically and Free | 710 | | [Kodeshot](https://www.kodeshot.net/) | Convert your source code into nice pictures for your articles, tweets, messages, posts... | 711 | | [Wix](https://www.wix.com/) | Create a Website You’re Proud Of | 712 | | [GTmetrix](https://gtmetrix.com/) | Website Speed and Performance Optimization | 713 | 714 |
715 | ↥ Back To Top 716 |
717 | 718 | ## Downloadable Design Software 719 | 720 | >Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop 721 | 722 | | Website                            | Description | 723 | | ----------------------- | ------------------ | 724 | | [Gimp](https://www.gimp.org/)| Free & open source image editor similar to Photoshop | 725 | | [Gravit Designer](https://www.designer.io/en/)| Free full-featured vector graphic design app that works on ALL platforms | 726 | | [Blender](https://www.blender.org/download/)| Open source, free animation, 3D modeling, etc. | 727 | | [Raw Therapee](https://rawtherapee.com/)| Cross-platform raw image processing program | 728 | | [Be Funky](https://www.befunky.com/features/graphic-designer/)| Online design program | 729 | | [Krita](https://krita.org/en/download/krita-desktop/)| Sketching and painting program designed for digital artists | 730 | | [Pencil Project](https://pencil.evolus.vn/)| GUI prototyping software | 731 | | [Inkscape](https://inkscape.org/)| Powerful free design tool | 732 | | [Adobe XD](https://www.adobe.com/products/xd.html)| Free design tool from Adobe | 733 | | [Shapes.so](https://shape.so/pricing)| Icons that can be used as code in your projects | 734 | | [Lunacy](https://icons8.com/lunacy) | Sketch for Windows | 735 | | [InVision Studio](https://www.invisionapp.com/studio)| Free screen designing tool from InVision | 736 | | [Darktable](https://www.darktable.org/)| Free & Open source photography workflow application and raw developer | 737 | | [Inpixio photo Editor](https://www.inpixio.com/free-photo-editor)| Free Photo Editor: For windows only | 738 | 739 |
740 | ↥ Back To Top 741 |
742 | 743 | ## Design Inspiration 744 | 745 | >Here are some websites to get inspiration for design and UI 746 | 747 | | Website                            | Description | 748 | | ----------------------- | ------------------ | 749 | | [Behance](https://www.behance.net/)| Design projects featured by different creators | 750 | | [Dribbble](https://dribbble.com/)| Design projects featured by different creators | 751 | | [Httpster](https://httpster.net/2020/apr/)| Showcases websites made by people from all over the world | 752 | | [Microcopy Inspirations](https://www.microcopyinspirations.com/)| Curated collection of UX writing examples, microcopy examples and copywriting examples | 753 | | [Inspofinds](https://inspofinds.com/)| Latest design work from designers and the design community | 754 | | [Design Notes](https://www.designnotes.co/)| Free online resource library for product designers | 755 | | [Land Book](https://land-book.com/)| Displays a large collection of websites to help find inspiration | 756 | | [Frontend Mentor](https://www.frontendmentor.io/)| Real-world UI Challenges using HTML, CSS and Javascript | 757 | | [Awwwards](https://www.awwwards.com/)| A website that rate and collects the best websites in the world in UI | 758 | | [Codrops](https://tympanus.net/codrops/)| A website that collects the best UI ideas and patterns and make tutorials of it| 759 | | [SaaS Landing Page](https://saaslandingpage.com/)| Discover the best landing page examples created by top-class SaaS companies | 760 | | [Pages.xyz](https://www.pages.xyz/)| Curate and discover the best designed web pages | 761 | | [UI Movement](https://uimovement.com/)| UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs | 762 | | [lapa ninja](https://www.lapa.ninja/)| Best landing page inspiration | 763 | | [Freefrontend](https://freefrontend.com/)| Free front end design from css html and javascript. latest work some design part | 764 | | [Webframe](https://webframe.xyz)| Discover and be inspired by beautiful webapp designs | 765 | | [Collect UI](http://collectui.com/)| Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily. | 766 | | [Graphic Burger](https://graphicburger.com/) | A site offering a free and pain icons, mock-ups, Ui-Kits, text effect and backgrounds. This site's resource are a mix of free and paid resources. Icons is on a mix of PNG, SVG, EPS and Sketch Format. Some resources are confusing as there are sponsored content in the middle of the free sets. | 767 | | [Really Good Emails](https://reallygoodemails.com/) | A site offering users a ton of company e-mails from customer service to marketing. | 768 | | [Free Design Resource](https://freedesignresources.net/) | A site offering fonts, mockups, templates graphics and ui kits. | 769 | | [Site Inspire](https://www.siteinspire.com/) |siteInspire is a showcase of the finest web and interactive design. | 770 | | [Web Design Inspiration](https://www.webdesign-inspiration.com/) | A site for web design inspiration, updated daily. | 771 | | [NavNav](https://navnav.co/) | Responsive navigation examples | 772 | 773 |
774 | ↥ Back To Top 775 |
776 | 777 | ## Image Compression 778 | 779 | >Websites that allow you to compress large images 780 | 781 | | Website                            | Description | 782 | | ----------------------- | ------------------ | 783 | | [TinyPNG](https://tinypng.com/)| Smart PNG and JPEG compression 784 | | [Optimizilla](https://imagecompressor.com/)| Online JPEG and PNG optimizer / compressor with settings and archive download 785 | | [Compressor.io](https://compressor.io/)| JPEG, PNG, GIF, SVG Compression | 786 | | [Squoosh.app](https://squoosh.app/)| Image compression from Google Chrome Labs | 787 | | [BulkResizePhotos](https://bulkresizephotos.com/)| Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) | 788 | | [iLoveIMG](https://www.iloveimg.com/)| The fastest free web app for easy image modification | 789 | | [SvgOMG](https://jakearchibald.github.io/svgomg/)| Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.| 790 | | [CompressJPEG](https://compressjpeg.com/)| Compress JPEG images with size even greater than 5MB | 791 | | [CompressNow](https://compressnow.com/)| JPEG, GIF, PNG Compression | 792 | | [Promo Image Resizer](https://compressnow.com/)| Free Image and Photo Resizer | 793 | | [Image Optimizer](http://www.imageoptimizer.net/)| Image Optimizer Free With Quality Options | 794 | | [SVGminify](https://www.svgminify.com/)| This tool removes superfluous information, thereby reducing the size of your SVG files | 795 | | [JPEG Optimizer](http://jpeg-optimizer.com/)| Free online tool for resizing and compressing digital photos and images for displaying on the web | 796 | 797 |
798 | ↥ Back To Top 799 |
800 | 801 | ## Others 802 | 803 | >Uncategorized Stuff 804 | 805 | | Website                            | Description | 806 | | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | 807 | | [everysize.kibalabs.com](https://everysize.kibalabs.com/) | Check your awesome responsive webpage looks great in every size | 808 | | [Devhints.io](https://devhints.io/) | This is a modest collection of cheatsheets on Internet | 809 | | [The Web Toolbox](https://thewebtoolbox.cc/)| A collection of handy, free-to-use tools for web developers, programmers and designers. | 810 | | [WebDevTrick](https://webdevtrick.com/)| A famous blog for many amazing HTML, CSS, JQuery designs. | 811 | | [css-tricks](https://css-tricks.com/)| Free CSS tricks and some unique ideas for beginners and advanced | 812 | | [Material Design Resizer](https://material.io/resources/resizer/)| An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet | 813 | | [Nodesign.dev](https://nodesign.dev) | A collection of tools for developers who have little to no artistic talent| 814 | | [A11ygator](https://a11ygator.chialab.io/)| A web tool to scan websites against WCAG rules | 815 | | [Commitizen](http://commitizen.github.io/cz-cli/)| Command line tool to formatted commit messages according to the standards | 816 | | [CleanCss](https://www.cleancss.com/)| Tool For Code Foramtter, Minifier, File Converter | 817 | | [Tiny helpers](https://tiny-helpers.dev/)| A collection of free single-purpose online tools for web developers | 818 | | [CSS Ribbon Generator](https://www.cssportal.com/css-ribbon-generator/)| This generator will assist in creating a pure CSS corner ribbon. | 819 | | [Can I Use](https://caniuse.com/) | Check cross-browser compatibility of frontend technologies. | 820 | | [kangax-js-compat-table](https://kangax.github.io/compat-table/es6/) | Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).| 821 | | [mydevice.io](https://www.mydevice.io/)| Most commonly used device resolutions including phones and tablets | 822 | | [Codepen](https://codepen.io/) | Build, test and discover frontend code. | 823 | | [Responsively](https://manojvivek.github.io/responsively-app/) | A tool for designers and frontend developers to design and debug their in all platforms with ease | 824 | | [html2pdf.js](https://ekoopmans.github.io/html2pdf.js/) | Client-side HTML-to-PDF rendering using pure JS. | 825 | | [CSS Reference](https://cssreference.io/) | A collection of all css properties and definitions in detail | 826 | 827 | 828 |
829 | ↥ Back To Top 830 |
831 | --------------------------------------------------------------------------------