design-resources-for-developers

Repository Banner

Please read `contributing guidelines` before submitting new resources.

UI Graphics
Fonts
Colors
Icons
Logos
Favicons
Icon Fonts
Stock Photos
Stock Videos
Stock Music & Sound Effects
Vectors & Clip Art
Product & Image Mockups
HTML & CSS Templates
CSS Frameworks
CSS Methodologies
CSS Animations
Javascript Animation Libraries
Javascript Chart Libraries
UI Components & Kits
React UI Libraries
Vue UI Libraries
Angular UI Libraries
Svelte UI Libraries
React Native UI Libraries
Design Systems & Style Guides
Online Design Tools
Downloadable Design Software
Design Inspiration
Image Compression
Chrome Extensions
Firefox Extensions
AI Graphic Design Tools
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
SVG sine waves	Export perfect sine waves as SVG for your front-end projects
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
404 illustration	Free illustrations for 404 pages
Drawkit.io	Illustrations for designers and startups
Absurd.design	Free surrealist illustrations for designers and developers
Undraw.co	Open-source illustrations for any idea you can imagine and create
Manypixels.co	Monochromatic, Isometric high-quality illustrations
Open Peeps	Hand drawn illustration library
Animations.co	Beautiful, customizable animated GIF icons
InvisionApp	Library of free, high-quality UI kits, icon packs, and mockups
Open Doodles	A Free Set of Sketchy Illustrations
Avataaars	Free sketch library of avatars illustrations by Pablo Stanley
Blush	Free customizable illustrations with Figma Plugin
Hero Patterns	A collection of repeatable SVG background patterns
BEAUBUS Patterns	A set of 150+ free SVG patterns (backgrounds)
IsoFlat	A Free collection of Isometric SVG graphic resources
IRA Design	An open-source gradient illustrations collection by creative tim.
Transparent Textures	A collection of transparent textures background patterns.
icons8.com/illustrations	Vector illustrations to class up your project
Patternico	Seamless Pattern Maker
Freellustrations	Free Background Images for awesome landing Pages
Pixeltrue Illustrations	Free Animated Illustrations
Abstract User Avatar API	API to create simple yet flexible user avatars from user names or emails
sketchvalley	Download free PNG, SVG or AI file .
PatternPad	Free and unlimited unique pattern designs.
Dimensions	Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces
Freebiesbug	Hand-picked resources for web designers and developers, constantly updated.
Flexiple	One new high-quality, open-source illustration each day.
Cool Text	Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work
illustration kit	Premium open source illustrations added daily
Doodad Pattern Generator	Create unique, seamless, royalty-free patterns.
Pattern Monster	A simple online pattern generator to create repeatable SVG patterns
Exemplar	Free Avatar Library for Figma and Sketch
UIBundle	Thousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more.
openby.design	Custom crafted free UI design resources, for personal and commercial projects. No attribution is required.
Design Stripe	Create beautiful illustrations, no design skills needed.
HOLA SVG!	An SVG playground to share SVG stuff.
symu.co	Free templates, UI kits, icon, PSD
Mesh Gradient	Generate & download beautiful mesh gradients.
CSS Shadow Gradients	Generate CSS Gradients For Shadows.
Creatica	Generate unique beautiful and unique Backgrounds and patterns.
Boring Avatars	SVG random, cutely avatars collections
Html to Design	Convert any website into fully editable Figma designs
fffuel	collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds

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 :smirk:
Font Squirrel	Font Squirrel scours the internet for high quality, legitimately free fonts
Font Fabric	A digital type foundry crafting retail fonts and custom typography for various brands
Tiff	A type diff tool that visually contrasts the differences between two fonts
TypeKit Practice	Learn about typography practices
Fontjoy	Generate font pairing in one click
Golden Ratio	Golden Ratio Typography Calculator
FontGet	Has a variety of fonts available to download and sorted neatly with tags
FontPair	Helps you pair Google Fonts together
Font Space	A designer-centered free font website that has quick customizable previews
Abstract Fonts	Fonts free for personal and commercial use
Free Typography	A list of high quality fonts
Leon Sans	A geometric sans-serif typeface made with code
Lexend	A variable font empirically shown to significantly improve reading-proficiency
Fonts for Apple Platforms	Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps
SFWin	San Francisco Fonts for Windows 10 and non-Apple Platform
Font Flipper	Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
Fonts Arena	Free curated fonts
Befonts	High quality fonts for free
Arabic fonts	Arabic fonts for free
FontDrop	Simple and easy way to view the contents of font files
Open Foundry	FREE platform for curated open-source typefaces
Glyphter	Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded
Google Webfonts Helper	A Hassle-Free Way to Self-Host Google Fonts
Rough Font Awesome	When RoughJS meets Font Awesome
FFonts	Stylish fonts for free
Malayalam Fonts	Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC)
Dev Fonts	Find and use the coding fonts for free
Font M	Free font you can download for material coding and design
W Fonts	Download Free fonts
Modern fluid typography editor	Fluid typography is a modern way of approaching responsive typography.
UrbanFonts	A collection of over 8000 free fonts and dingbats
Typespiration	Inspirational font combinations and color palettes
Fontsource	Self-host Open Source fonts in neatly bundled NPM packages.
FontBolt	Discover and generate your favorite fonts from pop culture.
Fontshare	Fontshare is a free fonts service from the Indian Type Foundry (ITF), making quality fonts accessible to all.

Colors

Websites and resources that help with choices related to colors

Website	Description
Colorlab	Create color palette, gradients, color scales, check contrast all in one place.
Color Brewer 2	The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest.
Huetone	A tool to create accessible color systems.
Colormind.io	Color palette generator
ColorCurves.app	Color palette generator that uses curves to generate color palettes
ColorGradient	A free tool to create simple and complex CSS Gradients visually
Coolors	Create the perfect palette or get inspired by thousands of beautiful color schemes
UI Colors	Tailwind CSS color palette generator
HTML Color Codes	Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names
Colors & Fonts	A curated library of colors, fonts and resources
Palette List	Pick 2 colors you like and the tool generates thousands of palettes for you.
Google Material Color Tool	Official Google Material Color Palette Tool
Material Palette	Free to pick palettes, icons and colors for Material Design
ColorSpace	Generate nice color palettes from one color
FlatUIColors	Beautiful set of color palettes in various flavors
Adobe Color	Create color palettes, extract gradients from images, etc.
Colorsinspo	All-in-one resource for finding everything about colors
ColorsWall	Place to store your color palettes and generate palette in one click
Happyhues	Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child
Adobe Trends	Discover current color trends in different industries from the creative communities on Behance and Adobe Stock
Color Hunt	A free and open platform for color inspiration with thousands of trendy hand-picked color palettes
Gradient Hunt	A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients
Web Gradients	A free website to find good CSS gradients
ColorBox	A free website to produce color set
CSS gradient	A free website to make custom gradient and some examples of gradient
gradienta	A pure css and jpg gradients
UI Gradients	UI gradients color generator
Palette Generator	Generate new color palette with every spacebar press
Material Palettes	1000+ Material Design palettes
Grabient	Gradient Selector
ShadeSwash	Quickly generate shades of any color
BrandColors	The biggest collection of official brand color codes
BRAND PALETTES	Logo Color Codes and Palettes
Material Design Palette Generator	Generate theme and color palette Material Design-like
Colorate	Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work.
0to255	A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.
[Color