Please read contributing guidelines before submitting new resources.
- UI Graphics
- Fonts
- Colors
- Icons
- Favicons
- Icon Fonts
- Stock Photos
- Stock Videos
- Stock Music & Sound Effects
- Vectors & Clipart
- Product & Image Mockups
- HTML & CSS Templates
- CSS Frameworks
- CSS Animations
- Javascript Animations
- UI Components & Kits
- React UI Libraries
- Vue UI Libraries
- Angular UI Libraries
- Svelte UI Libraries
- Design Systems & Style Guides
- Online Design Tools
- Downloadable Design Software
- Design Inspiration
- Image Compression
- Chrome Extensions
- Others
Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI
| Website | Description |
|---|---|
| UI Design Daily | Awesome UI Components of all types |
| 100 Daily UI | Free Figma library of products, elements, and screens |
| Sketch App Sources | Sketch UIs, wireframes, icons and much more |
| Humaaans | Cool illustrations of people with the ability to mix and match |
| Paaatterns | Free collection of beautiful patterns for all vector formats |
| thepatternlibrary | Free beautiful background patterns |
| 404 illustration | free illustrations for 404 pages |
| Drawkit.io | Illustrations for designers and startups |
| Undraw.co | Open-source illustrations for any idea you can imagine and create |
| Illustration.co | Open-source illustrations kit |
| Manypixels.co | Monochromatic, Isometric high quality illustrations |
| Open Peeps | Hand drawn illustration library |
| UI Space | Thousands of great UI freebies |
| Animations.co | Beautiful, customizable animated GIF icons |
| Uplabs | High-quality design resources (Free & Premium) |
| InvisionApp | Library of free, high-quality UI kits, icon packs, and mockups |
| Open Doodles | A Free Set of Sketchy Illustrations |
| Avataaars | Free sketch library of avatars illustrations by Pablo Stanley |
| FreebieSketch | Free Sketch designs, wireframes, illustrations, and more. |
| Blush | Free customizable illustrations with Figma Plugin |
| Hero Patterns | A collection of repeatable SVG background patterns |
| IRA Design | An open-source gradient illustrations collection by creative tim. |
| Storytale.io | Subset of Storytale free quality illustrations |
| icons8.com/illustrations | Free vector illustrations to class up your project |
| Patternico | Seamless Pattern Maker |
| Freellustrations | Free Background Images for awesome landing Pages |
| Pixeltrue Illustrations | Free Animated Illustrations |
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 |
| What Font | Tool for finding the fonts of a website without having to search in the devtools |
| 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 |
| FontSpark | Discover Better Fonts |
| 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. Usefull if you want a smaller library loaded |
| Google Webfonts Helper | A Hassle-Free Way to Self-Host Google Fonts |
Websites and resources that help with choices related to colors
| Website | Description |
|---|---|
| Colormind.io | Color palette generator |
| ColorCurves.app | Color palette generator that uses curves to generate color palettes |
| Coolors | Create the perfect palette or get inspired by thousands of beautiful color schemes |
| HTML Color Codes | Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names |
| Colors & Fonts | A curated library of colors, fonts and resources |
| Palette List | Pick 2 colors you like and the tool generates thousands of palettes for you. |
| Google Material Color Tool | Official Google Material Color Palette Tool |
| Material Palette | Free to pick palettes, icons and colors for Material Design |
| ColorSpace | Generate nice color palettes from one color |
| FlatUIColors | Beautiful set of color palettes in various flavours |
| Adobe Color | Create color palettes, extract gradients from images, etc |
| Colorsinspo | All-in-one resource for finding everything about colors |
| 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 custome 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 |
| 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 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 |
Resources for Icons including png, svg and more
| Website | Description |
|---|---|
| UXWing | Well Optimized, Free icons for commercial use |
| Shapedfonts Iconclub | 8000+ free icons |
| Feather Icons | Beautiful, customizable open source icons |
| Tabler Icons | 470+ highly customizable open source SVG icons |
| Simple Icons | 1307 Free SVG icons for popular brands |
| Instant Logo Search | thousands of free brands logos ( SVG - PNG ) |
| Linear Icons | 1000+ Ultra crisp vector icons |
| Entypo | 411 carefully crafted premium pictograms by Daniel Bruce |
| 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 |
| 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 |
| 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 |
| IconBros | 7843+ free icons grouped in 182 collections |
| LogoHub | Generate and download your logo for free in PNG and SVG format |
| Material Design Icons | A 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. |
| Zondicons | A set of free premium SVG icons for you to use on your digital products. you can download the icons into your desktop |
| Entypo | 411 carefully crafted premium pictograms |
| Cryptoicons | A set of 430 crypto and fiat currency icons. Completely free. |
| Ikonate | Fully customisable & accessible vector icons |
| appicon | Quickly generate app icons in diffrent 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. |
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 |
| 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 |
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 webfont 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 |
| Fontastic.me | Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg |
| Fontello | 200+ web icons where you can customize the names or codes of icons. |
| Linea | Linea: Featuring 750+ Free Icons |
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 res 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 |
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 Cinemagraphs Created With VIMAGE App |
Websites that offer free stock music and/or sound effects
| Website | Description |
|---|---|
| Free Stock Music | Royalty free stock music for YouTube videos, podcasts, etc |
| Bensound | Download Royalty Free Music for free and use it in your project |
| Mixkit | Free music for your projects |
| Freesound | Free stock music and sounds |
| Free Music Archive | Collaborative database of creative-commons licensed sound for musicians and sound lovers |
| Musopen | An online copyright free classical music library |
| 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 |
| Retro Vectors | Vintage vectors and graphics |
| Freeble | Vectors, patterns, mockups and more |
| Lukaszadam | Free Vector atrworks |
| 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 |
| World Vector Logo | Download vector logos of brands you love |
| 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 |
Create mockups of devices and other products
| Website | Description |
|---|---|
| Smart Mockups | Create stunning product mockups (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 |
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 |
| Templated.co | Tons of minimalistic HTML5/CSS3 themes |
| FreeHTML5 | Free & premium HTML5 and Bootstrap themes |
| StyleShout | Brilliantly crafted free website templates |
| Start Bootstrap | Bootstrap starter themes |
| Zerotheme | HTML5, Bootstrap, Prestashop templates |
| HTML5xCSS3 | Collection of wonderful templates in 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. |
| Shade | Get High Converting Landing Pages For Free! |
| UIdeck | Free Landing Page Templates and Bootstrap Themes |
| Splawr | Free web templates to kickstart your idea! |
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 |
| 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. |
| Shorthand | Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css |
| XP.css | XP.css is an extention 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 | 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. |
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 |
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 an 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. |
| 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 |
Not quite "frameworks", but tools for creating user interfaces with components or UI kits
| Website | Description |
|---|---|
| TagFold | Useful Bootstrap 4, HTML5, CSS3 Code Snippets to Build Web Layouts |
| UILang | A minimal, ui-focused programming language for web designers |
| Medialoot CSS Components | Calendars, price grids and other UI components |
| Froala Design Blocks | Over 170 responsive design blocks ready to be used in your web or mobile apps |
| Mui Treasury | An open-source project that provides a collection of ready-to-use components based on Material-UI. |
| Material Design For Bootstrap | Open source toolkit for building material design with Bootstrap |
| Photonkit | Desktop UI library for Electron |
| Flat UI | Minimal free user interface kit |
| Shards | A free and modern UI toolkit for web makers based on Bootstrap |
| Creative Tim | All types of UI libraries and kits including JS frameworks like React |
| Brumm Shadow Maker | An online tool to make css shadows |
| AdminLTE | Best open source admin dashboard & control panel theme |
| SpinKit | Simple CSS Spinners |
| Epic Spinners | CSS spinners collection with Vue.js integration. |
| Loading.io | Online service provider for creating simple animations, spinners, progress bar and more |
| Moving Letters | Animated Text with JavaScript and anime.js |
| CSS Layout | A collection of popular web layouts and patterns in pure CSS |
| Codyhouse | Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components |
| Tailwind Starter Kit | Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source |
| Tailwindtoolbox | Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. |
| tailwindcomponents | A free repository for community components using TailwindCSS |
| sweetalert | SweetAlert makes popup messages easy and pretty. |
| sweetalert2 | A beautiful,responsive,customizable,accessible replacement for javascript's popup boxes |
| tailblocks | Open source ready-to-use Tailwind CSS components. |
| Soft Components | A set of framework-agnostic web components based on neumorphic design. |
| Fast | An interface system that can be used with modern Web Frameworks such as React, Vue and Angular. |
| LottieFiles | Interactive animations in many formats like json,gif and mp4, libraries and plugins for Web & Mobile . |
UI and component libraries for the React JavaScript framework
| Website | Description |
|---|---|
| Material UI | React components for faster and easier web development, based on Material Design |
| Chakra UI | Build accessible React apps & websites with speed. Openchakra |
| React Bootstrap | Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript |
| ui-playbook | The documented collection of UI components |
| ReactStrap | Another Bootstrap UI library for React |
| React Admin | A frontend Framework for building admin applications. Supports API's out of the box |
| BlueprintJS | React-based UI toolkit for the web |
| React Semantic UI | UI components based off of the Semantic UI framework |
| Shards React | React UI kit featuring a modern design system with dozens of custom components |
| React Virtualized | UI set for data. Includes tables, lists, sorting, etc. |
| React Toolbox | Material design UI library for React |
| Elastic UI | Distributes UI React components and static assets for use in building web layouts |
| React Desktop | Desktop styled components in React. Includes MacOS and Windows based components |
| Theme UI | Build consistent, themeable React apps based on constraint-based design principles |
| Onsen React | Distributes Components for hybrid mobile apps with React and Onsen UI |
| Evergreen | Design system for React |
| Rebass | React primitive UI components built with styled system |
| Grommet | mobile first UI component library |
| Rimble | React design kit, library and guides |
| Landing Page Template | Open source landing page template for react |
| Elemental UI | A UI Toolkit for React.js Websites and Apps |
| Ant Design | Open source design React ui library. |
| Bumbag | Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications. |
| PRIMEREACT | The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| Primer Components | Primer Components are React components which implement GitHub's Primer Design System |
| Orbit | Design system and React UI components for travel projects. |
| Base Web | Base Web provides a robust suite of components out of the box |
| Backpack UI | Backpack is the Lonely Planet toolset that we use to build front end apps. |
| Reaviz | Data visualization library for React based on D3 |
| React Suite | A suite of React components, sensible UI design, and a friendly development experience. |
| React Spring | Spring-physics based animation library for React applications. |
| Recharts | A composable charting library built on React components. |
| Vercel UI | Modern and minimalist React UI library |
| Framer Motion | A React library to power production-ready animations. |
| React Spectrum | A React implementation of Spectrum, Adobe’s design system. |
| React tsParticles | A lightweight React component for creating particles |
| particles-bg | A React particles animation background component |
UI and component libraries for the Vue JavaScript framework
| Website | Description |
|---|---|
| Vuetify | Material design component framework |
| Bootstrap Vue | Use Bootstrap components with Vue |
| Buefy | Lightweight UI components based on Bulma |
| Semantic UI Vue | Semantic UI Vue is the Vue integration for Semantic UI |
| Quasar | High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions |
| Element | Desktop UI library for Vue |
| Fish UI | Vue UI toolkit for the web |
| Keen UI | VueUI library with a simple API, inspired by Google's Material Design |
| Onsen Vue | Distributes Components for hybrid mobile apps with Vue and Onsen UI |
| Vuejsexamples | A nice collection of useful vuejs UI components |
| Inkline | Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications |
| Vuesax | Unique and reusable UI components |
| Antdv | UI library for Vue based on Ant Design |
| Shards Vue | A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components |
| Prime Vue | Powerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces. |
| Chakra UI Vue | Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed. |
| View UI | Dozens of useful and beautiful Vue components made for people with all skill levels with extensive documentation. |
| Particles.vue | A lightweight Vue component for creating particles |
UI and component libraries for the Angular JavaScript framework
| Website | Description |
|---|---|
| Material Angular | UI library for Angular based on Material design |
| NG Bootstrap | UI library for Angular based on the Bootstrap framework |
| PrimeNG | Powerful UI component library for Angular |
| Onsen Angular | Hybrid mobile and PWA UI library for Angular and Onsen UI |
| NG Lightning | Native Angular components & directives for Lightning Design System |
| NG Semantic | UI library for Angular based on Semantic UI |
| Nebular | Customizable UI Kit, Auth & Security for Angular |
| Alyle UI | Minimal components set for Angular |
| NGX Bootstrap | Another UI library for Angular based on the Bootstrap framework |
| NG Zorro | UI library for Angular based on Ant Design |
| Pagination for datatables | npm library for pagination |
| Multi select dropdown | for multi select dropdowm in forms |
| NG Particles | A lightweight Angular component for creating particles |
UI and component libraries for the Svelte Javascript compiler
| Website | Description |
|---|---|
| Svelte Material UI | UI library for Svelte based on Material Design |
| SvelteStrap | UI library for Svelte based on the Bootstrap framework |
| Svelte Flat UI | UI library for Svelte based on Flat Design |
| Svelte Particles | A lightweight Svelte component for creating particles |
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
| Website | Description |
|---|---|
| Material Design | Google's Material Design |
| Ant Design | Design system for enterprise-level products |
| Apple Design Resources | Guides and templates for using Apple design and UI |
| Primer | Design, build, and create with GitHub’s design system |
| Alta UI | Oracle's design system and toolkit |
| Pulse | Design system, guides and React component library |
| Bolt | Robust Twig and web component powered UI components |
| Clarity Design System | UX guidelines, HTML/CSS framework, and Angular components |
| AtlasKit | Atlassian's official UI library, built according to the Atlassian Design Guidelines |
| Audi Design Resources | Audi UI design system and toolkit |
| Carbon Design Systems | Carbon is IBM’s open-source design system for products and experiences |
| Yelp Style Guide | Yelp style guide, components and toolkit |
| Comet | Scalable design system of visual language, components, and design assets |
| ETrade Design System | Guides and toolkits that blend finance with simplicity and ease of use |
| Fundamental Library | Open source and community driven project for consistent user interfaces |
| Infor Design | Guidelines and resources to create meaningful experiences for Infor’s products |
| Lexicon | An experience language for crafting beautiful UI |
| Mailchimp UI/UX | Style guide and components from Mailchimp |
| Marvel Style Guide | Set of design principles and components |
| Microsoft Fluent UI | Collection of UX frameworks from Microsoft |
| Pluralsight Design System | Design guide with components for designing with Pluralsight |
| Polaris | Design system that creates great experiences for all of Shopify’s merchants |
| Mozilla Protocol | Protocol is a design system for Mozilla and Firefox websites |
| SendGrid Style Guide | UI library for developing consistent UI/UX at SendGrid |
| VTEX Styleguide | Reusable patterns, components and assets related to product design in VTEX |
| Rizzo | Style guide with UI components, JS components, widgets, etc |
| Atomize | UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| StyleGuides.io | A directory of 500+ styleguides |
| Done Design System | Open source design system, guides & components |
| Skoda Brand System | Design guideline for developing applications under the Skoda brand |
| Spectrum | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. |
| Asphalt | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. |
| Laws of UX | A collection of the key maxims that designers must consider when building user interfaces. |
All kinds of online tools for design, from photo editors to wireframing, and more
| Website | Description |
|---|---|
| Figma | Online graphic design tool (Free & paid options) |
| Vectr | Free vector graphics software |
| Taler | Create social media banner designs in minutes from hundreds of customizable templates |
| Canva | Create beautiful designs (Free & Paid) |
| Get Waves | A free SVG wave generator to make unique SVG waves for web design |
| Clippy | Easy CSS clip-path maker |
| Fancy Border Radius | Eight values specifying border-radius in CSS ( border-radius generator ) |
| Wireframe.cc | Wireframing tool (free & paid) |
| Fotor | Photo editor and design maker |
| Pixlr | Online photo editor |
| Animoto Video Maker | Make videos online |
| RemoveBG | Remove image backgrounds |
| Photo Creator | Create your own photos instead of searching for stock |
| Visme | Create presentations, infographics and more |
| Infogram | Create infograms |
| ChartGo | Create charts and graphs online |
| Cartoon Photo | Turn photos into cartoons |
| Logo Maker | Create custom logos |
| Whimsical | Wireframes, diagrams and more (4 free) |
| Whiteboard | Online drawing tool |
| Octopus | Sitemap builder |
| CTA Button Maker | Create call to action buttons |
| Blobmaker | Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes |
| Personas | A playful avatar generator for the modern age |
| SoftUI | A Soft UI (neumorphism) CSS generator |
| Photopea | A Online Photoshop editor |
| Excalidraw | Virtual whiteboard for sketching hand-drawn like diagrams |
| Diagrams | Diagram software and Flowchart maker |
| MapInSeconds | Simple way to visualize your data with a map |
| Grid Malven | A css grid cheatsheet to reference when creating a css grid |
| Flex Malven | A flexbox grid cheatsheet to reference when working with flexbox |
| Smart Upscaler | Upscale images by 2-4x resolution |
| GetAvataaars | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
| Big Heads | Easily generate avatars for your projects with Big Heads by Robert Broersma. |
| Webflow | Break the code barrier, Build better business websites, faster. Without coding. |
| Trace | Instantly remove the background from your photos |
| Neumorphism.io | Generate Soft-UI CSS shadow code |
| DB Designer | Design your database for free online |
| Ui Bakery | Create full-fledged web apps visually |
| Faux | Turn real code into faux code |
| Rive | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform. |
| Unscreen | Remove Video Background 100% Automatically and Free |
| Kodeshot | Convert your source code into nice pictures for your articles, tweets, messages, posts... |
| Wix | Create a Website You’re Proud Of |
| GTmetrix | Website Speed and Performance Optimization |
| Framer | Is prototyping tool for teams |
| Draw.io | Free online diagram editor tool |
Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
| Website | Description |
|---|---|
| Gimp | Free & open source image editor similar to Photoshop |
| Gravit Designer | Free full-featured vector graphic design app that works on ALL platforms |
| Blender | Open source, free animation, 3D modeling, etc. |
| Raw Therapee | Cross-platform raw image processing program |
| Be Funky | Online design program |
| Krita | Sketching and painting program designed for digital artists |
| Pencil Project | GUI prototyping software |
| Inkscape | Powerful free design tool |
| Adobe XD | Free design tool from Adobe |
| Shapes.so | Icons that can be used as code in your projects |
| Lunacy | Sketch for Windows |
| InVision Studio | Free screen designing tool from InVision |
| Darktable | Free & Open source photography workflow application and raw developer |
| Inpixio photo Editor | Free Photo Editor: For windows only |
| Colorpicker | Open Source colors software: Retrieve, manipulate and store your colors easely! |
Here are some websites to get inspiration for design and UI
| Website | Description |
|---|---|
| Behance | Design projects featured by different creators |
| Dribbble | Design projects featured by different creators |
| Httpster | Showcases websites made by people from all over the world |
| Microcopy Inspirations | Curated collection of UX writing examples, microcopy examples and copywriting examples |
| Inspofinds | Latest design work from designers and the design community |
| Design Notes | Free online resource library for product designers |
| Land Book | Displays a large collection of websites to help find inspiration |
| Frontend Mentor | Real-world UI Challenges using HTML, CSS and Javascript |
| Awwwards | A website that rate and collects the best websites in the world in UI |
| Codrops | A website that collects the best UI ideas and patterns and make tutorials of it |
| SaaS Landing Page | Discover the best landing page examples created by top-class SaaS companies |
| Pages.xyz | Curate and discover the best designed web pages |
| UI Movement | UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs |
| lapa ninja | Best landing page inspiration |
| Freefrontend | Free front end design from css html and javascript. latest work some design part |
| Webframe | Discover and be inspired by beautiful webapp designs |
| Collect UI | Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily. |
| Graphic Burger | 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. |
| Really Good Emails | A site offering users a ton of company e-mails from customer service to marketing. |
| Free Design Resource | A site offering fonts, mockups, templates graphics and ui kits. |
| Site Inspire | siteInspire is a showcase of the finest web and interactive design. |
| Web Design Inspiration | A site for web design inspiration, updated daily. |
| NavNav | Responsive navigation examples |
| Calltoidea | Collection of different web Components for inspiration. |
| MediaQueri.es | A collection of inspirational websites using media queries and responsive web design |
| Mulzli Search | Search engine for design inspiration |
| DeviantArt | Access to 370 million pieces of art for inspiration. |
Websites that allow you to compress large images
| Website | Description |
|---|---|
| TinyPNG | Smart PNG and JPEG compression |
| Optimizilla | Online JPEG and PNG optimizer / compressor with settings and archive download |
| Compressor.io | JPEG, PNG, GIF, SVG Compression |
| Squoosh.app | Image compression from Google Chrome Labs |
| BulkResizePhotos | Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) |
| iLoveIMG | The fastest free web app for easy image modification |
| SvgOMG | Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it. |
| CompressJPEG | Compress JPEG images with size even greater than 5MB |
| CompressNow | JPEG, GIF, PNG Compression |
| Promo Image Resizer | Free Image and Photo Resizer |
| Image Optimizer | Image Optimizer Free With Quality Options |
| SVGminify | This tool removes superfluous information, thereby reducing the size of your SVG files |
| JPEG Optimizer | Free online tool for resizing and compressing digital photos and images for displaying on the web |
| Resizing.app | Resize Your Images Online |
| EZGif | Animated GIF maker and Image editor including Image optimization and supports WebP conversion |
| OnlinePngtools | Resize png for without losing transparent background. |
Useful Chrome extensions for Designers and Web-Developers.
| Website | Description |
|---|---|
| WhatFont | The easiest way to identify fonts on web pages. |
| WhatRuns | Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it. |
| Web Developer | Adds a toolbar button with various web developer tools. |
| Awesome Screenshot & Screen Recorder | The easiest way to identify fonts on web pages. |
| JSONView | Validate and view JSON documents. |
| JSON Lite | Browser extension for viewing JSON files. |
| Window Resizer | Resize the browser window to emulate various screen resolutions. |
| Responsive Viewer | Show multiple screens once, Responsive design tester |
| BrowserStack | Instantly test your webpage on any desktop or mobile browser. |
| VisBug | Open source web design debug tool built with JavaScript |
| Keyframes | In-browser CSS Animation creator. |
Uncategorized Stuff
| Website | Description |
|---|---|
| everysize.kibalabs.com | Check your awesome responsive webpage looks great in every size |
| Devhints.io | This is a modest collection of cheatsheets on Internet |
| The Web Toolbox | A collection of handy, free-to-use tools for web developers, programmers and designers. |
| WebDevTrick | A famous blog for many amazing HTML, CSS, JQuery designs. |
| css-tricks | Free CSS tricks and some unique ideas for beginners and advanced |
| Material Design Resizer | An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet |
| Nodesign.dev | A collection of tools for developers who have little to no artistic talent |
| A11ygator | A web tool to scan websites against WCAG rules |
| Commitizen | Command line tool to formatted commit messages according to the standards |
| CleanCss | Tool For Code Foramtter, Minifier, File Converter |
| Tiny helpers | A collection of free single-purpose online tools for web developers |
| CSS Ribbon Generator | This generator will assist in creating a pure CSS corner ribbon. |
| Can I Use | Check cross-browser compatibility of frontend technologies. |
| kangax-js-compat-table | Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile). |
| mydevice.io | Most commonly used device resolutions including phones and tablets |
| Codepen | Build, test and discover frontend code. |
| Responsively | A tool for designers and frontend developers to design and debug their in all platforms with ease |
| html2pdf.js | Client-side HTML-to-PDF rendering using pure JS. |
| CSS Reference | A collection of all css properties and definitions in detail |
| Critical Path CSS Generator | Generate critical css for your web pages |
| SVG Gobbler | Browser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG. |
| shortcode.dev | A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more. |
| PlayCode | Javascript playground. |
| All The Tags | All HTML tags briefly explained. |