Massive Design Resources for Developers Free Download

header_image

Table of Contents

  • 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
  • Others

UI Graphics

Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI

WebsiteDescription
UI Design Daily 134Awesome UI Components of all types
100 Daily UI 52Free Figma library of products, elements, and screens
Sketch App Sources 31Sketch UIs, wireframes, icons and much more
Humaaans 43Cool illustrations of people with the ability to mix and match
Paaatterns 31Free collection of beautiful patterns for all vector formats
thepatternlibrary 31Free beautiful background patterns
404 illustration 33free illustrations for 404 pages
Drawkit.io 28Illustrations for designers and startups
Undraw.co 15Open-source illustrations for any idea you can imagine and create
Illustration.co 33Open-source illustrations kit
Manypixels.co 16Monochromatic, Isometric high quality illustrations
Opendoodles 27Free sketchy illustrations
Open Peeps 12Hand drawn illustration library
UI Space 28Thousands of great UI freebies
Animations.co 35Beautiful, customizable animated GIF icons
Uplabs 19High-quality design resources (Free & Premium)
InvisionApp 13Library of free, high-quality UI kits, icon packs, and mockups
Open Doodles 27A Free Set of Sketchy Illustrations
Avataaars 13Free sketch library of avatars illustrations by Pablo Stanley
FreebieSketch 21Free Sketch designs, wireframes, illustrations, and more.
Blush 11Free customizable illustrations with Figma Plugin
Hero Patterns 29A collection of repeatable SVG background patterns

↥ Back To Top 18

Fonts

Websites that offer free fonts as well as font based tools

WebsiteDescription
Google Fonts 7Library of around 1000 free licensed font families
DaFont 3Archive of freely downloadable fonts
Use & Modify 4Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free Fonts 3I think the name speaks for itself :smirk:
Font Squirrel 3Font Squirrel scours the internet for high quality, legitimately free fonts
Font Fabric 1A digital type foundry crafting retail fonts and custom typography for various brands
What Font 1Tool for finding the fonts of a website without having to search in the devtools
Tiff 2A type diff tool that visually contrasts the differences between two fonts
Font Flame 4Tool for pairing fonts to see how they look together
TypeKit Practice 2Learn about typography practices
Fontjoy 1Generate font pairing in one click
Golden Ratio 2Golden Ratio Typography Calculator
FontSpark 3Discover Better Fonts
FontPair 2Helps you pair Google Fonts together
Font Space 1A designer-centered free font website that has quick customizable previews
Abstract Fonts 4Fonts free for personal and commercial use
Free Typography 5A list of high quality fonts
Leon Sans 2A geometric sans-serif typeface made with code
Lexend 1A variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms 1Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin 1San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper 1Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
Fonts Arena 2Free curated fonts
Befonts 4High quality fonts for free
Arabic fonts 2Arabic fonts for free
FontDrop 1Simple and easy way to view the contents of font files

↥ Back To Top 18

Colors

Websites and resources that help with choices related to colors

WebsiteDescription
Colormind.io 22Color palette generator
ColorCurves.app 6Color palette generator that uses curves to generate color palettes
Coolors 5Create the perfect palette or get inspired by thousands of beautiful color schemes
Colors & Fonts 4A curated library of colors, fonts and resources
Palette List 5Pick 2 colors you like and the tool generates thousands of palettes for you.
Google Material Color Tool 9Official Google Material Color Palette Tool
Material Palette 4Free to pick palettes, icons and colors for Material Design
ColorSpace 2Generate nice color palettes from one color
FlatUIColors 5Beautiful set of color palettes in various flavours
Adobe Color 3Create color palettes, extract gradients from images, etc
Colorsinspo 2All-in-one resource for finding everything about colors
Happyhues 2Happy 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 6Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt 1A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt 5A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients 8A free website to find good css gradients
ColorBox 1A free website to produce color set
CSS gradient 6A free website to make custome gradient and some examples of gradient
gradienta 2A pure css and jpg gradients
UI Gradients 3UI gradients color generator
Palette Generator 2Generate new color palette with every spacebar press
Material Palettes 11000+ Material Design palettes
Grabient 2Gradient Selector
ShadeSwash 2Quickly generate shades of any color
BrandColors 2The biggest collection of official brand color codes
BRAND PALETTES 4Logo Color Codes and Palettes
ColorSpace 2Generate color palettes from one color
Material Design Palette Generator 3Generate theme and color palette Material Design-like
Colorate 1Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.
0to255 1A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.
Gradient Buttons 5Ready to use copy/paste gradient buttons
Khroma 3Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
whocanuse 1A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
Colorable 1Color combination contrast tester
Color Hex Picker 1Tool to get hex code along with name of the color.
Saruwakakun 2The stunning color scheme for website & App Designs with previews
Paletton 3Paletton.com is a designer color tool designed for creating color combinations that work together well.
Colorzilla 2A powerful online photoShop-like CSS gradient editor
Image Color Picker 1Image color picker and palette generator
CombineCOLORS 1Color mixing tool

