Made with ❤️ by Fawzi //

Design Gems logo

A hand-selected collection of 200+ free tools and resources for designers

👉 Submit a tool or resource


1loc logo


The most useful JavaScript one-liners

3D Bay logo

3D Bay

Free 3D stock images by CloudDevs

404 Illustrations logo

404 Illustrations

Royalty free illustrations for 404 error pages

98.css logo


A design system for building faithful recreations of old UIs

A11y Text on Background Image logo

A11y Text on Background Image

Foreground color accessibility on a background image.

A11ygator logo


Check if your website is WCAG compliant

Absurd Design logo

Absurd Design

Free surrealist illustrations

Adobe Color Palette Generator logo

Adobe Color Palette Generator

Create color palettes with the color wheel or image, browse thousands of color combinations

Alt Text Tester logo

Alt Text Tester

Ensure all your images have alt text for better accessibility

ANDI logo


Test your web content for accessibility

Animate.css logo


Just-add-water CSS animations

anime.js logo


Easy JavaScript animations

Animockup logo


Free animated mockup maker

Anthony Boyd Graphics logo

Anthony Boyd Graphics

Free mockup textures

Apple Widgets UI Kit logo

Apple Widgets UI Kit

UI Kit for Apple Widgets in Figma.

Archetype logo


Create beautiful web typography designs

Artboard Manager logo

Artboard Manager

Automatically arrange your Sketch Artboards into rows & columns

Avataaars logo


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

axe-coconut logo


Chrome extension to check web accessibility

Baymard E-Commerce Page Designs logo

Baymard E-Commerce Page Designs

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

BehaviourKit logo


Behavioural science content, insights and tools for creative professionals

Better Google Fonts Finder logo

Better Google Fonts Finder

Find great Google Fonts based on visual characteristics

Bézier Game logo

Bézier Game

A game to help you master Beziér curves

Black Illustrations logo

Black Illustrations

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

Blobs logo


Generate beautiful blob shapes for web and flutter apps

Blush logo


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

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

BrandColors logo


The biggest collection of official brand color codes around

Brandfetch logo


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

Free illustrations for designers by a father and son artistic team

Bulma logo


Free, open source CSS framework based on Flexbox

Can’t Unsee logo

Can’t Unsee

A simple game to test your Design skills

Case Study Club logo

Case Study Club

Curated UX case study gallery

Charco Illustrations logo

Charco Illustrations

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

Charts logo


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

Checklist Design logo

Checklist Design

A collection of the best design practices.

Cleanmock logo


Mockup your designs simply and beautifully

Color Blind logo

Color Blind

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

Color by Cloudflare logo

Color by Cloudflare

Create color palettes and apply color blindness filters

Color Copy Paste logo

Color Copy Paste

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

Color Hunt logo

Color Hunt

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

Color Oracle logo

Color Oracle

Color blindness simulator for Windows, Mac and Linux

color x color logo

color x color

A tool to generate color shades using the HSLuv color space

Colorable logo


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

Colorblind Webpage Filter logo

Colorblind Webpage Filter

Apply color blindness filters to any URL

ColorKit logo


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 logo

Colors & Fonts

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

Colors UI logo

Colors UI

Free color palette tool logo

Overly descriptive color palettes

ColorShark logo


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

ColorSlurp logo


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

Contra Wireframe Kit logo

Contra Wireframe Kit

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

Contraste logo


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

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

CSS-Tricks logo


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

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

CSSBattle logo


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

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

Culrs logo


A simple and smart approach to create your color palette

Dark CSS Generator logo

Dark CSS Generator

Generate dark mode CSS for your site in one click

Dash Illustrations logo

Dash Illustrations

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

Delesign logo


Royalty-free illustrations for your projects

Design and Code in Framer X logo

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 logo

Design Better by Invision

Essential reading on the practices that propel the best design teams forward.

Design Disruptos logo

Design Disruptos

