/design-resources-for-developers

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

MIT LicenseMIT

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

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

Website                            Description
UI Design Daily Awesome UI Components of all types
100 Daily UI Free Figma library of products, elements, and screens
Sketch App Sources Sketch UIs, wireframes, icons and much more
Humaaans Cool illustrations of people with the ability to mix and match
Paaatterns Free collection of beautiful patterns for all vector formats
thepatternlibrary Free beautiful background patterns
Drawkit.io Illustrations for designers and startups
Undraw.co Open-source illustrations for any idea you can imagine and create
Illustration.co Open-source illustrations kit
Opendoodles Free sketchy illustrations
Open Peeps Hand drawn illustration library
UI Space Thousands of great UI freebies
Animations.co Beautiful, customizable animated GIF icons
Uplabs High-quality design resources (Free & Premium)
InvisionApp Library of free, high-quality UI kits, icon packs, and mockups
Speckyboy Article The 10 most popular open source frontend web UI kits
Open Doodles A Free Set of Sketchy Illustrations
Avataaars Free sketch library of avatars illustrations by Pablo Stanley
↥ Back To Top

Fonts

Websites that offer free fonts as well as font based tools

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

Colors

Websites and resources that help with choices related to colors

Website                            Description
Colormind.io Color palette generator
Coolors Color schemes generator
Coolors Trending color palettes
Colors & Fonts A curated library of colors, fonts and resources
Material Palette Free to pick palettes, icons and colors for Material Design
ColorSpace Generate nice color palettes from one color
FlatUIColors Beautiful set of color palettes in various flavours
Adobe Color Create color palettes, extract gradients from images, etc
Colorsinspo All-in-one resource for finding everything about colors
Happyhues Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects by Mackenzie Child
Adobe Trends Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients A free website to find good css gradients
↥ Back To Top

Icons

Resources for Icons including font based, png, svg and more

Website                            Description
Font Awesome The web's most popular icon set and toolkit
Material Icons Material design icon library
Shapedfonts Iconclub 8000+ free icons
Feather Icons Beautiful, customizable open source icons
Tabler Icons 470+ highly customizable open source SVG icons
Simple Icons 1307 Free SVG icons for popular brands
IonIcons Beautifully crafted open source icons from Ionic team
Zurb Foundation Icons Customizable Foundation icons
Linear Icons 1000+ Ultra crisp vector icons
Entypo 411 carefully crafted premium pictograms by Daniel Bruce
Icons8 Free icons, photos, vectors and tools
Flat Icon The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats
Fontisto Icons Fontisto the iconic font and css toolkit · 616+ free icons
The Noun Project Over 2 Million curated icons, created by a global community
Iconsout Free Download Icons illustrations stock photos at one place
Boxicons Boxicons is a free collection of carefully crafted open source icons
Nucleo App Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid)
Icon-icons.com Free Icons PNG, ICO, ICNS and Vector file SVG
Bootstrap Icons Free Icons built for Bootstrap but they'll work in any project
Remix Icon Simply Delightful Icon System
Iconmonstr Discover 4496+ free icons in 313 collections
Vivid.js Ready to use Free and Open Source SVG Icons Pack JavaScript Library.
Iconfinder Free and premium vector icons in SVG, PNG, CSH and AI format
Vivid.js Ready to use Free and Open Source SVG Icons Pack JavaScript Library
Material Palette Free to pick palettes, icons and colors for Material Design]
Lordicon 50 free animated interactive icons
UseAnimations Free Animated Icons in SVG and Json Format(for lottie)
Material Design Iconic Font Material design icon font
Vscode Codicons The icon font from Visual Studio Code
css.gg 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
SVGPorn 1000+ high-quality SVG logos
Payment System Logos Logos for payment systems available in png and svg
Browser Logos High resolution web browser logos
IconBros 7843+ free icons grouped in 182 collections
LogoHub Generate and download your logo for free in PNG and SVG format
Devicon Devicon is a set of icons representing programming languages, designing & development tools
↥ Back To Top

