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 |
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 |
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 |
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. |
Metro 4 | Create your site quickly and effectively with Metro 4. impressive components library built on html, css, javascript. |
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 |
Lightbox2 | A small JS library to overlay images on top of the current page. |
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 |
CSS Grid Generator | An open-source project that allow users to quickly create dynamic layout based on CSS Grid. |
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 | Full page screen capture and screen recorder - 2 in 1. Share screencast video instantly |
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. |
Kontrast - WCAG Contrast Checker | Quickly check and adjust contrast in realtime in your browser to meet WCAG 2.1 requirements |
Web Developer | Adds a toolbar button with various web developer tools. |
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. |