# Design Resources For Developers
A curated list of FREE design & UI resources for developers including stock photos, templates, frameworks, UI Kits, online tools and much much more.
# Please read contributing guidelines before submitting new resources.
# Table of Contents
- UI Graphics
- Fonts
- Colors
- Icons
- 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
| Website | Description |
|---|---|
| UI Design Daily (opens new window) | Awesome UI Components of all types |
| 100 Daily UI (opens new window) | Free Figma library of products, elements, and screens |
| Sketch App Sources (opens new window) | Sketch UIs, wireframes, icons and much more |
| Humaaans (opens new window) | Cool illustrations of people with the ability to mix and match |
| Paaatterns (opens new window) | Free collection of beautiful patterns for all vector formats |
| thepatternlibrary (opens new window) | Free beautiful background patterns |
| Drawkit.io (opens new window) | Illustrations for designers and startups |
| Undraw.co (opens new window) | Open-source illustrations for any idea you can imagine and create |
| Illustration.co (opens new window) | Open-source illustrations kit |
| Opendoodles (opens new window) | Free sketchy illustrations |
| Open Peeps (opens new window) | Hand drawn illustration library |
| UI Space (opens new window) | Thousands of great UI freebies |
| Animations.co (opens new window) | Beautiful, customizable animated GIF icons |
| Uplabs (opens new window) | High-quality design resources (Free & Premium) |
| InvisionApp (opens new window) | Library of free, high-quality UI kits, icon packs, and mockups |
| Speckyboy Article (opens new window) | The 10 most popular open source frontend web UI kits |
| Open Doodles (opens new window) | A Free Set of Sketchy Illustrations |
| Avataaars (opens new window) | Free sketch library of avatars illustrations by Pablo Stanley |
| FreebieSketch (opens new window) | Free Sketch designs, wireframes, illustrations, and more. |
# Fonts
Websites that offer free fonts as well as font based tools
| Website | Description |
|---|---|
| Google Fonts (opens new window) | Library of around 1000 free licensed font families |
| DaFont (opens new window) | Archive of freely downloadable fonts |
| Use & Modify (opens new window) | Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces |
| 1001 Free Fonts (opens new window) | I think the name speaks for itself 😏 |
| Font Squirrel (opens new window) | Font Squirrel scours the internet for high quality, legitimately free fonts |
| Font Fabric (opens new window) | A digital type foundry crafting retail fonts and custom typography for various brands |
| What Font (opens new window) | Tool for finding the fonts of a website without having to search in the devtools |
| Tiff (opens new window) | A type diff tool that visually contrasts the differences between two fonts |
| Font Flame (opens new window) | Tool for pairing fonts to see how they look together |
| TypeKit Practice (opens new window) | Learn about typography practices |
| Fontjoy (opens new window) | Generate font pairing in one click |
| Golden Ratio (opens new window) | Golden Ratio Typography Calculator |
| FontSpark (opens new window) | Discover Better Fonts |
| FontPair (opens new window) | Helps you pair Google Fonts together |
| Font Space (opens new window) | A designer-centered free font website that has quick customizable previews |
| Abstract Fonts (opens new window) | Fonts free for personal and commercial use |
| Free Typography (opens new window) | A list of high quality fonts |
| Leon Sans (opens new window) | A geometric sans-serif typeface made with code |
| Lexend (opens new window) | A variable font empirically shown to significantly improve reading-proficiency |
| Fonts for Apple Platforms (opens new window) | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| SFWin (opens new window) | San Francisco Fonts for Windows 10 and non-Apple Platform |
| Font Flipper (opens new window) | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
# Colors
Websites and resources that help with choices related to colors
| Website | Description |
|---|---|
| Colormind.io (opens new window) | Color palette generator |
| ColorCurves.app (opens new window) | Color palette generator that uses curves to generate color palettes |
| Coolors (opens new window) | Color schemes generator |
| Coolors (opens new window) | Trending color palettes |
| Colors & Fonts (opens new window) | A curated library of colors, fonts and resources |
| Material Palette (opens new window) | Free to pick palettes, icons and colors for Material Design |
| ColorSpace (opens new window) | Generate nice color palettes from one color |
| FlatUIColors (opens new window) | Beautiful set of color palettes in various flavours |
| Adobe Color (opens new window) | Create color palettes, extract gradients from images, etc |
| Colorsinspo (opens new window) | All-in-one resource for finding everything about colors |
| Happyhues (opens new window) | 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 (opens new window) | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock |
| Color Hunt (opens new window) | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| Gradient Hunt (opens new window) | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
| Web Gradients (opens new window) | A free website to find good css gradients |
| ColorBox (opens new window) | A free website to produce color set |
| CSS gradient (opens new window) | A free website to make custome gradient and some examples of gradient |
| gradienta (opens new window) | A pure css and jpg gradients |
| UI Gradients (opens new window) | UI gradients color generator |
| Palette Generator (opens new window) | Generate new color palette with every spacebar press |
| Material Palettes (opens new window) | 1000+ Material Design palettes |
| Grabient (opens new window) | Gradient Selector |
| ShadeSwash (opens new window) | Quickly generate shades of any color |
| ColorSpace (opens new window) | Generate color palettes from one color |
| Material Design Palette Generator (opens new window) | Generate theme and color palette Material Design-like |
# Icons
Resources for Icons including png, svg and more
| Website | Description |
|---|---|
| Shapedfonts Iconclub (opens new window) | 8000+ free icons |
| Feather Icons (opens new window) | Beautiful, customizable open source icons |
| Tabler Icons (opens new window) | 470+ highly customizable open source SVG icons |
| Simple Icons (opens new window) | 1307 Free SVG icons for popular brands |
| Linear Icons (opens new window) | 1000+ Ultra crisp vector icons |
| Entypo (opens new window) | 411 carefully crafted premium pictograms by Daniel Bruce |
| Icons8 (opens new window) | Free icons, photos, vectors and tools |
| Flat Icon (opens new window) | The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats |
| The Noun Project (opens new window) | Over 2 Million curated icons, created by a global community |
| Iconsout (opens new window) | Free Download Icons illustrations stock photos at one place |
| Nucleo App (opens new window) | 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 (opens new window) | Free Icons PNG, ICO, ICNS and Vector file SVG |
| Bootstrap Icons (opens new window) | Free Icons built for Bootstrap but they'll work in any project |
| Remix Icon (opens new window) | Simply Delightful Icon System |
| Iconmonstr (opens new window) | Discover 4496+ free icons in 313 collections |
| Vivid.js (opens new window) | Ready to use Free and Open Source SVG Icons Pack JavaScript Library. |
| Iconfinder (opens new window) | Free and premium vector icons in SVG, PNG, CSH and AI format |
| Lordicon (opens new window) | 50 free animated interactive icons |
| UseAnimations (opens new window) | Free Animated Icons in SVG and Json Format(for lottie) |
| css.gg (opens new window) | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API |
| SVGPorn (opens new window) | 1000+ high-quality SVG logos |
| Payment System Logos (opens new window) | Logos for payment systems available in png and svg |
| Browser Logos (opens new window) | High resolution web browser logos |
| IconBros (opens new window) | 7843+ free icons grouped in 182 collections |
| LogoHub (opens new window) | Generate and download your logo for free in PNG and SVG format |
| Material Design Icons (opens new window) | 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 (opens new window) | Free, open source icons from the creators of Tailwind CSS. |
| Zondicons (opens new window) | A set of free premium SVG icons for you to use on your digital products. |
# Icon Fonts
Resources for Icon Fonts
| Website | Description |
|---|---|
| Font Awesome (opens new window) | The web's most popular icon set and toolkit |
| Line Awesome (opens new window) | Swap in replacement of Font Awesome with modern line icons |
| Material Icons (opens new window) | Material design icon library |
| IonIcons (opens new window) | Beautifully crafted open source icons from Ionic team |
| Zurb Foundation Icons (opens new window) | Customizable Foundation icons |
| Fontisto Icons (opens new window) | Fontisto the iconic font and css toolkit · 616+ free icons |
| Boxicons (opens new window) | Boxicons is a free collection of carefully crafted open source icons |
| Icofont (opens new window) | 2100+ free icons to spice up your creative designs |
| Material Palette (opens new window) | Free to pick palettes, icons and colors for Material Design] |
| Material Design Iconic Font (opens new window) | Material design icon font |
| Vscode Codicons (opens new window) | The icon font from Visual Studio Code |
| Devicon (opens new window) | Devicon is a set of icons representing programming languages, designing & development tools |
| PaymentFont (opens new window) | A sleek webfont for payment operators and methods. Featuring 116 icons |
| Weather Icons (opens new window) | Weather Icons is the only icon font with 222 weather themed icons |
| Stroke 7 (opens new window) | 202 thin stroke icons inspired by iOS 7 |
| Jam Icons (opens new window) | 890+ handcrafted icons to make your web app awesome |
# Stock Photos
Websites that offer free stock photos of all kinds for your websites and apps
| Website | Description |
|---|---|
| Pexels (opens new window) | Free stock photos shared by talented creators |
| Unsplash (opens new window) | The internet’s source of freely usable images |
| Pixabay (opens new window) | Over 1.7 million+ high quality stock images and videos |
| Magdeleine (opens new window) | Gallery & free high res photo everyday |
| Picspree (opens new window) | Royalty free images, stock photos, illustrations, and vectors |
| Burst (opens new window) | Free stock photos collections |
| Life of Pix (opens new window) | Free high resolution photography |
| Stock Snap (opens new window) | Hundreds of high quality photos added weekly |
| Morguefile (opens new window) | Over 350,000 free stock photos for commercial use |
| Kaboom Pics (opens new window) | Stock photography and color palettes. Good for product images |
| New Old Stock (opens new window) | Stock vintage photos |
| Pic Jumbo (opens new window) | Good collections of different types of photos |
| Public Domain Pictures (opens new window) | Public domain images of all types |
| Find A Photo (opens new window) | Searches multiple stock photo websites |
| Stockvault (opens new window) | Categorized stock photos |
| Placeholder (opens new window) | A free image placeholder service for the web. You can specify image size and format |
| Realistic Shots (opens new window) | Free high resolution stock photos |
| Negative Space (opens new window) | High-Resolution Free Stock Photos |
| SkitterPhoto (opens new window) | Free high resolution photography |
| PicoGraphy (opens new window) | Gorgeous, High-Resolution, Free Photos |
| Wunder Stock (opens new window) | Stunningly amazing free photos |
| PxHere (opens new window) | Free Images & Free stock photos - PxHere |
| Piqsels (opens new window) | Royalty Free Stock Photos |
| FoodiesFeed (opens new window) | Food photo stock |
# Stock Videos
Websites that offer free stock videos of all kinds for your websites and apps
| Website | Description |
|---|---|
| Coverr.co (opens new window) | Beautiful free stock video footage |
| Videezy (opens new window) | Free HD stock footage & 4K videos |
| Mix Kit (opens new window) | Stock video clips & music |
| Life Of Vids (opens new window) | Free video clips and loops |
| Videvo (opens new window) | Free and premium stock videos |
# Stock Music & Sound Effects
Websites that offer free stock music and/or sound effects
| Website | Description |
|---|---|
| Free Stock Music (opens new window) | Royalty free stock music for YouTube videos, podcasts, etc |
| Bensound (opens new window) | Download Royalty Free Music for free and use it in your project |
| Mixkit (opens new window) | Free music for your projects |
| Freesound (opens new window) | Free stock music and sounds |
| Free Music Archive (opens new window) | Collaborative database of creative-commons licensed sound for musicians and sound lovers |
| Musopen (opens new window) | An online copyright free classical music library |
| Unminus (opens new window) | Free Premium Music for Your Projects 🎁 Royalty Free. Cleared for YouTube. |
# Vectors & Clip Art
Free vectors, clipart, illustrations, patterns and more
| Website | Description |
|---|---|
| Vecteezy (opens new window) | Find and download free vector art |
| Freepik (opens new window) | Free vectors, stock photos, PSD and icons |
| Free Vectors (opens new window) | Community of vector lovers who share free vector graphics |
| PNGTree (opens new window) | png, backgrounds, templates, text effects |
| Vector4Free (opens new window) | Free vector graphics |
| Retro Vectors (opens new window) | Vintage vectors and graphics |
| Freeble (opens new window) | Vectors, patterns, mockups and more |
| Lukaszadam (opens new window) | Free Vector atrworks |
| Illlustrations (opens new window) | Beautiful 100 Illustrations - png, svg |
| Clipart (opens new window) | Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
| Growwwkit illustrations (opens new window) | A set of 8 simple, black & white, stylish illustrations |
# Product & Image Mockups
Create mockups of devices and other products
| Website | Description |
|---|---|
| Smart Mockups (opens new window) | Create stunning product mockups (free & premium) |
| Shot Snap (opens new window) | Create beautiful device mockup images for your app or website design |
| Screely (opens new window) | Instantly turn your screenshot into a mockup |
| Screen Peak (opens new window) | Create a mockup from a URL |
| Mockup World (opens new window) | The biggest source of free photo-realistic Mockups online |
| Collab Shot (opens new window) | Real-time screen grabs and image sharing |
| Facebook Devices (opens new window) | Images and Sketch files of popular devices |
| Threed.io (opens new window) | Generate 3D mockups right in your browser. |
# HTML & CSS Templates
Websites that offer free beautiful website templates and themes of all types
| Website | Description |
|---|---|
| HTML5Up (opens new window) | Very modern, unique responsive HTML5/CSS3 themes |
| Templatemo (opens new window) | Minimal, resume, gallery themes and more |
| Templated.co (opens new window) | Tons of minimalistic HTML5/CSS3 themes |
| FreeHTML5 (opens new window) | Free & premium HTML5 and Bootstrap themes |
| StyleShout (opens new window) | Brilliantly crafted free website templates |
| Start Bootstrap (opens new window) | Bootstrap starter themes |
| Zerotheme (opens new window) | HTML5, Bootstrap, Prestashop templates |
| HTML5xCSS3 (opens new window) | Collection of wonderful templates in different categories |
| Colorlib (opens new window) | Almost any category of theme you can think of |
| Free CSS (opens new window) | Huge collection of free templates |
| Hubspot (opens new window) | Templates, infographics, banners and much more |
| Mobirise (opens new window) | Great looking HTML5/CSS3 templates |
| Bootswatch (opens new window) | Free themes for Bootstrap |
| Onepagelove (opens new window) | One page websites, templates and resources |
| Themes For App (opens new window) | Free Bootstrap themes and landing pages |
| BootstrapTaste (opens new window) | Premium & Free Bootstrap Templates |
| BootstrapMade (opens new window) | Elegant, clean and beautiful free templates using Bootstrap. |
| W3Layouts (opens new window) | W3Layouts: 3784+ Free Website Templates for 2020 |
# CSS Frameworks
CSS/UI frameworks to help build great looking websites and applications
| Website | Description |
|---|---|
| Tailwind CSS (opens new window) | Low level, utility-first framework |
| Bootstrap (opens new window) | Popular UI framework with tons of components that use both CSS and JS |
| Materialize (opens new window) | A modern responsive front-end framework based on Material Design |
| Material Design Lite (opens new window) | Light framework based on Material Design. No JS dependency |
| Bulma (opens new window) | Modern CSS framework with no JS |
| Skeleton (opens new window) | Extremely light framework for basic UI elements |
| Semantic UI (opens new window) | Empowers designers and developers by creating a shared vocabulary for UI |
| Fomantic UI (opens new window) | A community fork of Semantic-UI |
| Foundation (opens new window) | Mobile first framework with clean markup |
| Pure CSS (opens new window) | A set of small, responsive CSS modules |
| UIKit (opens new window) | Lightweight and modular front-end framework |
| Susy (opens new window) | Lightweight, grid-layout engine for Sass |
| Milligram.io (opens new window) | Minimalist CSS framework |
| Vanilla Framework (opens new window) | Simple, extensible CSS framework written in Sass |
| Spectre CSS (opens new window) | Lightweight, modern CSS framework |
| Picnic CSS (opens new window) | Lightweight and beautiful library |
| Wing (opens new window) | A beautiful CSS framework designed for minimalists |
| Chota (opens new window) | A micro (~3kb) CSS framework |
| Blueprint CSS (opens new window) | A lightweight layout library for building great responsive mobile first UIs that work everywhere |
| W3.CSS (opens new window) | 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 (opens new window) | A design system for building faithful recreations of old UIs |
| NES CSS (opens new window) | NES-style CSS Framework |
| Shoelace.css (opens new window) | Lightweight, forward-thinking CSS library built with future CSS syntax |
| MVP.css (opens new window) | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done |
| Blaze.css (opens new window) | Open source modular CSS toolkit providing great structure for building websites quickly |
| Turret CSS (opens new window) | Turret CSS is a styles framework for development of responsive websites. |
| Cutestrap (opens new window) | A strong, independent CSS Framework. |
# CSS Animations
CSS animations to build awesome animations for websites and applications
| Website | Description |
|---|---|
| Animate.css (opens new window) | Just-add-water CSS animations |
| Bounce.js (opens new window) | Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations |
| Anime.js (opens new window) | 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 (opens new window) | Animations has been one of the most impressive animation libraries available |
| Zdog (opens new window) | Round, flat, designer-friendly pseudo-3D engine for canvas & SVG |
| CSShake (opens new window) | CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page |
| Hover.css (opens new window) | Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website |
| AniJS (opens new window) | AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure |
| Animista (opens new window) | CSS Animations On Demand |
| Tachyons-animate (opens new window) | 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 (opens new window) | Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications |
| Infinite (opens new window) | These animations, like rotations and pulses, that are specifically designed to run and repeat forever |
| OBNOXIOUS.CSS (opens new window) | Animations for the strong of heart, and weak of mind |
| MOTION UI (opens new window) | A Sass library for creating flexible CSS transitions and animations |
# Javascript Animation Libraries
javascript animations libraries to build awesome animations for websites and applications
| Website | Description |
|---|---|
| Greensock (opens new window) | A JavaScript library for building high-performance animations that work in every major browser |
| lax.js (opens new window) | Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! |
| Rellax.js (opens new window) | A buttery smooth, super lightweight, vanilla javascript parallax library |
| three.js (opens new window) | An easy to use, lightweight, 3D library with a default WebGL renderer. |
| wow.js (opens new window) | Reveal Animations When You Scroll. |
| chocolat.js (opens new window) | Free lightbox plugin. |
# UI Components & Kits
Not quite "frameworks", but tools for creating user interfaces with components or UI kits
| Website | Description |
|---|---|
| UILang (opens new window) | A minimal, ui-focused programming language for web designers |
| Medialoot CSS Components (opens new window) | Calendars, price grids and other UI components |
| Froala Design Blocks (opens new window) | Over 170 responsive design blocks ready to be used in your web or mobile apps |
| Material Design For Bootstrap (opens new window) | Open source toolkit for building material design with Bootstrap |
| Photonkit (opens new window) | Desktop UI library for Electron |
| Flat UI (opens new window) | Minimal free user interface kit |
| Shards (opens new window) | A free and modern UI toolkit for web makers based on Bootstrap |
| Creative Tim (opens new window) | All types of UI libraries and kits including JS frameworks like React |
| Brumm Shadow Maker (opens new window) | An online tool to make css shadows |
| AdminLTE (opens new window) | Best open source admin dashboard & control panel theme |
| SpinKit (opens new window) | Simple CSS Spinners |
| Moving Letters (opens new window) | Animated Text with JavaScript and anime.js |
| CSS Layout (opens new window) | A collection of popular web layouts and patterns in pure CSS |
| Codyhouse (opens new window) | Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components |
| Tailwind Starter Kit (opens new window) | Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source |
| Tailwindtoolbox (opens new window) | Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. |
| tailwindcomponents (opens new window) | A free repository for community components using TailwindCSS |
| sweetalert (opens new window) | SweetAlert makes popup messages easy and pretty. |
| sweetalert2 (opens new window) | A beautiful,responsive,customizable,accessible replacement for javascript's popup boxes |
# React UI
UI and component libraries for the React JavaScript framework
| Website | Description |
|---|---|
| Material UI (opens new window) | React components for faster and easier web development, based on Material Design |
| Chakra UI (opens new window) | Build accessible React apps & websites with speed. Openchakra (opens new window) |
| React Bootstrap (opens new window) | Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript |
| ReactStrap (opens new window) | Another Bootstrap UI library for React |
| React Admin (opens new window) | A frontend Framework for building admin applications. Supports API's out of the box |
| BlueprintJS (opens new window) | React-based UI toolkit for the web |
| React Semantic UI (opens new window) | UI components based off of the Semantic UI framework |
| Shards React (opens new window) | React UI kit featuring a modern design system with dozens of custom components |
| React Virtualized (opens new window) | UI set for data. Includes tables, lists, sorting, etc. |
| React Toolbox (opens new window) | Material design UI library for React |
| Elastic UI (opens new window) | Distributes UI React components and static assets for use in building web layouts |
| React Desktop (opens new window) | Desktop styled components in React. Includes MacOS and Windows based components |
| Onsen React (opens new window) | Distributes Components for hybrid mobile apps with React and Onsen UI |
| Evergreen (opens new window) | Design system for React |
| Rebass (opens new window) | React primitive UI components built with styled system |
| Grommet (opens new window) | mobile first UI component library |
| Rimble (opens new window) | React design kit, library and guides |
| Landing Page Template (opens new window) | Open source landing page template for react |
| KendoReact (opens new window) | UI for React Developers |
| PRIMEREACT (opens new window) | The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| Elemental UI (opens new window) | A UI Toolkit for React.js Websites and Apps |
| Ant Design (opens new window) | Open source design React ui library. |
| KendoReact (opens new window) | UI for React Developers. |
| PRIMEREACT (opens new window) | The ultimate collection of design-agnostic, flexible and accessible React UI Components |
| Primer Components (opens new window) | Primer Components are React components which implement GitHub's Primer Design System |
| Orbit (opens new window) | Design system and React UI components for travel projects. |
| Base Web (opens new window) | Base Web provides a robust suite of components out of the box |
| Backpack UI (opens new window) | Backpack is the Lonely Planet toolset that we use to build front end apps. |
| Reaviz (opens new window) | Data visualization library for React based on D3 |
# Vue UI
UI and component libraries for the Vue JavaScript framework
| Website | Description |
|---|---|
| Vuetify (opens new window) | Material design component framework |
| Bootstrap Vue (opens new window) | Use Bootstrap components with Vue |
| Buefy (opens new window) | Lightweight UI components based on Bulma |
| Quasar (opens new window) | Build high-performance VueJS user interfaces in record time |
| Element (opens new window) | Desktop UI library for Vue |
| Fish UI (opens new window) | Vue UI toolkit for the web |
| Keen UI (opens new window) | VueUI library with a simple API, inspired by Google's Material Design |
| Onsen Vue (opens new window) | Distributes Components for hybrid mobile apps with Vue and Onsen UI |
| Vuejsexamples (opens new window) | A nice collection of useful vuejs UI components |
| Inkline (opens new window) | Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications |
| Vuesax (opens new window) | Unique and reusable UI components |
| Antdv (opens new window) | UI library for Vue based on Ant Design |
# Angular UI
UI and component libraries for the Angular JavaScript framework
| Website | Description |
|---|---|
| Material Angular (opens new window) | UI library for Angular based on Material design |
| NG Bootstrap (opens new window) | UI library for Angular based on the Bootstrap framework |
| PrimeNG (opens new window) | Powerful UI component library for Angular |
| Onsen Angular (opens new window) | Hybrid mobile and PWA UI library for Angular and Onsen UI |
| NG Lightning (opens new window) | Native Angular components & directives for Lightning Design System |
| NG Semantic (opens new window) | UI library for Angular based on Semantic UI |
| Nebular (opens new window) | Customizable UI Kit, Auth & Security for Angular |
| Alyle UI (opens new window) | Minimal components set for Angular |
| NGX Bootstrap (opens new window) | Another UI library for Angular based on the Bootstrap framework |
| NG Zorro (opens new window) | UI library for Angular based on Ant Design |
# Svelte UI
UI and component libraries for the Svelte Javascript compiler
| Website | Description |
|---|---|
| Svelte Material UI (opens new window) | UI library for Svelte based on Material Design |
| SvelteStrap (opens new window) | UI library for Svelte based on the Bootstrap framework |
| Svelte Flat UI (opens new window) | UI library for Svelte based on Flat Design |
# Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
| Website | Description |
|---|---|
| Material Design (opens new window) | Google's Material Design |
| Ant Design (opens new window) | Design system for enterprise-level products |
| Apple Design Resources (opens new window) | Guides and templates for using Apple design and UI |
| Alta UI (opens new window) | Oracle's design system and toolkit |
| Pulse (opens new window) | Design system, guides and React component library |
| Bolt (opens new window) | Robust Twig and web component powered UI components |
| Clarity Design System (opens new window) | UX guidelines, HTML/CSS framework, and Angular components |
| AtlasKit (opens new window) | Atlassian's official UI library, built according to the Atlassian Design Guidelines |
| Audi Design Resources (opens new window) | Audi UI design system and toolkit |
| Carbon Design Systems (opens new window) | Carbon is IBM’s open-source design system for products and experiences |
| Yelp Style Guide (opens new window) | Yelp style guide, components and toolkit |
| Comet (opens new window) | Scalable design system of visual language, components, and design assets |
| ETrade Design System (opens new window) | Guides and toolkits that blend finance with simplicity and ease of use |
| Fundamental Library (opens new window) | Open source and community driven project for consistent user interfaces |
| Infor Design (opens new window) | Guidelines and resources to create meaningful experiences for Infor’s products |
| Lexicon (opens new window) | An experience language for crafting beautiful UI |
| Mailchimp UI/UX (opens new window) | Style guide and components from Mailchimp |
| Marvel Style Guide (opens new window) | Set of design principles and components |
| Microsoft Fluent UI (opens new window) | Collection of UX frameworks from Microsoft |
| Pluralsight Design System (opens new window) | Design guide with components for designing with Pluralsight |
| Polaris (opens new window) | Design system that creates great experiences for all of Shopify’s merchants |
| Mozilla Protocol (opens new window) | Protocol is a design system for Mozilla and Firefox websites |
| SendGrid Style Guide (opens new window) | UI library for developing consistent UI/UX at SendGrid |
| VTEX Styleguide (opens new window) | Reusable patterns, components and assets related to product design in VTEX |
| Rizzo (opens new window) | Style guide with UI components, JS components, widgets, etc |
| Atomize (opens new window) | UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| StyleGuides.io (opens new window) | A directory of 500+ styleguides |
| Done Design System (opens new window) | Open source design system, guides & components |
# Online Design Tools
All kinds of online tools for design, from photo editors to wireframing, and more
| Website | Description |
|---|---|
| Figma (opens new window) | Online graphic design tool (Free & paid options) |
| Vectr (opens new window) | Free vector graphics software |
| Canva (opens new window) | Create beautiful designs (Free & Paid) |
| Wireframe.cc (opens new window) | Wireframing tool (free & paid) |
| Fotor (opens new window) | Photo editor and design maker |
| Pixlr (opens new window) | Online photo editor |
| Animoto Video Maker (opens new window) | Make videos online |
| RemoveBG (opens new window) | Remove image backgrounds |
| Photo Creator (opens new window) | Create your own photos instead of searching for stock |
| Visme (opens new window) | Create presentations, infographics and more |
| Infogram (opens new window) | Create infograms |
| ChartGo (opens new window) | Create charts and graphs online |
| Cartoon Photo (opens new window) | Turn photos into cartoons |
| Logo Maker (opens new window) | Create custom logos |
| Whimsical (opens new window) | Wireframes, diagrams and more (4 free) |
| Whiteboard (opens new window) | Online drawing tool |
| Octopus (opens new window) | Sitemap builder |
| Favicon Generator (opens new window) | Generate favicon ico files for your website |
| RealFaviconGenerator (opens new window) | Generate icons for all platforms (Windows, iOS, Android) |
| FontIcon (opens new window) | Generate favicons and images from Font Awesome icons |
| CTA Button Maker (opens new window) | Create call to action buttons |
| Blobmaker (opens new window) | Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes |
| Personas (opens new window) | A playful avatar generator for the modern age |
| SoftUI (opens new window) | A Soft UI (neumorphism) CSS generator |
| Photopea (opens new window) | A Online Photoshop editor |
| Excalidraw (opens new window) | Virtual whiteboard for sketching hand-drawn like diagrams |
| Diagrams (opens new window) | Diagram software and Flowchart maker |
| MapInSeconds (opens new window) | Simple way to visualize your data with a map |
| Grid Malven (opens new window) | A css grid cheatsheet to reference when creating a css grid |
| Smart Upscaler (opens new window) | Upscale images by 2-4x resolution |
| GetAvataaars (opens new window) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
| Webflow (opens new window) | Break the code barrier, Build better business websites, faster. Without coding. |
| Trace (opens new window) | Instantly remove the background from your photos |
| Neumorphism.io (opens new window) | Generate Soft-UI CSS shadow code |
| DB Designer (opens new window) | Design your database for free online |
| Ui Bakery (opens new window) | Create full-fledged web apps visually |
| Faux (opens new window) | Turn real code into faux code |
# Downloadable Design Software
Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
| Website | Description |
|---|---|
| Gimp (opens new window) | Free & open source image editor similar to Photoshop |
| Gravit Designer (opens new window) | Free full-featured vector graphic design app that works on ALL platforms |
| Blender (opens new window) | Open source, free animation, 3D modeling, etc. |
| Raw Therapee (opens new window) | Cross-platform raw image processing program |
| Be Funky (opens new window) | Online design program |
| Krita (opens new window) | Sketching and painting program designed for digital artists |
| Pencil Project (opens new window) | GUI prototyping software |
| Inkscape (opens new window) | Powerful free design tool |
| Adobe XD (opens new window) | Free design tool from Adobe |
| Shapes.so (opens new window) | Icons that can be used as code in your projects |
| Lunacy (opens new window) | Sketch for Windows |
| InVision Studio (opens new window) | Free screen designing tool from InVision |
| Darktable (opens new window) | Free & Open source photography workflow application and raw developer |
| Inpixio photo Editor (opens new window) | Free Photo Editor: For windows only |
# Design Inspiration
Here are some websites to get inspiration for design and UI
| Website | Description |
|---|---|
| Behance (opens new window) | Design projects featured by different creators |
| Dribbble (opens new window) | Design projects featured by different creators |
| Httpster (opens new window) | Showcases websites made by people from all over the world |
| Microcopy Inspirations (opens new window) | Curated collection of UX writing examples, microcopy examples and copywriting examples |
| Inspofinds (opens new window) | Latest design work from designers and the design community |
| Design Notes (opens new window) | Free online resource library for product designers |
| Land Book (opens new window) | Displays a large collection of websites to help find inspiration |
| Frontend Mentor (opens new window) | Real-world UI Challenges using HTML, CSS and Javascript |
| Awwwards (opens new window) | A website that rate and collects the best websites in the world in UI |
| Codrops (opens new window) | A website that collects the best UI ideas and patterns and make tutorials of it |
| SaaS Landing Page (opens new window) | Discover the best landing page examples created by top-class SaaS companies |
| Pages.xyz (opens new window) | Curate and discover the best designed web pages |
| UI Movement (opens new window) | UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs |
| Freefrontend (opens new window) | Free front end design from css html and javascript. latest work some design part |
| Webframe (opens new window) | Discover and be inspired by beautiful webapp designs |
| Collect UI (opens new window) | Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily. |
# Image Compression
Websites that allow you to compress large images
| Website | Description |
|---|---|
| TinyPNG (opens new window) | Smart PNG and JPEG compression |
| Optimizilla (opens new window) | Online JPEG and PNG optimizer / compressor with settings and archive download |
| Compressor.io (opens new window) | JPEG, PNG, GIF, SVG Compression |
| Squoosh.app (opens new window) | Image compression from Google Chrome Labs |
| BulkResizePhotos (opens new window) | Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) |
| iLoveIMG (opens new window) | The fastest free web app for easy image modification |
| SvgOMG (opens new window) | Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it. |
| CompressJPEG (opens new window) | Compress JPEG images with size even greater than 5MB |
| CompressNow (opens new window) | JPEG, GIF, PNG Compression |
| Promo Image Resizer (opens new window) | Free Image and Photo Resizer |
# Others
Uncategorized Stuff
| Website | Description |
|---|---|
| everysize.kibalabs.com (opens new window) | Check your awesome responsive webpage looks great in every size |
| Devhints.io (opens new window) | This is a modest collection of cheatsheets on Internet |
| The Web Toolbox (opens new window) | A collection of handy, free-to-use tools for web developers, programmers and designers. |
| css-tricks (opens new window) | Free CSS tricks and some unique ideas for beginners and advanced |
| Material Design Resizer (opens new window) | An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet. |
← Cookie工具类 EasyUI-Tree →