Stock Photos

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

Website                            Description
Pexels Free stock photos shared by talented creators
Unsplash The internet’s source of freely usable images
Pixabay Over 1.7 million+ high quality stock images and videos
Magdeleine Gallery & free high res photo everyday
Picspree Royalty free images, stock photos, illustrations, and vectors
Burst Free stock photos collections
Life of Pix Free high resolution photography
Stock Snap Hundreds of high quality photos added weekly
Morguefile Over 350,000 free stock photos for commercial use
Kaboom Pics Stock photography and color palettes. Good for product images
New Old Stock Stock vintage photos
Pic Jumbo Good collections of different types of photos
Public Domain Pictures Public domain images of all types
Find A Photo Searches multiple stock photo websites
Stockvault Categorized stock photos
Placeholder A free image placeholder service for the web. You can specify image size and format
Realistic Shots Free high resolution stock photos
Negative Space High-Resolution Free Stock Photos
SkitterPhoto Free high resolution photography
PicoGraphy Gorgeous, High-Resolution, Free Photos
Wunder Stock Stunningly amazing free photos
↥ Back To Top

Stock Videos

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

Website                            Description
Coverr.co Beautiful free stock video footage
Videezy Free HD stock footage & 4K videos
Mix Kit Stock video clips & music
Life Of Vids Free video clips and loops
Videvo Free and premium stock videos
↥ Back To Top

Stock Music & Sound Effects

Websites that offer free stock music and/or sound effects

Website                            Description
Free Stock Music Royalty free stock music for YouTube videos, podcasts, etc
Bensound Download Royalty Free Music for free and use it in your project
Mixkit Free music for your projects
Freesound Free stock music and sounds
Free Stock Music Royalty free stock music for YouTube videos, podcasts, etc
Free Music Archive Collaborative database of creative-commons licensed sound for musicians and sound lovers
Musopen An online copyright free classical music library
↥ Back To Top

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website                            Description
Vecteezy Find and download free vector art
Freepik Free vectors, stock photos, PSD and icons
Free Vectors Community of vector lovers who share free vector graphics
PNGTree png, backgrounds, templates, text effects
Vector4Free Free vector graphics
Retro Vectors Vintage vectors and graphics
Freeble Vectors, patterns, mockups and more
Lukaszadam Free Vector atrworks
Illlustrations Beautiful 100 Illustrations - png, svg
Clipart Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection!
↥ Back To Top

Product & Image Mockups

Create mockups of devices and other products

Website                            Description
Smart Mockups Create stunning product mockups (free & premium)
Shot Snap Create beautiful device mockup images for your app or website design
Screely Instantly turn your screenshot into a mockup
Screen Peak Create a mockup from a URL
Mockup World The biggest source of free photo-realistic Mockups online
Collab Shot Real-time screen grabs and image sharing
Facebook Devices Images and Sketch files of popular devices
Threed.io Generate 3D mockups right in your browser.
↥ Back To Top

HTML & CSS Templates

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

Website                            Description
HTML5Up Very modern, unique responsive HTML5/CSS3 themes
Templatemo Minimal, resume, gallery themes and more
Templated.co Tons of minimalistic HTML5/CSS3 themes
FreeHTML5 Free & premium HTML5 and Bootstrap themes
StyleShout Brilliantly crafted free website templates
Start Bootstrap Bootstrap starter themes
Zerotheme HTML5, Bootstrap, Prestashop templates
HTML5xCSS3 Collection of wonderful templates in different categories
Colorlib Almost any category of theme you can think of
Free CSS Huge collection of free templates
Hubspot Templates, infographics, banners and much more
Mobirise Great looking HTML5/CSS3 templates
Bootswatch Free themes for Bootstrap
Onepagelove One page websites, templates and resources
Themes For App Free Bootstrap themes and landing pages
BootstrapTaste Premium & Free Bootstrap Templates
BootstrapMade Elegant, clean and beautiful free templates using Bootstrap.
↥ Back To Top

