Design stuff

Mind-blowing design ideas, resources, tools and freebies. Icons, shapes, backgrounds, inspiration, and design systems. Most of it is free.

21st.dev

A community library of more than 12,000 React and Tailwind components, templates, and shadcn themes. Every component has a named author, previews live, and installs with one command or a pasted AI prompt.

25+ Best Open Source Icon Libraries in 2026

Compiled a list of tools designed with the needs of designers and developers in mind. This will make it easier for you to find the right one for your project. And at the end of this guide, I will share my recommendation—so keep reading!

99% Invisible

Narrative stories about design, architecture, and the unnoticed details that shape everyday experience. Strong source of storytelling technique for design and UX thinking.

Accessibility Courses

This page lists digital accessibility courses from many providers. You filter the list by level, format, language, and price to find a course. The list is free to browse, and the courses themselves have their own prices.

A List Apart

This page sorts the site's articles into six topics: Code, Content, Design, Industry & Business, Process, and User Experience. Each topic links to sub-topics with article counts. You use it to find articles about web design and web development on a subject you pick.

Animata

156+ animated React components you can copy into any project. Free, open source, and ready to use.

Best Free Font Libraries and Inspiration for Designers

A curated directory of free font libraries, pairing tools, and type inspiration sites, sorted into categories like foundries and identification tools. Updated regularly with new releases.

Bookmarks.Design

Bookmarks.Design is a directory of links for designers. You pick a category like icons, illustrations, design systems, or prototyping and it lists sites in that category. The directory itself is free to use.

Brandfetch

Brandfetch stores logos, colors, fonts, and descriptions for millions of companies. You search a brand name or a URL and download its assets, or you call the API to pull the same data into an app. Searching is free, and the API has paid tiers.

BRIX Templates

Premium Webflow templates and UI kits, each built with CMS collections and a Figma file included. A Webflow Template Partner Award winner, so the build quality holds up.

Chromatic (Free tier available)

A UI testing and review platform for Storybook that catches visual, interaction, and accessibility regressions in real browsers. The free tier covers a limited number of snapshots a month.

Claude Design: From Beginner to Pro in 15 Minutes

This is a recorded session where Hiten Shah uses Claude Design to make and change designs. He shows examples from building his own website and ends with five takeaways. You watch it to see the tool in use before trying it yourself.

Colorffy

Generate CSS color palettes, gradients, and UI themes, then export production-ready code. Includes a light and dark theme generator and a curated gradient collection.

coolshapes

coolshapes gives you more than 100 abstract shapes with grainy gradients. You download a shape as SVG or PNG, grab the Figma file, or install the React package. Everything is open source under the MIT license.

Craftwork

Craftwork sells design assets. You browse illustrations, UI kits, mockups, icons, fonts, 3D objects, and templates, then download the files. Some items are free and the rest cost money or need a Pro Access subscription.

CSS HDR Gradients

Hands-down my favorite tool for getiting the just-right CSS for the gradient you want.

Design.dev

A collection of free CSS generators and code tools, from box shadows to gradients, plus AI prompt templates for common UI components. Good for quick front-end utility work.

Design Principles

Design Principles collects design principles that real companies and teams published. It holds over 1,600 principles from more than 200 examples, plus articles and a field guide. You read them to write principles for your own team.

Digital Psychology

This site explains psychological triggers that change what people do in an interface. It covers persuasion, timing, and pressure tactics, and says where each one crosses into eroding trust. You read it to name the mechanism behind a design pattern you are looking at.

Dribbble

Dribbble shows design work posted by designers. You browse shots by category, follow designers, and hire freelancers or agencies. Browsing is free and designers pay for a Pro account.

Figma MCP Server Guide

This repo explains how to set up the Figma MCP server and use it well. It includes setup steps, best practices, and reusable skills for turning Figma designs into code. You read it before wiring Figma into your agent.

Figma tools

Free tools and plugins Figma has built or curated for designers, covering prototyping, icons, and other productivity utilities. Usable inside Figma or as standalone tools.

Font Awesome

Originally I didn't plan on adding more icon resources - until I discovered this cool make-your-own-icon tool that Font Awesome offers. Enjoy! The easiest way to get icons on your website is with a Kit. It's your very own custom version of Font Awesome, all bundled up with only the icons, tools, and settings you need.

