Web Design Resources

A curated collection of the best free resources for designers and developers. Fonts, icons, colors, animations, CSS tools, and more.

Fonts

Google Fonts

Free, open-source font library with 1500+ font families.

Visit →

Fonts

Font Squirrel

Free fonts with commercial-use licenses and a webfont generator.

Visit →

Fonts

Fontshare

Free, high-quality fonts from the Indian Type Foundry.

Visit →

Fonts

Fontsource

Self-host open-source fonts via NPM packages.

Visit →

Icons

Heroicons

Beautiful hand-crafted SVG icons by the Tailwind CSS team.

Visit →

Icons

Lucide

Beautiful & consistent open-source icon set, fork of Feather Icons.

Visit →

Icons

Phosphor Icons

Flexible icon family with 6 weights and 1000+ icons.

Visit →

Icons

Tabler Icons

5000+ free SVG icons with consistent stroke width.

Visit →

Icons

Simple Icons

SVG icons for popular brands and products.

Visit →

Illustrations

unDraw

Open-source illustrations with customizable colors.

Visit →

Illustrations

Humaaans

Mix-and-match illustration library of people.

Visit →

Illustrations

Open Peeps

Hand-drawn illustration library by Pablo Stanley.

Visit →

Colors

Coolors

Fast color scheme generator with export options.

Visit →

Colors

Color Hunt

Curated collection of beautiful color palettes.

Visit →

Colors

Realtime Colors

Visualize your color palette on a real website layout.

Visit →

Colors

OKLCH Color Picker

Modern OKLCH color picker for perceptually uniform colors.

Visit →

Lottie Animations

LottieFiles

The largest library of free Lottie animations and tools.

Visit →

Lottie Animations

IconScout Lottie

Animated Lottie icons and illustrations.

Visit →

CSS Tools

CSS-Tricks

Articles, tutorials, and reference on CSS and frontend dev.

Visit →

CSS Tools

Can I Use

Browser support tables for modern web features.

Visit →

CSS Tools

Tailwind CSS

Utility-first CSS framework with design system built in.

Visit →

CSS Tools

CSS Gradient

Free CSS gradient generator tool.

Visit →

CSS Tools

Clippy

CSS clip-path maker for custom shapes.

Visit →

Accessibility

WebAIM

Web accessibility resources, training, and evaluation tools.

Visit →

Accessibility

The A11Y Project

Community-driven effort to make digital accessibility easier.

Visit →

Accessibility

WCAG 2.1 Guidelines

Official W3C Web Content Accessibility Guidelines.

Visit →

Accessibility

Axe DevTools

Automated accessibility testing tool.

Visit →

Design Systems

Design Systems Repo

Collection of design systems, style guides, and pattern libraries.

Visit →

Design Systems

Storybook

UI development environment for building component libraries.

Visit →

Design Systems

Design Tokens Community

Community and spec for design tokens standardization.

Visit →

Inspiration

Dribbble

Design community for sharing and discovering creative work.

Visit →

Inspiration

Awwwards

Awards for the best web design and development.

Visit →

Inspiration

Mobbin

Real-world mobile and web design references.

Visit →

Inspiration

Godly

Curated collection of the best web design inspiration.

Visit →

Inspiration

SaaS Landing Page

Collection of the best SaaS landing page designs.

Visit →

Extract design assets from any website

MiroMiro's Chrome extension lets you extract CSS, colors, fonts, images, SVGs, and Lottie animations from any live website.

Add to Chrome