CSS Frameworks

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

Website                            Description
Tailwind CSS Low level, utility-first framework
Bootstrap Popular UI framework with tons of components that use both CSS and JS
Materialize A modern responsive front-end framework based on Material Design
Material Design Lite Light framework based on Material Design. No JS dependency
Bulma Modern CSS framework with no JS
Skeleton Extremely light framework for basic UI elements
Semantic UI Empowers designers and developers by creating a shared vocabulary for UI
Foundation Mobile first framework with clean markup
Pure CSS A set of small, responsive CSS modules
UIKit Lightweight and modular front-end framework
Susy Lightweight, grid-layout engine for Sass
Milligram.io Minimalist CSS framework
Vanilla Framework Simple, extensible CSS framework written in Sass
Spectre CSS Lightweight, modern CSS framework
Picnic CSS Lightweight and beautiful library
Wing A beautiful CSS framework designed for minimalists
Chota A micro (~3kb) CSS framework
Blueprint CSS A lightweight layout library for building great responsive mobile first UIs that work everywhere
W3.CSS A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library
98.css A design system for building faithful recreations of old UIs
NES CSS NES-style CSS Framework
Shoelace.css Lightweight, forward-thinking CSS library built with future CSS syntax
MVP.css A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you're done
↥ Back To Top

CSS Animations

CSS animations to build awesome animations for websites and applications

Website                            Description
Animate.css Just-add-water CSS animations
Bounce.js Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations
Anime.js Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects
Magic Animations Animations has been one of the most impressive animation libraries available
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
CSShake CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page
Hover.css Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website
AniJS AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure
Animista CSS Animations On Demand
Tachyons-animate Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need
Sequence.js Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications
Infinite These animations, like rotations and pulses, that are specifically designed to run and repeat forever
OBNOXIOUS.CSS Animations for the strong of heart, and weak of mind
MOTION UI A Sass library for creating flexible CSS transitions and animations
Greensock A JavaScript library for building high-performance animations that work in every major browser
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
↥ Back To Top

UI Components & Kits

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

Website                            Description
UILang A minimal, ui-focused programming language for web designers
Medialoot CSS Components Calendars, price grids and other UI components
Froala Design Blocks Over 170 responsive design blocks ready to be used in your web or mobile apps
Material Design For Bootstrap Open source toolkit for building material design with Bootstrap
Photonkit Desktop UI library for Electron
Flat UI Minimal free user interface kit
Shards A free and modern UI toolkit for web makers based on Bootstrap
Creative Tim All types of UI libraries and kits including JS frameworks like React
Brumm Shadow Maker An online tool to make css shadows
SpinKit Simple CSS Spinners
Moving Letters Animated Text with JavaScript and anime.js
CSS Layout A collection of popular web layouts and patterns in pure CSS
Codyhouse Kick-start your web projects with CodyHouse's front-end framework and library of accessible HTML, CSS, JavaScript components
Tailwind Starter Kit Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
Tailwindtoolbox Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project.
tailwindcomponents A free repository for community components using TailwindCSS
↥ Back To Top

React UI

UI and component libraries for the React JavaScript framework

Website                            Description
Material UI React components for faster and easier web development, based on Material Design
Chakra UI Build accessible React apps & websites with speed. Openchakra
React Bootstrap Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
ReactStrap Another Bootstrap UI library for React
React Admin A frontend Framework for building admin applications. Supports API's out of the box
BlueprintJS React-based UI toolkit for the web
React Semantic UI UI components based off of the Semantic UI framework
Shards React React UI kit featuring a modern design system with dozens of custom components
React Virtualized UI set for data. Includes tables, lists, sorting, etc.
React Toolbox Material design UI library for React
Elastic UI Distributes UI React components and static assets for use in building web layouts
React Desktop Desktop styled components in React. Includes MacOS and Windows based components
Onsen React Distributes Components for hybrid mobile apps with React and Onsen UI
Evergreen Design system for React
Rebass React primitive UI components built with styled system
Grommet mobile first UI component library
Rimble React design kit, library and guides
Landing Page Template Open source landing page template for react
Ant Design Open source design React ui library
KendoReact UI for React Developers
PRIMEREACT The ultimate collection of design-agnostic, flexible and accessible React UI Components
Elemental UI A UI Toolkit for React.js Websites and Apps
Ant Design Open source design React ui library.
KendoReact UI for React Developers.
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.
↥ Back To Top