Fonts Compare

Browse and compare 1,800+ typefaces side by side across display, handwriting, monospace, sans-serif, and serif. Useful when you know the vibe you want but not the font yet.

FontsDiff

Compare Google Fonts side by side with x-height and cap-height numbers and a glyph inspector. New Google Fonts appear within a day. Free, Google Fonts only.

FontVS

Compare Google Fonts and your own font files side by side in the browser. Nothing you upload leaves your machine. Shows language coverage and variable font axes, free with no signup.

Framer Academy

Framer Academy teaches you how to build websites in Framer. It has video lessons grouped into courses on layout, animation, the CMS, and vectors. The lessons are free to watch.

Free Dashboard Icons & Logos

A free library of service and app logos built for dashboards, so you're not hunting down individual brand assets one at a time. Icons are for identification only, not endorsement.

Free Vector Icons — icons.download

275 free vector icons across 16 styles, cleared for personal and commercial use. A quick source when you need a small, consistent icon set.

Gradient Hub: colors and tools

Free gradient backgrounds, AI-generated textures, and design tools. Includes Text Gradient Generator, 600+ Gradient Palette, Multi-Color Gradients & Tailwind Palette—all free for commercial use!

Growth.Design Case Studies

Interactive UX case studies on how products grow their user base, told in comic-book format. A visual, engaging way to study product and growth design.

GSAP

GSAP is a JavaScript animation library for websites. You install it and write code to animate elements, scroll effects, SVG, and text. Webflow now pays for it, so all plugins are free.

Haikei

Haikei generates SVG background shapes. You pick a generator such as waves, blobs, or blurry gradients, adjust the settings, then download an SVG or PNG. It runs in the browser with no signup.

Histoire (Open source)

An open source, Vite-native story workshop built for Vue 3 and Svelte projects. Reuses your existing Vite config instead of asking you to set one up separately.

Hot Off The Press by VML

VML's monthly roundup of creative campaigns, thought leadership, and market trends. A quick way to see what's working in creative advertising.

Humane by Design

This site lists design principles for digital well-being, such as Empowering, Finite, and Inclusive. It also has articles and a section of in-progress ideas tagged by theme. You read it to get patterns that give users more control over a product.

Human Interface Guidelines

The Human Interface Guidelines are Apple's design rules for its platforms. You read them to learn how components, layout, typography, and interaction patterns should work on each device. They are free to read.

IcoMoon

A free SVG icon editor and library with over 20,000 open source icons, plus tools to build and export your own icon fonts. Runs entirely in the browser.

Icon Buddy

A dreamy aggregation of the best open source and at-cost icons online today including Lucide, Material, Tabler, Font Awesome - and those are just a few.

iconify.design

My FAVORITE for icons Home of open source icon sets All popular icon sets, one framework. Over 300,000 open source vector icons.

Icons8

I use this one and Streamline when I can't find the just-right icon from the open source icon aggregators (like iconify.design for example) 1,510,800 free icons that match each other Large icon packs of over 10k icons, so you can find visually consistent icons for all your designs

Ladle (Open source)

An open source, Vite-powered alternative to Storybook for React projects. Uses standard CSF stories and includes built-in accessibility checks through axe.

Lapa Ninja

Lapa Ninja is a gallery of landing page screenshots, updated daily. You browse websites, books, tools, freebies, and templates for design ideas. Most of it is free and a Pro tier costs money.

Lapa Ninja Skills

Lapa Ninja lists agent skills that help AI coding agents build interfaces. Each entry names the author and says what the skill does, covering animation, UI guidelines, design tokens, and React patterns. You browse it to find skills to install in your agent.

Laws of UX

Laws of UX collects around 30 principles from psychology that apply to design. Each law has a short page with a description and practices to consider. You can use it to explain design choices to other people.

LogoKit

LogoKit is an API that returns company logos and brand data. You pass a domain name or a stock ticker, and it sends back the logo image. The free tier gives you 5,000 requests a day, and paid plans give you higher resolution and more requests.

LottieFiles certifications

Certification programs from LottieFiles, the company behind the Lottie animation format. Worth a look if you want a credential for motion and interaction work rather than just the tooling.