↥ Back To Top 18

Icons

Resources for Icons including png, svg and more

WebsiteDescription
UXWing 21Well Optimized, Free icons for commercial use
Shapedfonts Iconclub 188000+ free icons
Feather Icons 2Beautiful, customizable open source icons
Tabler Icons 3470+ highly customizable open source SVG icons
Simple Icons 61307 Free SVG icons for popular brands
Instant Logo Search 8thousands of free brands logos ( SVG – PNG )
Linear Icons 31000+ Ultra crisp vector icons
Entypo 3411 carefully crafted premium pictograms by Daniel Bruce
Icons8 5Free icons, photos, vectors and tools
Flat Icon 5The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats
The Noun Project 3Over 2 Million curated icons, created by a global community
Iconscout 2Free Download Icons illustrations stock photos at one place
Nucleo App 2Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Icon-icons.com 2Free Icons PNG, ICO, ICNS and Vector file SVG
Bootstrap Icons 4Free Icons built for Bootstrap but they’ll work in any project
Remix Icon 1Simply Delightful Icon System
Iconmonstr 1Discover 4496+ free icons in 313 collections
Vivid.js 1Ready to use Free and Open Source SVG Icons Pack JavaScript Library.
Iconfinder 4Free and premium vector icons in SVG, PNG, CSH and AI format
Lordicon 150 free animated interactive icons
UseAnimations 6Free Animated Icons in SVG and Json Format(for lottie)
css.gg 2700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
SVGPorn 81000+ high-quality SVG logos
Payment System LogosLogos for payment systems available in png and svg
Browser Logos 2High resolution web browser logos
IconBros7843+ free icons grouped in 182 collections
LogoHub 2Generate and download your logo for free in PNG and SVG format
Material Design Icons 3A icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
Heroicons 1Free, open source icons from the creators of Tailwind CSS.
Zondicons 1A set of free premium SVG icons for you to use on your digital products.
Endless Icons 1A website offering a number of free icons. Icons are tagged and also compressed into kits.
IcomoonBrowse 5500+ Free Icons. Add any set you wish to easily browse and search its icons.
Eva IconsEva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.
ZondiconsA set of free premium SVG icons for you to use on your digital products. you can download the icons into your desktop
Entypo 3411 carefully crafted premium pictograms
CryptoiconsA set of 430 crypto and fiat currency icons. Completely free.
IkonateFully customisable & accessible vector icons
appiconQuickly generate app icons in diffrent sizes for your IOS, macOS and Android projects
LineIcons 32000+ Essential Line Icons for Designers and Developers

↥ Back To Top 18

Favicons

Resources for Favicons

WebsiteDescription
Favicon.io 11Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
Favicon Generator 2Generate favicon ico files for your website
RealFaviconGenerator 3Generate icons for all platforms (Windows, iOS, Android)
FontIcon 2Generate favicons and images from Font Awesome icons

↥ Back To Top 18

Icon Fonts

Resources for Icon Fonts