Vue UI

UI and component libraries for the Vue JavaScript framework

Website                            Description
Vuetify Material design component framework
Bootstrap Vue Use Bootstrap components with Vue
Buefy Lightweight UI components based on Bulma
Quasar Build high-performance VueJS user interfaces in record time
Element Desktop UI library for Vue
Fish UI Vue UI toolkit for the web
Keen UI VueUI library with a simple API, inspired by Google's Material Design
Onsen Vue Distributes Components for hybrid mobile apps with Vue and Onsen UI
Vuejsexamples A nice collection of useful vuejs UI components
Inkline Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications
Vuesax Unique and reusable UI components
↥ Back To Top

Angular UI

UI and component libraries for the Angular JavaScript framework

Website                            Description
Material Angular UI library for Angular based on Material design
NG Bootstrap UI library for Angular based on the Bootstrap framework
PrimeNG Powerful UI component library for Angular
Onsen Angular Hybrid mobile and PWA UI library for Angular and Onsen UI
NG Lightning Native Angular components & directives for Lightning Design System
NG Semantic UI library for Angular based on Semantic UI
Nebular Customizable UI Kit, Auth & Security for Angular
Alyle UI Minimal components set for Angular
NGX Bootstrap Another UI library for Angular based on the Bootstrap framework
NG Zorro UI library for Angular based on Ant Design
↥ Back To Top

Svelte UI

UI and component libraries for the Svelte Javascript compiler

Website                            Description
Svelte Material UI UI library for Svelte based on Material Design
SvelteStrap UI library for Svelte based on the Bootstrap framework
Svelte Flat UI UI library for Svelte based on Flat Design
↥ Back To Top

Design Systems & Style Guides

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

Website                            Description
Material Design Google's Material Design
Ant Design Design system for enterprise-level products
Apple Design Resources Guides and templates for using Apple design and UI
Alta UI Oracle's design system and toolkit
Pulse Design system, guides and React component library
Bolt Robust Twig and web component powered UI components
Clarity Design System UX guidelines, HTML/CSS framework, and Angular components
AtlasKit Atlassian's official UI library, built according to the Atlassian Design Guidelines
Audi Design Resources Audi UI design system and toolkit
Carbon Design Systems Carbon is IBM’s open-source design system for products and experiences
Yelp Style Guide Yelp style guide, components and toolkit
Comet Scalable design system of visual language, components, and design assets
ETrade Design System Guides and toolkits that blend finance with simplicity and ease of use
Fundamental Library Open source and community driven project for consistent user interfaces
Infor Design Guidelines and resources to create meaningful experiences for Infor’s products
Lexicon An experience language for crafting beautiful UI
Mailchimp UI/UX Style guide and components from Mailchimp
Marvel Style Guide Set of design principles and components
Microsoft Fluent UI Collection of UX frameworks from Microsoft
Pluralsight Design System Design guide with components for designing with Pluralsight
Polaris Design system that creates great experiences for all of Shopify’s merchants
Mozilla Protocol Protocol is a design system for Mozilla and Firefox websites
SendGrid Style Guide UI library for developing consistent UI/UX at SendGrid
VTEX Styleguide Reusable patterns, components and assets related to product design in VTEX
Rizzo Style guide with UI components, JS components, widgets, etc
Atomize UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.io A directory of 500+ styleguides
↥ Back To Top

