Made with ❤️ by Fawzi // fawzi@designgems.co
A hand-selected collection of 200+ free tools and resources for designers
👉 Submit a tool or resourceAll

1loc
The most useful JavaScript one-liners

3D Bay
Free 3D stock images by CloudDevs

404 Illustrations
Royalty free illustrations for 404 error pages

98.css
A design system for building faithful recreations of old UIs

A11y Text on Background Image
Foreground color accessibility on a background image.

A11ygator
Check if your website is WCAG compliant

Absurd Design
Free surrealist illustrations

Adobe Color Palette Generator
Create color palettes with the color wheel or image, browse thousands of color combinations

Alt Text Tester
Ensure all your images have alt text for better accessibility

ANDI
Test your web content for accessibility

Animate.css
Just-add-water CSS animations

anime.js
Easy JavaScript animations

Animockup
Free animated mockup maker

Anthony Boyd Graphics
Free mockup textures

Apple Widgets UI Kit
UI Kit for Apple Widgets in Figma.

Archetype
Create beautiful web typography designs

Artboard Manager
Automatically arrange your Sketch Artboards into rows & columns

Avataaars
Create avatar illustrations in Sketch. Combine clothes, hair, emotions, accesories, and colors.

axe-coconut
Chrome extension to check web accessibility

Baymard E-Commerce Page Designs
E-Commerce page design examples with annotated research findings from Baymard.

BehaviourKit
Behavioural science content, insights and tools for creative professionals

Better Google Fonts Finder
Find great Google Fonts based on visual characteristics

Bézier Game
A game to help you master Beziér curves

Black Illustrations
Beautiful and free illustrations of black people for your next digital project

Blobs
Generate beautiful blob shapes for web and flutter apps

Blush
Create, mix, and customize illustrations made by artists around the world

Booklets.io
Browse hundreds of booklets on design, business, freelancing & more. Learn new skills & insights, fast.

BrandColors
The biggest collection of official brand color codes around

Brandfetch
The brand search engine. Easily search brand assets from across the internet.

Bulbman.art
Free illustrations for designers by a father and son artistic team

Bulma
Free, open source CSS framework based on Flexbox

Can’t Unsee
A simple game to test your Design skills

Case Study Club
Curated UX case study gallery

Charco Illustrations
A set of 16 handcrafted illustrations for your web & app projects

Charts
Figma plugin to generate charts that can be added and edited within your document

Checklist Design
A collection of the best design practices.

Cleanmock
Mockup your designs simply and beautifully

Color Blind
Figma plugin to view your designs in the 8 different types of color vision deficiencies

Color by Cloudflare
Create color palettes and apply color blindness filters

Color Copy Paste
Copy & paste colour directly from your camera to Figma, Sketch, or your browser

Color Hunt
Free and open platform for color inspiration with thousands of trendy hand-picked color palettes

Color Oracle
Color blindness simulator for Windows, Mac and Linux

color x color
A tool to generate color shades using the HSLuv color space

Colorable
Find safe color combinations with predefined colors and check pass/fail scores for the WCAG accessibility guidelines.

Colorblind Webpage Filter
Apply color blindness filters to any URL

ColorKit
Generate color scales by mixing the shades between two colors. Enter a start and end color, and choose the number of blend steps, to reveal the stepped gradient.

Colors & Fonts
Find colors and typography combinations ready to copy paste in one click

Colors UI
Free color palette tool

colors.lol
Overly descriptive color palettes

ColorShark
Test color contrast compliance with the WCAG as set forth by the W3C.

ColorSlurp
Mac app that lets you pick colors from anywhere on your screen with the magnifier

Contra Wireframe Kit
A starter wireframe kit for quick design and prototyping your idea. Works with Figma, Sketch, XD, and Invision Studio.

Contraste
Mac app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG)

Coolors.co
Create the perfect palette or get inspired by thousands of beautiful color schemes.

CSS-Tricks
Tutorials and articles to help you become a master of HTML, CSS, and JavaScript

CSS.gg
Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API.

CSSBattle
Use your CSS skills to replicate targets with smallest possible code.

cssgradient.io
Create CSS gradient backgrounds and learn about gradients through technical articles and real-life examples

Culrs
A simple and smart approach to create your color palette

Dark CSS Generator
Generate dark mode CSS for your site in one click

Dash Illustrations
A set of well-crafted illustrations which includes categories like AI, Blockchain, Analytics, E-commerce, Security, and more.

Delesign
Royalty-free illustrations for your projects

Design and Code in Framer X
Create powerful design and code components for your app and design system in Framer X. By Design+Code.

Design Better by Invision
Essential reading on the practices that propel the best design teams forward.