A documentary from Invision about the transformational power of design.

Design Kit logo

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

Design Principles logo

Design Principles

An open source collection of Design Principles and methods.

Design Systems in Figma logo

Design Systems in Figma

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

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

DPI values for every smartphone, tablet, and laptop

Drawing Humans logo

Drawing Humans

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

DrawKit logo


Beautiful free vector illustrations

Eagle logo


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

Empathy Prompts logo

Empathy Prompts

Prompts to consider when making things for others to use

Eva Icons logo

Eva Icons

480 beautifully crafted Open Source icons for common actions and items

Evericons logo


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

Facebook Design logo

Facebook Design

Mockups and other resources from Facebook Design logo

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

Feather logo


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

Filters.css logo


CSS only library to apply color filters.

Font Awesome logo

Font Awesome

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

Font Combinations logo

Font Combinations

Find the perfect font combination for your design project

Font Generator logo

Font Generator

Generate unique font pairings from Google Fonts

Font in Logo logo

Font in Logo

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

FontPair logo


An extensive library of font pairings using Google Fonts

Fonts In Use logo

Fonts In Use

An independent archive of typography

FontSpark logo


Discover better fonts

Ghost Illustrations logo

Ghost Illustrations

Uncomplicated and smooth illustrations

Gifski logo


Convert videos to high-quality GIFs

Glaze logo


Free illustrations, for everything

Grabient logo


Beautiful and simple UI for generating web gradients

Gradienta logo


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

Gramara logo


The AI-powered Grammar Checker

Graphic Design Basics by Canva logo

Graphic Design Basics by Canva

Learn Graphic Design basics with this introductory course by Canva

Graphic Design Basics: Visual Design logo

Graphic Design Basics: Visual Design

Learn the core principles of visual design

Growth Design logo

Growth Design

Growth & UX case studies in a comic book format.

Hack Design logo

Hack Design

Weekly design lessons in your inbox

Happy Hues logo

Happy Hues

A color palette inspiration site

Hatchful by Shopify logo

Hatchful by Shopify

Create stunning logos in seconds

Heroicons logo


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

Hex Naw logo

Hex Naw

Test entire palettes or color systems for contrast and accessibility

High Resolution logo

High Resolution

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

How to Center in CSS logo

How to Center in CSS

An easy-to-use code generator for centering in CSS logo

Common HTML DOM with vanilla JavaScript

HueSnap logo


Create beautiful color palettes to share and inspire others

Humaaans logo


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

IconBros logo


9000+ free icons grouped in 200+ collections

iconmonstr logo


4400+ free icons in 300+ collections

Icons8 logo


Free icons, photos, vectors, and music logo

Open source illustrations kit

Inclusive Design by Microsoft logo

Inclusive Design by Microsoft

Inclusive Design resources, toolkits, and booklets from Microsoft Design

Indian Doodle Illustration Pack logo

Indian Doodle Illustration Pack

Beautiful and free doodles of characters in Indian clothing

Interfacer logo


High quality mockups and other design resources

Intro to the Design of Everyday Things logo

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 logo


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

IRA Design logo

IRA Design

Build your own amazing illustrations

Isometric Love logo

Isometric Love

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

Keyframes logo


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

Laws of UX logo

Laws of UX

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

Line Awesome logo

Line Awesome

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

Free library of mockups for digital devices and physical products

Lukasz Adam Illustrations logo

Lukasz Adam Illustrations

Free illustrations, created every week

ManyPixels logo


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

Materialize.css logo


A modern responsive front-end framework based on Material Design

Meta Tags logo

Meta Tags

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

Milanote logo


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

Mixfont logo


A modern font generator with exportable CSS

Mockup World logo

Mockup World

The original biggest source of free photo-realistic Mockups online

MVP.css logo


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

Noun Project for Mac logo

Noun Project for Mac

Easily drag and drop icons into your favorite apps

Nucleo App logo

Nucleo App

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