WebsiteDescription
Font Awesome 4The web’s most popular icon set and toolkit
Line Awesome 1Swap in replacement of Font Awesome with modern line icons
Material IconsMaterial design icon library
IonIcons 1Beautifully crafted open source icons from Ionic team
Zurb Foundation IconsCustomizable Foundation icons
Fontisto Icons 1Fontisto the iconic font and css toolkit · 616+ free icons
Boxicons 1Boxicons is a free collection of carefully crafted open source icons
Icofont2100+ free icons to spice up your creative designs
Material PaletteFree to pick palettes, icons and colors for Material Design]
Material Design Iconic FontMaterial design icon font
Vscode Codicons 2The icon font from Visual Studio Code
DeviconDevicon is a set of icons representing programming languages, designing & development tools
PaymentFont 2A sleek webfont for payment operators and methods. Featuring 116 icons
Weather IconsWeather Icons is the only icon font with 222 weather themed icons
Stroke 7202 thin stroke icons inspired by iOS 7
Jam Icons890+ handcrafted icons to make your web app awesome
Fontastic.me 2Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg
Fontello 1200+ web icons where you can customize the names or codes of icons.
Linea 1Linea: Featuring 750+ Free Icons

↥ Back To Top 18

Stock Photos

Websites that offer free stock photos of all kinds for your websites and apps

WebsiteDescription
Pexels 26Free stock photos shared by talented creators
Unsplash 9The internet’s source of freely usable images
Pixabay 14Over 1.7 million+ high quality stock images and videos
Magdeleine 11Gallery & free high res photo everyday
Picspree 7Royalty free images, stock photos, illustrations, and vectors
Burst 6Free stock photos collections
Gratisography 6Free collection of free high-resolution pictures
Life of Pix 2Free high resolution photography
Stock Snap 1Hundreds of high quality photos added weekly
Morguefile 3Over 350,000 free stock photos for commercial use
Kaboom Pics 1Stock photography and color palettes. Good for product images
New Old Stock 2Stock vintage photos
Pic JumboGood collections of different types of photos
Public Domain PicturesPublic domain images of all types
Find A Photo 3Searches multiple stock photo websites
Stockvault 1Categorized stock photos
PlaceholderA free image placeholder service for the web. You can specify image size and format
Realistic Shots 2Free high resolution stock photos
Negative SpaceHigh-Resolution Free Stock Photos
SkitterPhoto 1Free high resolution photography
PicoGraphyGorgeous, High-Resolution, Free Photos
Wunder Stock 2Stunningly amazing free photos
PxHereFree Images & Free stock photos – PxHere
Piqsels 1Royalty Free Stock Photos
FoodiesFeed 2Food photo stock
Nappy 2A website offering Beautiful, high-res photos of black and brown people.
Generated Photos 6Unique AI Generated model photos

↥ Back To Top 18

Stock Videos

Websites that offer free stock videos of all kinds for your websites and apps

WebsiteDescription
Pexels 8Largest library of free to use videos, donated by the community
Pixabay 2Large library of free to use videos, donated by the community similar to Pexels
Coverr.co 6Beautiful free stock video footage
Videezy 4Free HD stock footage & 4K videos
Mix Kit 2Stock video clips & music
Life Of Vids 4Free video clips and loops
Videvo 8Free and premium stock videos

↥ Back To Top 18

Stock Music & Sound Effects

Websites that offer free stock music and/or sound effects

WebsiteDescription
Free Stock Music 6Royalty free stock music for YouTube videos, podcasts, etc
Bensound 3Download Royalty Free Music for free and use it in your project
Mixkit 3Free music for your projects
Freesound 2Free stock music and sounds
Free Music Archive 1Collaborative database of creative-commons licensed sound for musicians and sound lovers
Musopen 2An online copyright free classical music library
Unminus 3Free Premium Music for Your Projects :gift: Royalty Free. Cleared for YouTube.

↥ Back To Top 18

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

