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
Website Description UI Design Daily 134 Awesome UI Components of all types 100 Daily UI 52 Free Figma library of products, elements, and screens Sketch App Sources 31 Sketch UIs, wireframes, icons and much more Humaaans 43 Cool illustrations of people with the ability to mix and match Paaatterns 31 Free collection of beautiful patterns for all vector formats thepatternlibrary 31 Free beautiful background patterns 404 illustration 33 free illustrations for 404 pages Drawkit.io 28 Illustrations for designers and startups Undraw.co 15 Open-source illustrations for any idea you can imagine and create Illustration.co 33 Open-source illustrations kit Manypixels.co 16 Monochromatic, Isometric high quality illustrations Opendoodles 27 Free sketchy illustrations Open Peeps 12 Hand drawn illustration library UI Space 28 Thousands of great UI freebies Animations.co 35 Beautiful, customizable animated GIF icons Uplabs 19 High-quality design resources (Free & Premium) InvisionApp 13 Library of free, high-quality UI kits, icon packs, and mockups Open Doodles 27 A Free Set of Sketchy Illustrations Avataaars 13 Free sketch library of avatars illustrations by Pablo Stanley FreebieSketch 21 Free Sketch designs, wireframes, illustrations, and more. Blush 11 Free customizable illustrations with Figma Plugin Hero Patterns 29 A collection of repeatable SVG background patterns
↥ Back To Top 18
Fonts
Websites that offer free fonts as well as font based tools
Website Description Google Fonts 7 Library of around 1000 free licensed font families DaFont 3 Archive of freely downloadable fonts Use & Modify 4 Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces 1001 Free Fonts 3 I think the name speaks for itself Font Squirrel 3 Font Squirrel scours the internet for high quality, legitimately free fonts Font Fabric 1 A digital type foundry crafting retail fonts and custom typography for various brands What Font 1 Tool for finding the fonts of a website without having to search in the devtools Tiff 2 A type diff tool that visually contrasts the differences between two fonts Font Flame 4 Tool for pairing fonts to see how they look together TypeKit Practice 2 Learn about typography practices Fontjoy 1 Generate font pairing in one click Golden Ratio 2 Golden Ratio Typography Calculator FontSpark 3 Discover Better Fonts FontPair 2 Helps you pair Google Fonts together Font Space 1 A designer-centered free font website that has quick customizable previews Abstract Fonts 4 Fonts free for personal and commercial use Free Typography 5 A list of high quality fonts Leon Sans 2 A geometric sans-serif typeface made with code Lexend 1 A variable font empirically shown to significantly improve reading-proficiency Fonts for Apple Platforms 1 Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps SFWin 1 San Francisco Fonts for Windows 10 and non-Apple Platform Font Flipper 1 Preview 800+ Google Fonts on top of your own designs, without having to download the fonts Fonts Arena 2 Free curated fonts Befonts 4 High quality fonts for free Arabic fonts 2 Arabic fonts for free FontDrop 1 Simple 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
Website Description Colormind.io 22 Color palette generator ColorCurves.app 6 Color palette generator that uses curves to generate color palettes Coolors 5 Create the perfect palette or get inspired by thousands of beautiful color schemes Colors & Fonts 4 A curated library of colors, fonts and resources Palette List 5 Pick 2 colors you like and the tool generates thousands of palettes for you. Google Material Color Tool 9 Official Google Material Color Palette Tool Material Palette 4 Free to pick palettes, icons and colors for Material Design ColorSpace 2 Generate nice color palettes from one color FlatUIColors 5 Beautiful set of color palettes in various flavours Adobe Color 3 Create color palettes, extract gradients from images, etc Colorsinspo 2 All-in-one resource for finding everything about colors Happyhues 2 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 6 Discover current color trends in different industries from the creative communities on Behance and Adobe Stock Color Hunt 1 A free and open platform for color inspiration with thousands of trendy hand-picked color palettes Gradient Hunt 5 A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients Web Gradients 8 A free website to find good css gradients ColorBox 1 A free website to produce color set CSS gradient 6 A free website to make custome gradient and some examples of gradient gradienta 2 A pure css and jpg gradients UI Gradients 3 UI gradients color generator Palette Generator 2 Generate new color palette with every spacebar press Material Palettes 1 1000+ Material Design palettes Grabient 2 Gradient Selector ShadeSwash 2 Quickly generate shades of any color BrandColors 2 The biggest collection of official brand color codes BRAND PALETTES 4 Logo Color Codes and Palettes ColorSpace 2 Generate color palettes from one color Material Design Palette Generator 3 Generate theme and color palette Material Design-like Colorate 1 Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. 0to255 1 A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. Gradient Buttons 5 Ready to use copy/paste gradient buttons Khroma 3 Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. whocanuse 1 A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. Colorable 1 Color combination contrast tester Color Hex Picker 1 Tool to get hex code along with name of the color. Saruwakakun 2 The stunning color scheme for website & App Designs with previews Paletton 3 Paletton.com is a designer color tool designed for creating color combinations that work together well.Colorzilla 2 A powerful online photoShop-like CSS gradient editor Image Color Picker 1 Image color picker and palette generator CombineCOLORS 1 Color mixing tool
↥ Back To Top 18
Icons
Resources for Icons including png, svg and more
Website Description UXWing 21 Well Optimized, Free icons for commercial use Shapedfonts Iconclub 18 8000+ free icons Feather Icons 2 Beautiful, customizable open source icons Tabler Icons 3 470+ highly customizable open source SVG icons Simple Icons 6 1307 Free SVG icons for popular brands Instant Logo Search 8 thousands of free brands logos ( SVG – PNG ) Linear Icons 3 1000+ Ultra crisp vector icons Entypo 3 411 carefully crafted premium pictograms by Daniel Bruce Icons8 5 Free icons, photos, vectors and tools Flat Icon 5 The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats The Noun Project 3 Over 2 Million curated icons, created by a global community Iconscout 2 Free Download Icons illustrations stock photos at one place Nucleo App 2 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 2 Free Icons PNG, ICO, ICNS and Vector file SVG Bootstrap Icons 4 Free Icons built for Bootstrap but they’ll work in any project Remix Icon 1 Simply Delightful Icon System Iconmonstr 1 Discover 4496+ free icons in 313 collections Vivid.js 1 Ready to use Free and Open Source SVG Icons Pack JavaScript Library. Iconfinder 4 Free and premium vector icons in SVG, PNG, CSH and AI format Lordicon 1 50 free animated interactive icons UseAnimations 6 Free Animated Icons in SVG and Json Format(for lottie) css.gg 2 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API SVGPorn 8 1000+ high-quality SVG logos Payment System Logos Logos for payment systems available in png and svg Browser Logos 2 High resolution web browser logos IconBros 7843+ free icons grouped in 182 collections LogoHub 2 Generate and download your logo for free in PNG and SVG format Material Design Icons 3 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 1 Free, open source icons from the creators of Tailwind CSS. Zondicons 1 A set of free premium SVG icons for you to use on your digital products. Endless Icons 1 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 3 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 3 2000+ Essential Line Icons for Designers and Developers
↥ Back To Top 18
Favicons
Resources for Favicons
Website Description Favicon.io 11 Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats Favicon Generator 2 Generate favicon ico files for your website RealFaviconGenerator 3 Generate icons for all platforms (Windows, iOS, Android) FontIcon 2 Generate favicons and images from Font Awesome icons
↥ Back To Top 18
Icon Fonts
Resources for Icon Fonts
Website Description Font Awesome 4 The web’s most popular icon set and toolkit Line Awesome 1 Swap in replacement of Font Awesome with modern line icons Material Icons Material design icon library IonIcons 1 Beautifully crafted open source icons from Ionic team Zurb Foundation Icons Customizable Foundation icons Fontisto Icons 1 Fontisto the iconic font and css toolkit · 616+ free icons Boxicons 1 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 2 The icon font from Visual Studio Code Devicon Devicon is a set of icons representing programming languages, designing & development tools PaymentFont 2 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 2 Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg Fontello 1 200+ web icons where you can customize the names or codes of icons. Linea 1 Linea: Featuring 750+ Free Icons
↥ Back To Top 18
Stock Photos
Websites that offer free stock photos of all kinds for your websites and apps
↥ Back To Top 18
Stock Videos
Websites that offer free stock videos of all kinds for your websites and apps
Website Description Pexels 8 Largest library of free to use videos, donated by the community Pixabay 2 Large library of free to use videos, donated by the community similar to Pexels Coverr.co 6 Beautiful free stock video footage Videezy 4 Free HD stock footage & 4K videos Mix Kit 2 Stock video clips & music Life Of Vids 4 Free video clips and loops Videvo 8 Free and premium stock videos
↥ Back To Top 18
Stock Music & Sound Effects
Websites that offer free stock music and/or sound effects
Website Description Free Stock Music 6 Royalty free stock music for YouTube videos, podcasts, etc Bensound 3 Download Royalty Free Music for free and use it in your project Mixkit 3 Free music for your projects Freesound 2 Free stock music and sounds Free Music Archive 1 Collaborative database of creative-commons licensed sound for musicians and sound lovers Musopen 2 An online copyright free classical music library Unminus 3 Free Premium Music for Your Projects
↥ Back To Top 18
Vectors & Clip Art
Free vectors, clipart, illustrations, patterns and more
Website Description Vecteezy 7 Find and download free vector art Freepik 9 Free vectors, stock photos, PSD and icons Free Vectors 6 Community of vector lovers who share free vector graphics PNGTree 9 png, backgrounds, templates, text effects Vector4Free 3 Free vector graphics Retro Vectors 2 Vintage vectors and graphics Freeble Vectors, patterns, mockups and more Lukaszadam 3 Free Vector atrworks Illlustrations 33 Beautiful 100 Illustrations – png, svg Clipart 6 Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! Growwwkit illustrations 5 A set of 8 simple, black & white, stylish illustrations World Vector Logo 4 Download vector logos of brands you love trianglify.io 3 Generate low-poly backgrounds, textures, and vectors blob 2 Generate Blob shapes for Web and Flutter apps HiClipart 6 A community for designers to share & download transparent background PNG cliparts
↥ Back To Top 18
Product & Image Mockups
Create mockups of devices and other products
Website Description Smart Mockups 18 Create stunning product mockups (free & premium) Shot Snap 6 Create beautiful device mockup images for your app or website design Screely 4 Instantly turn your screenshot into a mockup Screen Peak 5 Create a mockup from a URL Mockup World 7 The biggest source of free photo-realistic Mockups online Collab Shot 2 Real-time screen grabs and image sharing Facebook Devices 1 Images and Sketch files of popular devices Threed.io 8 Generate 3D mockups right in your browser. Mockuphone 3 100% 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
↥ Back To Top 18
CSS Frameworks
CSS/UI frameworks to help build great looking websites and applications
Website Description Tailwind CSS 6 Low level, utility-first framework Bootstrap 3 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 1 Light framework based on Material Design. No JS dependency Bulma 5 Modern CSS framework with no JS Skeleton 4 Extremely light framework for basic UI elements Semantic UI 2 Empowers designers and developers by creating a shared vocabulary for UI Fomantic UI 1 A community fork of Semantic-UI Foundation Mobile first framework with clean markup Pure CSS 1 A set of small, responsive CSS modules UIKit 2 Lightweight and modular front-end framework Susy 3 Lightweight, grid-layout engine for Sass Milligram.io 1 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 1 A micro (~3kb) CSS framework Blueprint CSS 1 A lightweight layout library for building great responsive mobile first UIs that work everywhere W3.CSS 1 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 1 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 1 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 2 Framework7 – 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
Website Description Animate.css 14 Just-add-water CSS animations Bounce.js 6 Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations Anime.js 5 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 9 Animations has been one of the most impressive animation libraries available Zdog 3 Round, flat, designer-friendly pseudo-3D engine for canvas & SVG CSShake 3 CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page Hover.css 12 Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website AniJS 4 AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure Animista 4 CSS Animations On Demand Tachyons-animate 2 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 5 Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications Infinite 5 These animations, like rotations and pulses, that are specifically designed to run and repeat forever OBNOXIOUS.CSS 2 Animations for the strong of heart, and weak of mind MOTION UI 6 A 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
Website Description Greensock 9 A JavaScript library for building high-performance animations that work in every major browser Velocity.js 5 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 2 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 5 Animate on scroll library to reveal animations when You scroll. Tilt.Js 2 A 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
Website Description TagFold 11 Useful Bootstrap 4, HTML5, CSS3 Code Snippets to Build Web Layouts UILang 1 A minimal, ui-focused programming language for web designers Medialoot CSS Components 3 Calendars, price grids and other UI components Froala Design Blocks 6 Over 170 responsive design blocks ready to be used in your web or mobile apps Material Design For Bootstrap 1 Open source toolkit for building material design with Bootstrap Photonkit Desktop UI library for Electron Flat UI 2 Minimal free user interface kit Shards A free and modern UI toolkit for web makers based on Bootstrap Creative Tim 4 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 4 CSS spinners collection with Vue.js integration. Loading.io 1 Online service provider for creating simple animations, spinners, progress bar and more Moving Letters 2 Animated Text with JavaScript and anime.js CSS Layout 2 A collection of popular web layouts and patterns in pure CSS Codyhouse Kick-start your web projects with CodyHouse’s front-end framework and library of accessible HTML, CSS, JavaScript components Tailwind Starter Kit 1 Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source Tailwindtoolbox 1 Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. tailwindcomponents 1 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 1 A 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
Website Description Material UI 7 React components for faster and easier web development, based on Material Design Chakra UI 3 Build accessible React apps & websites with speed. Openchakra 2 React Bootstrap 1 Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript ReactStrap 1 Another Bootstrap UI library for React React Admin 1 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 2 UI components based off of the Semantic UI framework Shards React 2 React UI kit featuring a modern design system with dozens of custom components React Virtualized 1 UI set for data. Includes tables, lists, sorting, etc. React Toolbox Material design UI library for React Elastic UI 2 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 Onsen React 2 Distributes Components for hybrid mobile apps with React and Onsen UI Evergreen 1 Design system for React Rebass 1 React primitive UI components built with styled system Grommet mobile first UI component library Rimble 1 React design kit, library and guides Landing Page Template 4 Open source landing page template for react Elemental UI 1 A UI Toolkit for React.js Websites and Apps Ant Design 5 Open source design React ui library. 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 1 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
↥ Back To Top 18
Vue UI
UI and component libraries for the Vue JavaScript framework
Website Description Vuetify 2 Material design component framework Bootstrap Vue 2 Use Bootstrap components with Vue Buefy 1 Lightweight UI components based on Bulma Quasar 1 High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions Element 1 Desktop UI library for Vue Fish UI 1 Vue UI toolkit for the web Keen UI 1 VueUI library with a simple API, inspired by Google’s Material Design Onsen Vue 3 Distributes Components for hybrid mobile apps with Vue and Onsen UI Vuejsexamples 3 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 1 A 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
Website Description Material Angular 2 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
↥ Back To Top 18
Svelte UI
UI and component libraries for the Svelte Javascript compiler
↥ Back To Top 18
Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
Website Description Material Design 6 Google’s Material Design Ant Design 5 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 1 Design system, guides and React component library Bolt Robust Twig and web component powered UI components Clarity Design System 1 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 1 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 1 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 1 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 1 A directory of 500+ styleguides Done Design System 1 Open source design system, guides & components Skoda Brand System 1 Design guideline for developing applications under the Skoda brand Spectrum 1 Adobe’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
Website Description Figma 7 Online graphic design tool (Free & paid options) Vectr 3 Free vector graphics software Canva 2 Create beautiful designs (Free & Paid) Get Waves 1 A free SVG wave generator to make unique SVG waves for web design Clippy 1 Easy CSS clip-path maker Fancy Border Radius 1 Eight values specifying border-radius in CSS ( border-radius generator ) Wireframe.cc 1 Wireframing tool (free & paid) Fotor 3 Photo editor and design maker Pixlr 2 Online photo editor Animoto Video Maker 1 Make videos online RemoveBG Remove image backgrounds Photo Creator 2 Create your own photos instead of searching for stock Visme 1 Create presentations, infographics and more Infogram Create infograms ChartGo Create charts and graphs online Cartoon Photo 5 Turn photos into cartoons Logo Maker 5 Create custom logos Whimsical Wireframes, diagrams and more (4 free) Whiteboard Online drawing tool Octopus 1 Sitemap builder CTA Button Maker 2 Create call to action buttons Blobmaker 1 Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes Personas 2 A playful avatar generator for the modern age SoftUI A Soft UI (neumorphism) CSS generator Photopea 1 A Online Photoshop editor Excalidraw Virtual whiteboard for sketching hand-drawn like diagrams Diagrams 1 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 Webflow 2 Break the code barrier, Build better business websites, faster. Without coding. Trace 1 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 1 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 1 Website 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
↥ Back To Top 18
Design Inspiration
Here are some websites to get inspiration for design and UI
Website Description Behance 7 Design projects featured by different creators Dribbble 5 Design projects featured by different creators Httpster 10 Showcases websites made by people from all over the world Microcopy Inspirations 7 Curated collection of UX writing examples, microcopy examples and copywriting examples Inspofinds Latest design work from designers and the design community Design Notes 1 Free online resource library for product designers Land Book 3 Displays a large collection of websites to help find inspiration Frontend Mentor 2 Real-world UI Challenges using HTML, CSS and Javascript Awwwards 6 A website that rate and collects the best websites in the world in UI Codrops 2 A website that collects the best UI ideas and patterns and make tutorials of it SaaS Landing Page 3 Discover the best landing page examples created by top-class SaaS companies Pages.xyz 4 Curate and discover the best designed web pages UI Movement 4 UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs lapa ninja 5 Best landing page inspiration Freefrontend 3 Free front end design from css html and javascript. latest work some design part Webframe 1 Discover and be inspired by beautiful webapp designs Collect UI 6 Daily inspiration collected from daily ui archive and beyond. Hand picked, and updating daily. Graphic Burger 2 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 2 A site offering users a ton of company e-mails from customer service to marketing. Free Design Resource 5 A site offering fonts, mockups, templates graphics and ui kits. Site Inspire 2 siteInspire is a showcase of the finest web and interactive design. Web Design Inspiration 3 A site for web design inspiration, updated daily. NavNav 1 Responsive navigation examples
↥ Back To Top 18
Image Compression
Websites that allow you to compress large images
Website Description TinyPNG 2 Smart PNG and JPEG compression Optimizilla 1 Online JPEG and PNG optimizer / compressor with settings and archive download Compressor.io 1 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 1 Compress JPEG images with size even greater than 5MB CompressNow 1 JPEG, GIF, PNG Compression Promo Image Resizer 1 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
↥ Back To Top 18
Others
Website Description everysize.kibalabs.com 12 Check your awesome responsive webpage looks great in every size Devhints.io 6 This is a modest collection of cheatsheets on Internet The Web Toolbox 5 A collection of handy, free-to-use tools for web developers, programmers and designers. WebDevTrick 6 A famous blog for many amazing HTML, CSS, JQuery designs. css-tricks 5 Free CSS tricks and some unique ideas for beginners and advanced Material Design Resizer 1 An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet Nodesign.dev 6 A collection of tools for developers who have little to no artistic talent A11ygator 3 A web tool to scan websites against WCAG rules Commitizen 1 Command line tool to formatted commit messages according to the standards CleanCss 2 Tool For Code Foramtter, Minifier, File Converter Tiny helpers 3 A collection of free single-purpose online tools for web developers CSS Ribbon Generator 1 This generator will assist in creating a pure CSS corner ribbon. Can I Use 1 Check cross-browser compatibility of frontend technologies. kangax-js-compat-table 1 Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile). mydevice.io 2 Most commonly used device resolutions including phones and tablets Codepen 3 Build, test and discover frontend code. Responsively 2 A tool for designers and frontend developers to design and debug their in all platforms with ease html2pdf.js 2 Client-side HTML-to-PDF rendering using pure JS. CSS Reference 6 A collection of all css properties and definitions in detail
Related
Royalty Free. Cleared for YouTube.