Design Disruptos
A documentary from Invision about the transformational power of design.

Design Kit
IDEO.org's platform to learn human-centered design, a creative approach to solving the world's most difficult problems

Design Principles
An open source collection of Design Principles and methods.

Design Systems in Figma
Complete guide to designing a site using a collaborative and powerful design system in Figma. By Design+Code.

Dimensions.guide
Reference database of the standard measurements and sizes of the everyday objects and spaces that make up our world.

dpi.lv
DPI values for every smartphone, tablet, and laptop

Drawing Humans
Learn how to draw the human body and all it's variations in this series aimed at beginners

DrawKit
Beautiful free vector illustrations

Eagle
A new way to collect, search and organize your image files in a logical way and all in one place

Empathy Prompts
Prompts to consider when making things for others to use

Eva Icons
480 beautifully crafted Open Source icons for common actions and items

Evericons
460+ well-crafted icons for your next project. Free for personal and commercial usage.

Facebook Design
Mockups and other resources from Facebook Design

Favicon.io
Quickly generate your favicon from text, image, or choose from hundreds of emojis

Feather
280+ icons with customizable size, stroke width, and color

Filters.css
CSS only library to apply color filters.

Font Awesome
Get vector icons and social logos on your website with the web's most popular icon set and toolkit.

Font Combinations
Find the perfect font combination for your design project

Font Generator
Generate unique font pairings from Google Fonts

Font in Logo
A search engine to find fonts being used in world-famous logos and brands

FontPair
An extensive library of font pairings using Google Fonts

Fonts In Use
An independent archive of typography

FontSpark
Discover better fonts

Ghost Illustrations
Uncomplicated and smooth illustrations

Gifski
Convert videos to high-quality GIFs

Glaze
Free illustrations, for everything

Grabient
Beautiful and simple UI for generating web gradients

Gradienta
Multicolor gradients that can be downloaded in pure CSS or in JPG

Gramara
The AI-powered Grammar Checker

Graphic Design Basics by Canva
Learn Graphic Design basics with this introductory course by Canva

Graphic Design Basics: Visual Design
Learn the core principles of visual design

Growth Design
Growth & UX case studies in a comic book format.

Hack Design
Weekly design lessons in your inbox

Happy Hues
A color palette inspiration site

Hatchful by Shopify
Create stunning logos in seconds

Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Hex Naw
Test entire palettes or color systems for contrast and accessibility

High Resolution
25 interviews with 25 designers working at companies like Google, Facebook, Microsoft, Airbnb, and more.

How to Center in CSS
An easy-to-use code generator for centering in CSS

htmldom.dev
Common HTML DOM with vanilla JavaScript

HueSnap
Create beautiful color palettes to share and inspire others

Humaaans
Mix-&-match illustrations of people with a design library

IconBros
9000+ free icons grouped in 200+ collections

iconmonstr
4400+ free icons in 300+ collections

Icons8
Free icons, photos, vectors, and music

Illlustrations.co
Open source illustrations kit

Inclusive Design by Microsoft
Inclusive Design resources, toolkits, and booklets from Microsoft Design

Indian Doodle Illustration Pack
Beautiful and free doodles of characters in Indian clothing

Interfacer
High quality mockups and other design resources

Intro to the Design of Everyday Things
This course provides a summary of key concepts from the first two chapters of The Design of Everyday Things by Don Norman.

Ionicons
Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font.

IRA Design
Build your own amazing illustrations

Isometric Love
Isometric objects for your design projects. Free for non-commercial use.

Keyframes
Write better CSS with a suite of tools to create CSS Keyframes animations, shadows, colors, and more

Laws of UX
aws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.

Line Awesome
An icon set that can easily replace your Font Awesome icons with really neat and modern line icons

ls.graphics
Free library of mockups for digital devices and physical products

Lukasz Adam Illustrations
Free illustrations, created every week

ManyPixels
Free monochromatic, isometric, two-color, and flatline illustrations

Materialize.css
A modern responsive front-end framework based on Material Design

Meta Tags
Generate meta tags and preview how your webpage will look on Google, Facebook, Twitter and more!

Milanote
Flexible visual workspace for creating moodboards, storing project information and getting feedback on design concepts

Mixfont
A modern font generator with exportable CSS

Mockup World
The original biggest source of free photo-realistic Mockups online

MVP.css
A minimalist stylesheet for HTML elements. No class names, no frameworks.

Noun Project for Mac
Easily drag and drop icons into your favorite apps

Nucleo App
Desktop app that can be used as an icon library and organizer. Over 29,000 icons available.

Octopus.do
Super fast visual sitemap creator