WebsiteDescription
Vecteezy 7Find and download free vector art
Freepik 9Free vectors, stock photos, PSD and icons
Free Vectors 6Community of vector lovers who share free vector graphics
PNGTree 9png, backgrounds, templates, text effects
Vector4Free 3Free vector graphics
Retro Vectors 2Vintage vectors and graphics
FreebleVectors, patterns, mockups and more
Lukaszadam 3Free Vector atrworks
Illlustrations 33Beautiful 100 Illustrations – png, svg
Clipart 6Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection!
Growwwkit illustrations 5A set of 8 simple, black & white, stylish illustrations
World Vector Logo 4Download vector logos of brands you love
trianglify.io 3Generate low-poly backgrounds, textures, and vectors
blob 2Generate Blob shapes for Web and Flutter apps
HiClipart 6A community for designers to share & download transparent background PNG cliparts

↥ Back To Top 18

Product & Image Mockups

Create mockups of devices and other products

WebsiteDescription
Smart Mockups 18Create stunning product mockups (free & premium)
Shot Snap 6Create beautiful device mockup images for your app or website design
Screely 4Instantly turn your screenshot into a mockup
Screen Peak 5Create a mockup from a URL
Mockup World 7The biggest source of free photo-realistic Mockups online
Collab Shot 2Real-time screen grabs and image sharing
Facebook Devices 1Images and Sketch files of popular devices
Threed.io 8Generate 3D mockups right in your browser.
Mockuphone 3100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV

↥ Back To Top 18

HTML & CSS Templates

Websites that offer free beautiful website templates and themes of all types

WebsiteDescription
HTML5Up 26Very modern, unique responsive HTML5/CSS3 themes
Templatemo 8Minimal, resume, gallery themes and more
Templated.co 10Tons of minimalistic HTML5/CSS3 themes
FreeHTML5 7Free & premium HTML5 and Bootstrap themes
StyleShout 5Brilliantly crafted free website templates
Start Bootstrap 3Bootstrap starter themes
Zerotheme 7HTML5, Bootstrap, Prestashop templates
HTML5xCSS3 14Collection of wonderful templates in different categories
Colorlib 2Almost any category of theme you can think of
Free CSS 9Huge collection of free templates
Hubspot 3Templates, infographics, banners and much more
Mobirise 12Great looking HTML5/CSS3 templates
Bootswatch 1Free themes for Bootstrap
Onepagelove 5One page websites, templates and resources
Themes For App 2Free Bootstrap themes and landing pages
BootstrapTaste 3Premium & Free Bootstrap Templates
BootstrapMade 4Elegant, clean and beautiful free templates using Bootstrap.
W3Layouts 4W3Layouts: 3784+ Free Website Templates for 2020
Tooplate 6Tooplate: Free HTML Templates for everyone!
Cruip 5Fully coded HTML templates to help you easily build your startup landing page without hassles.
Shade 9Get High Converting Landing Pages For Free!

↥ Back To Top 18

CSS Frameworks

CSS/UI frameworks to help build great looking websites and applications

WebsiteDescription
Tailwind CSS 6Low level, utility-first framework
Bootstrap 3Popular UI framework with tons of components that use both CSS and JS
MaterializeA modern responsive front-end framework based on Material Design
Material Design Lite 1Light framework based on Material Design. No JS dependency
Bulma 5Modern CSS framework with no JS
Skeleton 4Extremely light framework for basic UI elements
Semantic UI 2Empowers designers and developers by creating a shared vocabulary for UI
Fomantic UI 1A community fork of Semantic-UI
FoundationMobile first framework with clean markup
Pure CSS 1A set of small, responsive CSS modules
UIKit 2Lightweight and modular front-end framework
Susy 3Lightweight, grid-layout engine for Sass
Milligram.io 1Minimalist CSS framework
Vanilla FrameworkSimple, extensible CSS framework written in Sass
Spectre CSSLightweight, modern CSS framework
Picnic CSSLightweight and beautiful library
WingA beautiful CSS framework designed for minimalists
Chota 1A micro (~3kb) CSS framework
Blueprint CSS 1A lightweight layout library for building great responsive mobile first UIs that work everywhere
W3.CSS 1A 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 1A design system for building faithful recreations of old UIs
NES CSSNES-style CSS Framework
Shoelace.cssLightweight, forward-thinking CSS library built with future CSS syntax
MVP.cssA minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you’re done
Blaze.cssOpen source modular CSS toolkit providing great structure for building websites quickly
Turret CSSTurret CSS is a styles framework for development of responsive websites.
CutestrapA strong, independent CSS Framework.
Shorthand 1Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css
XP.cssXP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs.
Framework7 2Framework7 – is a free and open source framework to develop mobile, desktop or web apps with native look and feel.

