contributing guidelines before submitting new resources.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 |
|---|---|
| SVG sine waves | Export perfect sine waves as SVG for your front-end projects |
| 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 |
| 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 |
| 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) |
| IRA Design | An open-source gradient illustrations collection by creative tim. |
| Transparent Textures | A collection of transparent textures background patterns. |
| icons8.com/illustrations | Vector illustrations to class up your project |
| Patternico | Seamless Pattern Maker |
| 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. |
| CSS Shadow Gradients | Generate CSS Gradients For Shadows. |
| Creatica | Generate unique beautiful and unique Backgrounds and patterns. |
| Boring Avatars | SVG random, cutely avatars collections |
| Html to Design | Convert any website into fully editable Figma designs |
| fffuel | collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds |
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 ? |
| 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 |
| Just Free Fonts | A hand-curated collection of freeware, open-source, and public domain fonts intended for commercial use |
| 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. |
| UrbanFonts | A collection of over 8000 free fonts and dingbats |
| Typespiration | Inspirational font combinations and color palettes |
| Fontsource | Self-host Open Source fonts in neatly bundled NPM packages. |
| FontBolt | Discover and generate your favorite fonts from pop culture. |
| Fontshare | Fontshare is a free fonts service from the Indian Type Foundry (ITF), making quality fonts accessible to all. |
Websites and resources that help with choices related to colors
| Website | Description |
|---|---|
| Colorlab | Create color palette, gradients, color scales, check contrast all in one place. |
| 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 |
| UI Colors | Tailwind CSS color palette generator |
| 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 | Powerful color tools including an eyedropper, color picker, and palette generator. |
| Color Designer | A gradient generetor from one color. |
| Duotone | Find beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and applying a duotone effect in seconds. |
| coolbackgrounds generator | Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites. |
| Color Shades Generator | We can quickly generate color shades of our favorite colors or any colors, to create templates or css components with multiple color shades and more useful tools available on same site |
| Huemint | Huemint uses machine learning to create unique color schemes for your brand, website or graphic |
| InclusiveColors palette creator | Create custom accessible Tailwind-style color palettes, where you can modify HSL curves across whole swatches, check WCAG/APCA contrast, then export to Tailwind/CSS/Figma/Adobe |
Resources for Icons including png, svg and more
| Website | Description |
|---|---|
| Circum Icons | Consistant open source icons as SVG for React, Vue and Svelte |
| UXWing | Well Optimized, Free icons for commercial use |
| Shapedfonts Iconclub | 8000+ free icons |
| Feather Icons | Beautiful, customizable open source icons |
| Tabler Icons | 3500+ highly customizable open source SVG icons with React, Preact, Vue, Svelte and SolidJS support |
| 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 |
| Emoji Guide | The collection of 3300 emojis with their HTML codes for easy use. |
| Unicorn Icons | 100+ customizable playful animated icons. Available in JSON and SVG format. |
| Sargam Icons | A collection of 275+ open-source icons available for Figma, SVGs, and React. |
| Icon buddy | A collection of 100K+ open-source SVG icons, fully customizable for designers and developers. |
| Round Icons | The world's biggest premium and free icon packs library of flat icons, line icons, filled outline, isometric and solid styles. |
| Vectopus | Top curated collective resources for elite designers. |
Resources for Logos
| Website | Description |
|---|---|
| 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 |
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 |
| Favicon Generator | Generate website's favicon assets. SVG, maskable, image minified supported. Pure frontend. No privacy risk. Fast. |
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 |
| React Icons | An Open Source and free Svg Icon Library, it is a collection of your favorite icon libraries like Font Awesome and Material Icons to provide you with a wide range of SVG icons to choose from. |
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 |
| ISO Republic | Get Thousands of Free High-Resolution Stock CC0 Photos |
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 |
| Free-Stock-Video | Free Footage Stock Videos |
Websites that offer free stock music and/or sound effects
| Website | Description |
|---|---|
| YouTube Studio Audio Library | Royalty-free audio library for downloadable music and sound effects. Cleared for YouTube monetization. |
| 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. |
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 . |
| BGjar | Free svg background generator for your websites, blogs and app. |
| 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. |
| Vector | Awesome website for all kinds of Moroccan vectors. |
| Heazy | Unique vector assets within seconds. |
| Mossaik | Free SVG generator with different tools, waves, tiles, blobs, and more. |
Create mockups of devices and other products
| Website | Description |
|---|---|
| MockCity | Bulk generate mockups from PSD templates by automatically placing images in SmartObjects. The visual editor allows you to change SmartObject parameters and see an updated mockup preview in realtime. |
| Smart Mockups | Create stunning product mockups (free & premium) |
| Media Modifier | beautiful design mockups service for your products (free & premium) |
| Shot Snap | Create beautiful device mockup images for your app or website design |
| Screely | Instantly turn your screenshot into a mockup |
| Screenshot.rocks | Create beautiful browser & mobile mockups in seconds |
| Screen Peak | Create a mockup from a URL |
| Mockup World | The biggest source of free photo-realistic Mockups online |
| Collab Shot | Real-time screen grabs and image sharing |
| Facebook Devices | Images and Sketch files of popular devices |
| Threed.io | Generate 3D mockups right in your browser. |
| Mockuphone | 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV |
| Device Shots | Create high-resolution device mockups for social media, for free |
| Clean Mock | Create stunning mockups using latest device frames like iPhone X & custom backgrounds that make your mobile or website design standout, right from your browser quickly & for free. |
| Mock.Video | Instantly create mockups by adding a device frame to your videos. |
| MockupBro | Create product mockups with online mockup generator! Just choose a mockup, upload your design and download your image without a watermark. |
| Animockup | Create animated mockups in the browser . |
| Pika | Instantly create browser mockups and beautiful images for marketing, blog post and more |
| Lunacy | Create mockups from scratch for free |
Websites that offer free beautiful website templates and themes of all types
| Website | Description |
|---|---|
| HTML5Up | Very modern, unique responsive HTML5/CSS3 themes |
| Templatemo | Minimal, resume, gallery themes and more |
| FreeHTML5 | Free & premium HTML5 and Bootstrap themes |
| StyleShout | Brilliantly crafted free website templates |
| Start Bootstrap | Bootstrap starter themes |
| HTML5xCSS3 | Collection of wonderful templates in different categories |
| ThemeWagon | Collection of HTML5 Bootstrap templates from different categories |
| Colorlib | Almost any category of theme you can think of |
| Free CSS | Huge collection of free templates |
| Hubspot | Templates, infographics, banners and much more |
| Mobirise | Great looking HTML5/CSS3 templates |
| Bootswatch | Free themes for Bootstrap |
| Onepagelove | One-page websites, templates and resources |
| Themes For App | Free Bootstrap themes and landing pages |
| BootstrapTaste | Premium & Free Bootstrap Templates |
| BootstrapMade | Elegant, clean and beautiful free templates using Bootstrap. |
| W3Layouts | W3Layouts: 3784+ Free Website Templates for 2020 |
| Tooplate | Tooplate: Free HTML Templates for everyone! |
| Cruip | Fully coded HTML templates to help you easily build your startup landing page without hassles. |
| UIdeck | Free Landing Page Templates and Bootstrap Themes |
| Splawr | Free web templates to kickstart your idea! |
| W3css_templates | Some responsive W3.CSS website templates for you to use. |
| All-Free-Download | Download free-website-templates |
| mashup-template | HTML5/CSS3 Free Templates |
| Sneat Bootstrap 5 HTML Admin Template | Open-source & Easy to us Bootstrap 5 HTML Admin Template with Elegant Design & Unique Layout. |
| HTMLrev | Free beautiful HTML5 templates and landing pages |
| Horizon UI | Trendiest open source Admin Template for React |
| KeenThemes | Free and Pro Html/Css3, Bootstrap5, Vue, React, Laravel templates |
| ScrewFast | Open-source Astro website template with sleek, customizable TailwindCSS components |
CSS/UI frameworks to help build great looking websites and applications
| Website | Description |
|---|---|
| Tailwind CSS | Low level, utility-first framework |
| Bootstrap | Popular UI framework with tons of components that use both CSS and JS |
| Materialize | A modern responsive front-end framework based on Material Design |
| Material Design Lite | Light framework based on Material Design. No JS dependency |
| Bulma | Modern CSS framework with no JS |
| Skeleton | Extremely light framework for basic UI elements |
| Uniform CSS | Fully configurable utility generator and CSS framework built entirely in Sass |
| Semantic UI | Empowers designers and developers by creating a shared vocabulary for UI |
| Fomantic UI | A community fork of Semantic-UI |
| Foundation | Mobile first framework with clean markup |
| Pure CSS | A set of small, responsive CSS modules |
| UIKit | Lightweight and modular front-end framework |
| Susy | Lightweight, grid-layout engine for Sass |
| Milligram.io | Minimalist CSS framework |
| Vanilla Framework | Simple, extensible CSS framework written in Sass |
| Spectre CSS | Lightweight, modern CSS framework |
| Picnic CSS | Lightweight and beautiful library |
| Wing | A beautiful CSS framework designed for minimalists |
| Chota | A micro (~3kb) CSS framework |
| Blueprint CSS | A lightweight layout library for building great responsive mobile first UIs that work everywhere |
| W3.CSS | 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 |
| 98.css | A design system for building faithful recreations of old UIs |
| NES CSS | NES-style CSS Framework |
| Shoelace.css | Lightweight, forward-thinking CSS library built with future CSS syntax |
| MVP.css | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done |
| Blaze.css | Open source modular CSS toolkit providing great structure for building websites quickly |
| Turret CSS | Turret CSS is a styles framework for development of responsive websites. |
| Cutestrap | A strong, independent CSS Framework. |
| XP.css | XP.css is an extension of 98.css. A CSS library for building interfaces that look like old UIs. |
| Framework7 | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. |
| Hint.css | A pure CSS tooltip library for your lovely websites. |
| imagehover.io | Pure CSS Image Hover Effect Library |
| mini.css | A minimal, responsive, style-agnostic CSS framework |
| Tachyons | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. |
| Material Bootstrap | Material Design with Bootstrap |
| Ivory | A modern CSS framework for developing powerful web interfaces faster and easier |
| Halfmoon UI | A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. |
| Metro 4 | Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. |
| css-doodle | A web component for drawing patterns with CSS |
| latex.css | Make your website look like a LaTeX document |
| Paper CSS | Front-end printing solution |
| Windi CSS | Next generation compiler for Tailwind CSS |
| Cirrus CSS | A component and utility centric SCSS framework designed for rapid prototyping. |
| Gutenberg | Modern framework to print the web correctly. |
| lit | World's smallest responsive fire css framework (395 bytes). |
| Arwes | Arwes is a web framework to build user interfaces based on futuristic science fiction designs, animations, and sound effects. |
| Bojler | Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients. |
| Tacit | Primitive CSS Framework for dummies, without classes. |
| Terminal CSS | A modern and minimal CSS framework for terminal lovers. |
| Sakura | A minimal classless css framework / theme. |
| PSone | PS1 style CSS Framework, inspired by NES.css. |
| Marx | Marx is the classless CSS reset to be used in any projects (namely small ones). |
| Tufte | Style your webpage like Edward Tufte’s handouts. |
| Axentix | Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. |
| Raster Simple Grid System | Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS. |
| flowrift | Flowrift is a library made of beautifully designed Tailwind CSS UI blocks. |
| twind | The smallest, fastest, most feature complete tailwind-in-js solution in existence |
| Pico.css | Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. |
| clay.css | Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components. |
| BeerCSS | Build Material Design interfaces in record time, without stress for devs ?. The first CSS framework that implements Material Design 3. |
| UnoCSS | UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets. |
| Neptune CSS | Neptune CSS is a lightweight CSS framework. Use it to develop your websites faster. |
| StyleX | StyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web apps. |
| Orbit | Orbit is the first CSS framework for creating simple or complex radial interfaces. |
CSS methodologies to help write modular, reusable and scalable code
| Website | Description |
|---|---|
| OOCSS | OOCSS concepts help us write components that are flexible, modular and interchangeable. |
| Atomic CSS | Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. |
| BEM | Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. |
| SMACSS | SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. |
| CUBE | CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. |
CSS animations to build awesome animations for websites and applications
| Website | Description |
|---|---|
| Animate.css | Just-add-water CSS animations |
| Bounce.js | Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations |
| Anime.js | 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 |
| Magic Animations | Animations has been one of the most impressive animation libraries available |
| Zdog | Round, flat, designer-friendly pseudo-3D engine for canvas & SVG |
| CSShake | CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page |
| Hover.css | Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website |
| AniJS | AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure |
| Animista | CSS Animations On Demand |
| 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 |
| Sequence.js | Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications |
| Infinite | These animations, like rotations and pulses, that are specifically designed to run and repeat forever |
| OBNOXIOUS.CSS | Animations for the strong of heart, and weak of mind |
| MOTION UI | A Sass library for creating flexible CSS transitions and animations |
| Keyframes.app | A graphical user interface for generating custom CSS keyframe animations |
| thoughtbot | CSS Transitions and Transformations for Beginners |
| SVG Artista | A useful tool to animate stroke and fill properties in SVG images with plain CSS code |
| AnimXYZ | AnimXYZ helps you create, customize, and compose animations for your website. Built for Vue, React, SCSS, and CSS |
| Whirl | CSS loading animations with minimal effort! |
| Hamburgers | Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger. |
| CSS Loaders & Spinners | This is a library having a collection of different types of CSS loaders, spinners |
| Motion One | A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. |
| pocoloco | Generate dynamic backgrounds for your website |
| AniX | Super easy and lightweight css animation library. |
| AOS | Animate On Scroll Library. |
| Animatopy | Just-add-water CSS animations snippets |
javascript animations libraries to build awesome animations for websites and applications
| Website | Description |
|---|---|
| Greensock | A JavaScript library for building high-performance animations that work in every major browser |
| Velocity.js | Velocity is a lightweight animation engine with the same API as jQuery's $.animate() |
| lax.js | Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! |
| Rellax.js | A buttery smooth, super lightweight, vanilla javascript parallax library |
| three.js | An easy to use, lightweight, 3D library with a default WebGL renderer. |
| Atropos | Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. |
| wow.js | Reveal Animations When You Scroll. |
| chocolat.js | Free lightbox plugin. |
| Animate On Scroll | Animate on scroll library to reveal animations when You scroll. |
| Tilt.js | A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. |
| Roughnotation | Rough Notation is a small JavaScript library to create and animate annotations on a web page |
| tsParticles | A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js |
| Particles.js | A lightweight JavaScript library for creating particles |
| mo.js | The motion graphics toolbelt for the web |
| Lightbox2 | A small JS library to overlay images on top of the current page. |
| Slick | Fully responsive carousel |
| barba.js | Create fluid and smooth transitions between your website’s pages. |
| Locomotive Scroll | A simple scroll library that provides detection of elements in viewport & smooth scrolling with parallax. |
| Owl carousel | Free responsive jQuery carousel |
| Swiperjs | Free, Open Source, Modern Slider without jQuery. Available for Vanilla JS and all modern frameworks like React, Vue, Angular etc. |
| Splide | Free, pure JS library for carousels and sliders |
| Simple Parallax | The easiest way to get a parallax effect with javascript |
| KUTE.js | KUTE.js is a JavaScript animation engine for modern browsers. |
| Granim.js | Create fluid and interactive gradient animations with this small javascript library. |
| Popmotion | Simple animation libraries for delightful user interfaces. |
| Vivus | Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. |
| Typed.js | A JavaScript Typing Animation Library. |
| Progress Bar.js | Responsive and slick progress bars with animated SVG paths. |
| Midnight.js | Midnight.js lets you switch fixed headers on the fly |
| Tingle.js | Tingle is a simple modal plugin written in pure JavaScript |
| Theatre.js | Theatre.js is a JavaScript animation library with a GUI. It animates the DOM, WebGL, and any other JavaScript variable. |
| splidejs | Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. |
| nice-waves | Beautiful animated waves |
| Vanta.js | Animated website backgrounds in a few lines of code. |
| Splitting.js | Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more! |
Libraries that help developers visualize data into charts