Online Design Tools

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

Website                            Description
Figma Online graphic design tool (Free & paid options)
Vectr Free vector graphics software
Canva Create beautiful designs (Free & Paid)
Wireframe.cc Wireframing tool (free & paid)
Fotor Photo editor and design maker
Pixlr Online photo editor
Animoto Video Maker Make videos online
RemoveBG Remove image backgrounds
Photo Creator Create your own photos instead of searching for stock
Visme Create presentations, infographics and more
Infogram Create infograms
ChartGo Create charts and graphs online
Cartoon Photo Turn photos into cartoons
Logo Maker Create custom logos
Whimsical Wireframes, diagrams and more (4 free)
Whiteboard Online drawing tool
Octopus Sitemap builder
Favicon Generator Generate favicon ico files for your website
RealFaviconGenerator Generate icons for all platforms (Windows, iOS, Android)
FontIcon Generate favicons and images from Font Awesome icons
CTA Button Maker Create call to action buttons
Blobmaker Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
Personas A playful avatar generator for the modern age.
SoftUI A Soft UI (neumorphism) CSS generator.
Photopea A Online Photoshop editor.
Excalidraw Virtual whiteboard for sketching hand-drawn like diagrams.
Diagrams Diagram software and Flowchart maker.
MapInSeconds Simple way to visualize your data with a map.
Grid Malven A css grid cheatsheet to reference when creating a css grid.
Blobmaker Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes
Personas A playful avatar generator for the modern age
SoftUI A Soft UI (neumorphism) CSS generator
Photopea A Online Photoshop editor
Excalidraw Virtual whiteboard for sketching hand-drawn like diagrams
Diagrams Diagram software and Flowchart maker
MapInSeconds Simple way to visualize your data with a map
Grid Malven A css grid cheatsheet to reference when creating a css grid
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
↥ Back To Top

Downloadable Design Software

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

Website                            Description
Gimp Free & open source image editor similar to Photoshop
Gravit Designer Free full-featured vector graphic design app that works on ALL platforms
Blender Open source, free animation, 3D modeling, etc.
Raw Therapee Cross-platform raw image processing program
Be Funky Online design program
Krita Sketching and painting program designed for digital artists
Pencil Project GUI prototyping software
Inkscape Powerful free design tool
Adobe XD Free design tool from Adobe
Shapes.so Icons that can be used as code in your projects
Lunacy Sketch for Windows
InVision Studio Free screen designing tool from InVision
↥ Back To Top

Design Inspiration

Here are some websites to get inspiration for design and UI

Website                            Description
Behance Design projects featured by different creators
Dribbble Design projects featured by different creators
Httpster Showcases websites made by people from all over the world
Microcopy Inspirations Curated collection of UX writing examples, microcopy examples and copywriting examples
Inspofinds Latest design work from designers and the design community
Design Notes Free online resource library for product designers
Land Book Displays a large collection of websites to help find inspiration
Frontend Mentor Real-world UI Challenges using HTML, CSS and Javascript
Awwwards A website that rate and collects the best websites in the world in UI
Codrops A website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing Page Discover the best landing page examples created by top-class SaaS companies
Pages.xyz Curate and discover the best designed web pages
UI Movement UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs
↥ Back To Top

Image Compression

Websites that allow you to compress large images

Website                            Description
TinyPNG Smart PNG and JPEG compression
Optimizilla Online JPEG and PNG optimizer / compressor with settings and archive download
Compressor.io JPEG, PNG, GIF, SVG Compression
Squoosh.app Image compression from Google Chrome Labs
BulkResizePhotos Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMG The fastest free web app for easy image modification
SvgOMG Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEG Compress JPEG images with size even greater than 5MB
↥ Back To Top

Others

Uncategorized Stuff

Website                            Description
everysize.kibalabs.com Check your awesome responsive webpage looks great in every size
Devhints.io This is a modest collection of cheatsheets on Internet
↥ Back To Top