↥ Back To Top 18

CSS Animations

CSS animations to build awesome animations for websites and applications

WebsiteDescription
Animate.css 14Just-add-water CSS animations
Bounce.js 6Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations
Anime.js 5Anime.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 9Animations has been one of the most impressive animation libraries available
Zdog 3Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
CSShake 3CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.css 12Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJS 4AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
Animista 4CSS Animations On Demand
Tachyons-animate 2Tachyons 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 5Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
Infinite 5These animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSS 2Animations for the strong of heart, and weak of mind
MOTION UI 6A Sass library for creating flexible CSS transitions and animations

↥ Back To Top 18

Javascript Animation Libraries

javascript animations libraries to build awesome animations for websites and applications

WebsiteDescription
Greensock 9A JavaScript library for building high-performance animations that work in every major browser
Velocity.js 5Velocity is an lightweight animation engine with the same API as jQuery’s $.animate()
lax.jsSimple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll!
Rellax.jsA buttery smooth, super lightweight, vanilla javascript parallax library
three.js 2An easy to use, lightweight, 3D library with a default WebGL renderer.
wow.jsReveal Animations When You Scroll.
chocolat.jsFree lightbox plugin.
Animate On Scroll 5Animate on scroll library to reveal animations when You scroll.
Tilt.Js 2A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.

↥ Back To Top 18

UI Components & Kits

Not quite “frameworks”, but tools for creating user interfaces with components or UI kits

WebsiteDescription
TagFold 11Useful Bootstrap 4, HTML5, CSS3 Code Snippets to Build Web Layouts
UILang 1A minimal, ui-focused programming language for web designers
Medialoot CSS Components 3Calendars, price grids and other UI components
Froala Design Blocks 6Over 170 responsive design blocks ready to be used in your web or mobile apps
Material Design For Bootstrap 1Open source toolkit for building material design with Bootstrap
PhotonkitDesktop UI library for Electron
Flat UI 2Minimal free user interface kit
ShardsA free and modern UI toolkit for web makers based on Bootstrap
Creative Tim 4All types of UI libraries and kits including JS frameworks like React
Brumm Shadow MakerAn online tool to make css shadows
AdminLTEBest open source admin dashboard & control panel theme
SpinKitSimple CSS Spinners
Epic Spinners 4CSS spinners collection with Vue.js integration.
Loading.io 1Online service provider for creating simple animations, spinners, progress bar and more
Moving Letters 2Animated Text with JavaScript and anime.js
CSS Layout 2A collection of popular web layouts and patterns in pure CSS
CodyhouseKick-start your web projects with CodyHouse’s front-end framework and library of accessible HTML, CSS, JavaScript components
Tailwind Starter Kit 1Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
Tailwindtoolbox 1Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project.
tailwindcomponents 1A free repository for community components using TailwindCSS
sweetalertSweetAlert makes popup messages easy and pretty.
sweetalert2A beautiful,responsive,customizable,accessible replacement for javascript’s popup boxes
tailblocksOpen source ready-to-use Tailwind CSS components.
Soft Components 1A set of framework-agnostic web components based on neumorphic design.

↥ Back To Top 18

React UI

UI and component libraries for the React JavaScript framework