Super fast visual sitemap creator

One Click Theme logo

One Click Theme

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

Open Peeps logo

Open Peeps

Hand-drawn illustrations of people

paaatterns logo


Free collection of beautiful patterns for all vector formats

Palettable logo


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

Paletter logo


Color schemer and manager app for Mac

Paper Illustrations logo

Paper Illustrations

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

PaperSizes logo


The best resource for International Paper Sizes, Dimensions & Formats

pattern.css logo


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

Phospor Icons logo

Phospor Icons

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

Picular logo


Google, but for colors.

pixeltrue logo


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

Poke Illustrations logo

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 logo

POP - Prototyping on Paper

Create interactive low-fidelity prototypes on your iPhone or iPad

Principles of UX Design logo

Principles of UX Design

Free e-book about the Principles of UX from InVision

PXtoEM logo


PX to EM conversion made simple.

Random Microcopy Prompts logo

Random Microcopy Prompts

Get a random microcopy prompt and improve your UX Writing skills

Randoma11y logo


A fun random accessible color scheme generator

Responsively logo


Preview your code on all devices all at once

Retroooo Folks! logo

Retroooo Folks!

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

Scale by Flexiple logo

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 logo


Learn to code with interactive tutorials

Scripts for Adobe Illustrator logo

Scripts for Adobe Illustrator

Ready to add scripts written in JavaScript for Adobe Illustrator

ShapeFactory logo


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

Shapefest logo


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

Sharpen logo


Design challenge generator logo

Every shortcut for designers in one place

Shorthand logo


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

Show + Tell logo

Show + Tell

Create presentations in Figma with a single click

Sim Daltonism logo

Sim Daltonism

The color blindness simulator for iOS and Mac

Sketch Course logo

Sketch Course

Introduction to Sketch Basic Tools

sketchvalley logo


Hand-drawn free vector illustration resources for your projects

Smash Illustrations logo

Smash Illustrations

Awesome illustration constructor with colorful and trendy characters

SmoothShadow logo


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

Snapfont logo


Live font previews on any webpage

Stark logo


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

Stories by Freepik logo

Stories by Freepik

Free illustrations in 5 different styles

Streamline Icons logo

Streamline Icons

The largest icon pack with 30,000+ free icons

Streamline Lab logo

Streamline Lab

Over 80 free vector illustrations

Tachyons X-Ray logo

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 logo

Tailwind CSS

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

Texture.js logo


SVG patterns for Data Visualization

The A11Y Project logo

The A11Y Project

A community-driven effort to make web accessibility easier.

The Design Thinking Workshop Kit logo

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 logo

The League of Moveable Type

The original, the first, the open-source font foundry.

The Noun Project logo

The Noun Project

Free icons for everything

The User Testing Field Guide logo

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 logo


Generate 3D Mockups right in your Browser

Type Anything logo

Type Anything

Simple tool to create great font combinations

Type Scale logo

Type Scale

A visual type scale calculator

UI Store logo

UI Store

Free UI resources for every design tool

UI8 logo


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

unDraw logo


Free illustrations with customizable colors

unscreen logo


Remove video backgrounds

Unsplash logo


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

urspace logo


Dynamic and robust portfolio builder

User Experience by accenture logo

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 logo

Vector Creator

Create engaging custom illustrations

Vector Mockups logo

Vector Mockups

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

WAVE logo


Web Accessibility Evaluation Tool

WCAG Quick Reference Guide logo

WCAG Quick Reference Guide

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

Web Accessibility by Google logo

Web Accessibility by Google

Learn how to make accessible web applications logo

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

Webflow Course logo

Webflow Course

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

Webflow Ebooks logo

Webflow Ebooks

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

WebGradients logo


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

Who Can Use logo

Who Can Use

Check if your color combination is accessible

Whoosh Illustrations logo

Whoosh Illustrations

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

XD Guru logo

XD Guru

A large collection of free and premium resources for Adobe XD