LottieFiles tools

The LottieFiles tool directory: converters, editors and optimizers for Lottie animation files, collected in one place. Browse it when you need to change a Lottie without opening After Effects.

lucide-animated

lucide-animated is a set of more than 460 Lucide icons rebuilt as animated React components. Each icon plays an animation on hover. You copy the component code or install it with the shadcn CLI, and it is free under the MIT license.

MagicPattern tools

More than 30 browser tools for SVG and CSS patterns, gradients, blobs, halftones and other backgrounds, with some available as Figma plugins. Export code or images for design and front-end work.

Magnific

Magnific is an AI platform for images, video, and audio, formerly called Freepik. You run models, upscale images, build node-based workflows, and share projects with a team. It also has an API, an MCP server, and plugins, and all plans cost money.

Material Design

Material Design is Google's design system. The site documents components, color, typography, shapes, and motion, and explains how to build each one. It is free, and it links to a Figma kit and to Android code libraries.

Mobbin

Mobbin is a library of screenshots from real mobile and web apps. You browse full user flows and filter by app, screen type, and UI element. Some browsing is free and a paid plan unlocks the full library.

Navbar Gallery

Navbar Gallery collects screenshots of navigation bars from real websites. You filter them by type, such as dropdown, mega menu, sidebar, or breadcrumbs, and click through to the live site. Browsing is free.

One Page Love

A collection of one-page website design inspiration, UI patterns, and templates. Useful when you need a simple, focused page layout fast.

Principles for Knowing When to Stop Designing

This article lists seven signs that a design is done. Each sign describes a situation, like changing something with no evidence of a problem, or fixing edge cases too early. You get a checklist to decide whether to keep working on a design or ship it.

Psychoactive Studios (Awwwards profile)

Portfolio profile for a New Zealand digital studio with 28 award-listed projects and a Site of the Day win. Good reference for high-craft interactive web design.

React Cosmos (Open source)

An open source React component sandbox that uses file-based fixtures to define component states. Supports static export and integrates with Vite, Webpack, and Next.js.

Really Good Emails

A library of real marketing emails organized by category. Good for studying actual email design and copy, not just templates.

Storybook (Open source)

An open source workshop for building, testing, and documenting UI components in isolation. Stories carry over into your development, documentation, and testing workflows.

Streamline icons

I use this one and icons8 when I can't find the just-right icon from the open source icon aggregators (like iconify.design for example) Download or copy svg & png icons 448,890 icons 34 families 172 sets Icon sets 50x larger than the industry average. Drawn in-house by a team of 8 icon designers. Stop wasting hours blending mismatched icons.

Super Designer pattern generator

Builds seamless background patterns from more than 150 shapes in a few clicks. Free to use in the browser.

Supernova (Free plan available)

Design system platform with documentation, token export, and MCP-based context sharing for AI tools. The free plan covers one design system, enough to test the workflow before paying.

SVG Backgrounds

SVG Backgrounds has background patterns, shape dividers, icons, and illustrations as SVG files. You pick a graphic, change the colors, then copy the CSS or download the SVG or PNG. Some graphics are free with attribution and the Pro collections need an All Access purchase.

svg.dev

Hands down one of my favorite most-used free tools for design. If you know, you know

The Noun Project

A library of millions of icons and photos from creators worldwide. Free to use with attribution, or royalty-free with a paid plan.

Typewolf

Trending typefaces, font pairings, and real site showcases, plus educational guides on using type well. A solid first stop for typography inspiration.

UI UX Pro Max Skill

An agent skill that gives Claude Code, Cursor, Windsurf and other AI coding assistants design judgment. It bundles 67 UI styles, 161 color palettes, 57 font pairings and 99 UX rules, plus a generator that turns a one-line brief into a design system. Open source on GitHub.

Unicorn Icons

More than 500 animated icons in Lottie and Rive formats. Change colour, stroke and speed in the browser, then export for React, Vue, iOS, Android or HTML. Free tier, with paid plans.

UX Tools

This page lists articles about design tools and design work, going back to 2020. Articles are tagged by topic such as Tools, Research, Techniques, and Collaboration. You read them to compare design tools and see how other designers set up their workflow.

New on Behance

Open the feed

Open this view in Notion