WebsiteDescription
Material UI 7React components for faster and easier web development, based on Material Design
Chakra UI 3Build accessible React apps & websites with speed. Openchakra 2
React Bootstrap 1Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
ReactStrap 1Another Bootstrap UI library for React
React Admin 1A frontend Framework for building admin applications. Supports API’s out of the box
BlueprintJSReact-based UI toolkit for the web
React Semantic UI 2UI components based off of the Semantic UI framework
Shards React 2React UI kit featuring a modern design system with dozens of custom components
React Virtualized 1UI set for data. Includes tables, lists, sorting, etc.
React ToolboxMaterial design UI library for React
Elastic UI 2Distributes UI React components and static assets for use in building web layouts
React DesktopDesktop styled components in React. Includes MacOS and Windows based components
Onsen React 2Distributes Components for hybrid mobile apps with React and Onsen UI
Evergreen 1Design system for React
Rebass 1React primitive UI components built with styled system
Grommetmobile first UI component library
Rimble 1React design kit, library and guides
Landing Page Template 4Open source landing page template for react
Elemental UI 1A UI Toolkit for React.js Websites and Apps
Ant Design 5Open source design React ui library.
PRIMEREACTThe ultimate collection of design-agnostic, flexible and accessible React UI Components
Primer ComponentsPrimer Components are React components which implement GitHub’s Primer Design System
OrbitDesign system and React UI components for travel projects.
Base WebBase Web provides a robust suite of components out of the box
Backpack UIBackpack is the Lonely Planet toolset that we use to build front end apps.
Reaviz 1Data visualization library for React based on D3
React SuiteA suite of React components, sensible UI design, and a friendly development experience.
React SpringSpring-physics based animation library for React applications.
RechartsA composable charting library built on React components.
Vercel UIModern and minimalist React UI library

↥ Back To Top 18

Vue UI

UI and component libraries for the Vue JavaScript framework

WebsiteDescription
Vuetify 2Material design component framework
Bootstrap Vue 2Use Bootstrap components with Vue
Buefy 1Lightweight UI components based on Bulma
Quasar 1High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions
Element 1Desktop UI library for Vue
Fish UI 1Vue UI toolkit for the web
Keen UI 1VueUI library with a simple API, inspired by Google’s Material Design
Onsen Vue 3Distributes Components for hybrid mobile apps with Vue and Onsen UI
Vuejsexamples 3A nice collection of useful vuejs UI components
InklineInkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications
VuesaxUnique and reusable UI components
AntdvUI library for Vue based on Ant Design
Shards Vue 1A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components

↥ Back To Top 18

Angular UI

UI and component libraries for the Angular JavaScript framework

WebsiteDescription
Material Angular 2UI library for Angular based on Material design
NG BootstrapUI library for Angular based on the Bootstrap framework
PrimeNGPowerful UI component library for Angular
Onsen AngularHybrid mobile and PWA UI library for Angular and Onsen UI
NG LightningNative Angular components & directives for Lightning Design System
NG SemanticUI library for Angular based on Semantic UI
NebularCustomizable UI Kit, Auth & Security for Angular
Alyle UIMinimal components set for Angular
NGX BootstrapAnother UI library for Angular based on the Bootstrap framework
NG ZorroUI library for Angular based on Ant Design

↥ Back To Top 18

Svelte UI

UI and component libraries for the Svelte Javascript compiler

WebsiteDescription
Svelte Material UI 1UI library for Svelte based on Material Design
SvelteStrap 2UI library for Svelte based on the Bootstrap framework
Svelte Flat UI 2UI library for Svelte based on Flat Design

↥ Back To Top 18

Design Systems & Style Guides

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