One Click Theme
Free, handpicked freebies and UI Kits for Sketch, Figma, Adobe XD, InVision, Webflow, and Photoshop

Open Peeps
Hand-drawn illustrations of people

paaatterns
Free collection of beautiful patterns for all vector formats

Palettable
Generate beautiful color palettes using the knowledge of millions of designers.

Paletter
Color schemer and manager app for Mac

Paper Illustrations
Incredible set of paper illustrations absolutely free for both personal and commercial use

PaperSizes
The best resource for International Paper Sizes, Dimensions & Formats

pattern.css
CSS only library to fill your empty background with beautiful patterns.

Phospor Icons
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

Picular
Google, but for colors.

pixeltrue
Free SVG Illustrations and Lottie Animations are available for free for personal and commercial use

Poke Illustrations
A hand-crafted set of empty, error & success illustrations for your web, app & any print projects. Comes in light and dark mode.

POP - Prototyping on Paper
Create interactive low-fidelity prototypes on your iPhone or iPad

Principles of UX Design
Free e-book about the Principles of UX from InVision

PXtoEM
PX to EM conversion made simple.

Random Microcopy Prompts
Get a random microcopy prompt and improve your UX Writing skills

Randoma11y
A fun random accessible color scheme generator

Responsively
Preview your code on all devices all at once

Retroooo Folks!
Vector-based library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw.

Scale by Flexiple
One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!

Scrimba
Learn to code with interactive tutorials

Scripts for Adobe Illustrator
Ready to add scripts written in JavaScript for Adobe Illustrator

ShapeFactory
Simple design tools for everyone: create logos, gradients, and duotone pictures

Shapefest
A massive library of free 3D shapes for all your needs.

Sharpen
Design challenge generator

Shortcuts.design
Every shortcut for designers in one place

Shorthand
Free and open source css framework, that allows you to make unique and modern design without writing any css

Show + Tell
Create presentations in Figma with a single click

Sim Daltonism
The color blindness simulator for iOS and Mac

Sketch Course
Introduction to Sketch Basic Tools

sketchvalley
Hand-drawn free vector illustration resources for your projects

Smash Illustrations
Awesome illustration constructor with colorful and trendy characters

SmoothShadow
Create really smooth shadows by tweaking alpha, offset and blur with individual easing curves.

Snapfont
Live font previews on any webpage

Stark
The suite of integrated accessibility compliance tools for product development teams. Works with Sketch, Figma, and XD.

Stories by Freepik
Free illustrations in 5 different styles

Streamline Icons
The largest icon pack with 30,000+ free icons

Streamline Lab
Over 80 free vector illustrations

Tachyons X-Ray
Toggle a background grid on any webpage which can help you line elements up vertically and horizontally with each other.

Tailwind CSS
Highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs

Texture.js
SVG patterns for Data Visualization

The A11Y Project
A community-driven effort to make web accessibility easier.

The Design Thinking Workshop Kit
A free design thinking workshop kit by Marvel, includes a presentation deck, facilitator guide, and workbook.

The League of Moveable Type
The original, the first, the open-source font foundry.

The Noun Project
Free icons for everything

The User Testing Field Guide
Free eBook by Marvel that gives you a step-by-step guide and template pack to help start your first usability test

Threed
Generate 3D Mockups right in your Browser

Type Anything
Simple tool to create great font combinations

Type Scale
A visual type scale calculator

UI Store
Free UI resources for every design tool

UI8
400+ design freebies including UI Kits, Icons, Wireframes, etc.

unDraw
Free illustrations with customizable colors

unscreen
Remove video backgrounds

Unsplash
The internet’s source of freely-usable images. Powered by creators everywhere.

urspace
Dynamic and robust portfolio builder

User Experience by accenture
Learn about why user experience (UX) is important, the research and design basics, and the tools and testing techniques used in UX

Vector Creator
Create engaging custom illustrations

Vector Mockups
Free collection of presentation mockups, compatible with Sketch, Figma, and Photoshop.

WAVE
Web Accessibility Evaluation Tool

WCAG Quick Reference Guide
Quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements and techniques

Web Accessibility by Google
Learn how to make accessible web applications

web.dev
Run an audit on your website to evaluate your site's performance, accessibility, and SEO

Webflow Course
Design and animate a high converting landing page with advanced interactions, payments and CMS

Webflow Ebooks
Free ebooks on responsive web design, freelancing, and more.

WebGradients
Free collection of 180 linear gradients, available in CSS, PNG, Sketch, and Figma formats

Who Can Use
Check if your color combination is accessible

Whoosh Illustrations
Free illustrations, compatible with Sketch, Figma, and XD.

XD Guru
A large collection of free and premium resources for Adobe XD