WebsiteDescription
Material Design 6Google’s Material Design
Ant Design 5Design system for enterprise-level products
Apple Design ResourcesGuides and templates for using Apple design and UI
PrimerDesign, build, and create with GitHub’s design system
Alta UIOracle’s design system and toolkit
Pulse 1Design system, guides and React component library
BoltRobust Twig and web component powered UI components
Clarity Design System 1UX guidelines, HTML/CSS framework, and Angular components
AtlasKitAtlassian’s official UI library, built according to the Atlassian Design Guidelines
Audi Design ResourcesAudi UI design system and toolkit
Carbon Design SystemsCarbon is IBM’s open-source design system for products and experiences
Yelp Style Guide 1Yelp style guide, components and toolkit
CometScalable design system of visual language, components, and design assets
ETrade Design SystemGuides and toolkits that blend finance with simplicity and ease of use
Fundamental Library 1Open source and community driven project for consistent user interfaces
Infor DesignGuidelines and resources to create meaningful experiences for Infor’s products
LexiconAn experience language for crafting beautiful UI
Mailchimp UI/UXStyle guide and components from Mailchimp
Marvel Style GuideSet of design principles and components
Microsoft Fluent UICollection of UX frameworks from Microsoft
Pluralsight Design System 1Design guide with components for designing with Pluralsight
PolarisDesign system that creates great experiences for all of Shopify’s merchants
Mozilla ProtocolProtocol is a design system for Mozilla and Firefox websites
SendGrid Style GuideUI library for developing consistent UI/UX at SendGrid
VTEX StyleguideReusable patterns, components and assets related to product design in VTEX
RizzoStyle guide with UI components, JS components, widgets, etc
AtomizeUI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.io 1A directory of 500+ styleguides
Done Design System 1Open source design system, guides & components
Skoda Brand System 1Design guideline for developing applications under the Skoda brand
Spectrum 1Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.

↥ Back To Top 18

Online Design Tools

All kinds of online tools for design, from photo editors to wireframing, and more

WebsiteDescription
Figma 7Online graphic design tool (Free & paid options)
Vectr 3Free vector graphics software
Canva 2Create beautiful designs (Free & Paid)
Get Waves 1A free SVG wave generator to make unique SVG waves for web design
Clippy 1Easy CSS clip-path maker
Fancy Border Radius 1Eight values specifying border-radius in CSS ( border-radius generator )
Wireframe.cc 1Wireframing tool (free & paid)
Fotor 3Photo editor and design maker
Pixlr 2Online photo editor
Animoto Video Maker 1Make videos online
RemoveBGRemove image backgrounds
Photo Creator 2Create your own photos instead of searching for stock
Visme 1Create presentations, infographics and more
InfogramCreate infograms
ChartGoCreate charts and graphs online
Cartoon Photo 5Turn photos into cartoons
Logo Maker 5Create custom logos
WhimsicalWireframes, diagrams and more (4 free)
WhiteboardOnline drawing tool
Octopus 1Sitemap builder
CTA Button Maker 2Create call to action buttons
Blobmaker 1Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes
Personas 2A playful avatar generator for the modern age
SoftUIA Soft UI (neumorphism) CSS generator
Photopea 1A Online Photoshop editor
ExcalidrawVirtual whiteboard for sketching hand-drawn like diagrams
Diagrams 1Diagram software and Flowchart maker
MapInSecondsSimple way to visualize your data with a map
Grid MalvenA css grid cheatsheet to reference when creating a css grid
Flex MalvenA flexbox grid cheatsheet to reference when working with flexbox
Smart UpscalerUpscale images by 2-4x resolution
GetAvataaarsFun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Webflow 2Break the code barrier, Build better business websites, faster. Without coding.
Trace 1Instantly remove the background from your photos
Neumorphism.ioGenerate Soft-UI CSS shadow code
DB DesignerDesign your database for free online
Ui BakeryCreate full-fledged web apps visually
FauxTurn real code into faux code
RiveReal-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
Unscreen 1Remove Video Background 100% Automatically and Free
KodeshotConvert your source code into nice pictures for your articles, tweets, messages, posts…
WixCreate a Website You’re Proud Of
GTmetrix 1Website Speed and Performance Optimization

↥ Back To Top 18

Downloadable Design Software

Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop

WebsiteDescription
GimpFree & open source image editor similar to Photoshop
Gravit Designer 1Free full-featured vector graphic design app that works on ALL platforms
Blender 2Open source, free animation, 3D modeling, etc.
Raw TherapeeCross-platform raw image processing program
Be FunkyOnline design program
KritaSketching and painting program designed for digital artists
Pencil ProjectGUI prototyping software
InkscapePowerful free design tool
Adobe XD 1Free design tool from Adobe
Shapes.so 1Icons that can be used as code in your projects
LunacySketch for Windows
InVision StudioFree screen designing tool from InVision
DarktableFree & Open source photography workflow application and raw developer
Inpixio photo Editor 1Free Photo Editor: For windows only

↥ Back To Top 18

Design Inspiration

Here are some websites to get inspiration for design and UI

WebsiteDescription
Behance 7Design projects featured by different creators
Dribbble 5Design projects featured by different creators
Httpster 10Showcases websites made by people from all over the world
Microcopy Inspirations 7Curated collection of UX writing examples, microcopy examples and copywriting examples
InspofindsLatest design work from designers and the design community
Design Notes 1Free online resource library for product designers
Land Book 3Displays a large collection of websites to help find inspiration
Frontend Mentor 2Real-world UI Challenges using HTML, CSS and Javascript
Awwwards 6A website that rate and collects the best websites in the world in UI
Codrops 2A website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing Page 3Discover the best landing page examples created by top-class SaaS companies
Pages.xyz 4Curate and discover the best designed web pages
UI Movement 4UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs
lapa ninja 5Best landing page inspiration
Freefrontend 3Free front end design from css html and javascript. latest work some design part
Webframe 1Discover and be inspired by beautiful webapp designs
Collect UI 6Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily.
Graphic Burger 2A 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 2A site offering users a ton of company e-mails from customer service to marketing.
Free Design Resource 5A site offering fonts, mockups, templates graphics and ui kits.
Site Inspire 2siteInspire is a showcase of the finest web and interactive design.
Web Design Inspiration 3A site for web design inspiration, updated daily.
NavNav 1Responsive navigation examples

↥ Back To Top 18

Image Compression

Websites that allow you to compress large images

WebsiteDescription
TinyPNG 2Smart PNG and JPEG compression
Optimizilla 1Online JPEG and PNG optimizer / compressor with settings and archive download
Compressor.io 1JPEG, PNG, GIF, SVG Compression
Squoosh.appImage compression from Google Chrome Labs
BulkResizePhotosBulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMGThe fastest free web app for easy image modification
SvgOMGOnline SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEG 1Compress JPEG images with size even greater than 5MB
CompressNow 1JPEG, GIF, PNG Compression
Promo Image Resizer 1Free Image and Photo Resizer
Image OptimizerImage Optimizer Free With Quality Options
SVGminifyThis tool removes superfluous information, thereby reducing the size of your SVG files
JPEG OptimizerFree online tool for resizing and compressing digital photos and images for displaying on the web

↥ Back To Top 18

Others

WebsiteDescription
everysize.kibalabs.com 12Check your awesome responsive webpage looks great in every size
Devhints.io 6This is a modest collection of cheatsheets on Internet
The Web Toolbox 5A collection of handy, free-to-use tools for web developers, programmers and designers.
WebDevTrick 6A famous blog for many amazing HTML, CSS, JQuery designs.
css-tricks 5Free CSS tricks and some unique ideas for beginners and advanced
Material Design Resizer 1An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet
Nodesign.dev 6A collection of tools for developers who have little to no artistic talent
A11ygator 3A web tool to scan websites against WCAG rules
Commitizen 1Command line tool to formatted commit messages according to the standards
CleanCss 2Tool For Code Foramtter, Minifier, File Converter
Tiny helpers 3A collection of free single-purpose online tools for web developers
CSS Ribbon Generator 1This generator will assist in creating a pure CSS corner ribbon.
Can I Use 1Check cross-browser compatibility of frontend technologies.
kangax-js-compat-table 1Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).
mydevice.io 2Most commonly used device resolutions including phones and tablets
Codepen 3Build, test and discover frontend code.
Responsively 2A tool for designers and frontend developers to design and debug their in all platforms with ease
html2pdf.js 2Client-side HTML-to-PDF rendering using pure JS.
CSS Reference 6A collection of all css properties and definitions in detail

Leave a Reply

Your email address will not be published. Required fields are marked *