Design Resources for Developers — User Guide

A working developer's atlas to one of the most-starred curated catalogs on GitHub: bradtraversy/design-resources-for-developers. This guide explains what the list contains, how to navigate it efficiently, which section to reach for given a real task, and how to contribute or report broken entries.

Important

This repository is a curated link list, not an installable tool. There is no CLI, no package, no runtime, and nothing to configure. The product is readme.md, and your job as a reader is to find the right section, scan the table, click through, and evaluate the linked tool on its own site.

1. Quick Start

What this catalog is

bradtraversy/design-resources-for-developers is a single-page catalog of free websites, libraries, and tools that developers reach for when they need design assets: fonts, icons, color palettes, illustrations, mockups, CSS frameworks, UI component kits, and more. It is maintained by Brad Traversy under the MIT License (Copyright 2020 Brad Traversy). All entries are submitted by the community as pull requests.

Key features:

• 33 categorized sections covering the full front-end design toolchain
• ~1,088 free resource entries, growing continuously as PRs merge
• Plain markdown tables — readable in any GitHub-compatible viewer
• Browser in-page search (Ctrl+F / Cmd+F) works on the full catalog
• "↥ Back To Top" links at the end of each section for quick navigation
• No setup, no account, no cost to use

The five repository files:

Note

There is no package.json, no build step, no CI, no website, and no API. The repository is read directly on github.com or in any markdown viewer.

Get to the catalog in 30 seconds

1. Open github.com/bradtraversy/design-resources-for-developers
2. Click a Table of Contents entry that matches what you need
3. Scan the table for a description that fits your task
4. Click the resource link to evaluate it
5. Click ↥ Back To Top to return to the TOC and repeat

Tip

Already know what you want? Use in-page search (Ctrl+F / Cmd+F) — the README is plain markdown and search hits every entry name and description instantly.

Keep a local copy

Clone the repository

git clone https://github.com/bradtraversy/design-resources-for-developers.git
cd design-resources-for-developers

Cloning into 'design-resources-for-developers'...
remote: Enumerating objects: ...
Receiving objects: 100% (...)

Pull later to refresh:

git pull

Download a single file

On the GitHub web UI, open readme.md, click Raw, then save the page (Ctrl+S / Cmd+S) as readme.md. Open it in any markdown viewer.

Download a ZIP

On the repository page, click Code → Download ZIP. Unzip and open readme.md.

Tip

The repository has no tags or releases. Cloning gives you the most recent commit; pulling fetches updates as PRs are merged. There is no "stable" version to pin — the catalog is continuously evolving.

2. Category Atlas — All 33 Sections

Every section follows the same shape: an ## H2 header (which doubles as the navigation anchor on github.com), a one-line blockquote description, a two-column table of resources, and a "↥ Back To Top" link.

Tip

Sections 1–13 are asset sections (you take something away — pictures, fonts, icons). Sections 14–25 are building-blocks sections (you import or copy code). Sections 26–33 are tools sections (browser tabs and extensions you use while designing). Knowing which third you need narrows the search dramatically.

3. Workflows — When To Use Which Section

Real tasks rarely map cleanly to one section. Here are common developer workflows and the sections that serve each step.

"I need to ship a marketing site this week"

• [ ] Pick a base CSS framework → CSS Frameworks
• [ ] Grab a starter template → HTML & CSS Templates
• [ ] Pull illustrations or hero art → UI Graphics
• [ ] Pick fonts that pair → Fonts
• [ ] Build the palette → Colors
• [ ] Add icons → Icons
• [ ] Generate a favicon → Favicons
• [ ] Compress images before deploy → Image Compression

"I'm starting a React dashboard"

• [ ] Pick a component library → React UI Libraries
• [ ] Pick a chart library → Javascript Chart Libraries
• [ ] Pick an icon set the library cooperates with → Icons
• [ ] Pull a free admin starter → HTML & CSS Templates

"I'm cutting a hero section and need illustrations"

• [ ] Browse Undraw, Open Peeps, Humaaans, Drawkit → UI Graphics
• [ ] Generate a coordinated background pattern (Hero Patterns, Pattern Monster) → UI Graphics
• [ ] If you'd rather use AI → AI Graphic Design Tools

"I need royalty-free photos and music for a launch video"

• [ ] Photos → Stock Photos
• [ ] Footage → Stock Videos
• [ ] Audio → Stock Music & Sound Effects
• [ ] Mockup the result on a device frame → Product & Image Mockups

"I'm formalizing my team's design language"

• [ ] Read a few public design systems → Design Systems & Style Guides
• [ ] Pick a CSS naming methodology → CSS Methodologies
• [ ] Standardize on a component library → UI Components & Kits + your team's framework-specific section

"My designer uses Figma but I want to stay in the browser"

• [ ] Browse browser-based tools → Online Design Tools
• [ ] Need a local app instead → Downloadable Design Software

Tip

When a task spans 5+ sections, work top-down through the README. The author put assets (graphics, fonts, colors, icons) before code (frameworks, libraries) before tools (online editors, extensions, AI) — an order that matches how most projects actually get built.

4. Highlighted Sections — Heaviest Traffic

These are the sections developers reach for most often. Each has enough entries that scanning is the bottleneck — these summaries help you decide where to start.

Icons (~60 entries)

The single broadest section in the catalog. Free SVG and icon-font sets dominate. Notable subgroups:

• Open-source modern packs — Heroicons, Tabler Icons, Lucide, Phosphor, Iconoir, Feather, Radix Icons. All are framework-agnostic SVG with React/Vue wrappers offered separately.
• Brand icons — Simple Icons (1,300+ company brand marks).
• Search across packs — Iconify (40,000+ icons unified), Icones (instant search powered by Iconify), IconSear.ch, SVG Repo.
• Animated icons — Lordicon, UseAnimations, Unicorn Icons.
• Big "everything" stores — Flat Icon, Iconscout, Icons8, The Noun Project (mix of free and paid).

Pick by integration model first: SVG components (Heroicons, Lucide, Tabler), icon font (Font Awesome, IcoMoon), or unified API (Iconify)?

CSS Frameworks (~70 entries)

Two halves: utility-first (Tailwind CSS, Windi, UnoCSS, Tachyons) and component-first (Bootstrap, Bulma, Materialize, Foundation, Semantic UI / Fomantic UI). The catalog also captures classless frameworks (Pico.css, Sakura, Marx, MVP.css) and niche aesthetics — 98.css and XP.css for retro Windows UI, NES.css for 8-bit, Terminal CSS for command-line vibes.

UI Graphics (~45 entries)

Where most marketing-site assets come from. Five rough sub-themes:

• Illustration sets — Humaaans, Undraw, Open Peeps, Drawkit, Absurd.design, IRA Design, Open Doodles.
• Avatars — Avataaars, Boring Avatars, Square Face, Exemplar.
• Patterns and backgrounds — Hero Patterns, BEAUBUS Patterns, Pattern Monster, Doodad Pattern Generator, Mesh Gradient, Mesher.
• Generators — Cool Text, Creatica, fffuel, Gradienta.
• Conversion utilities — Html to Design (any URL → Figma).

Stock Photos (~50 entries)

Anchored by Unsplash, Pexels, Pixabay, plus dozens of niche curators (Burst, StockSnap, Gratisography, Reshot, ISO Republic, FoodiesFeed for food photos, Free Nature Stock for landscapes).

UI Components & Kits (~80 entries)

Cross-framework component galleries — Tailwind UI clones (Hyper UI, Flowbite, Tailwind Components, Headless UI, Wickedblocks, Float UI), Bootstrap snippets, plain HTML/CSS components. If you're building with a specific framework, jump from this section to the framework-specific list (React, Vue, Angular, Svelte) below it.

Online Design Tools (~80 entries)

Wireframing (Whimsical, Excalidraw, tldraw), prototyping (Figma, Penpot, Framer), diagram makers (draw.io / diagrams.net, Mermaid Live), screenshot tools (Carbon, Ray.so, Codeimg, Showcode for code screenshots; Screely for app screenshots).

Others (~150+ entries)

The catch-all and the most idiosyncratic section — devhints.io cheatsheets, Can I Use, Codepen, RunJS, html2pdf.js, CSS Reference, OverAPI, Shields.io, Code Beautify, and dozens more. When nothing else fits, search here.

5. Contributing a Resource

If you've found a free design resource the catalog is missing, submit it as a pull request. The contribution rules are deliberately small.

Important

The full contributing guidelines from contributing.md:

• Add a single resource in one pull request to allow for easier review.
• Pull request title should include resource name and resource section. Example: [Tailwind CSS] -> [CSS Frameworks]
• Provide a link to the submitted resource in the pull request comment section. Example: Link: https://tailwindcss.com/
• Double check that the resource is truly free without any kind of hidden surprises.

Match the style of nearby entries: short, factual description, one sentence preferred. There is no required word count, no tags, no "added on" dates.

Submission checklist

• [ ] Resource is free (no required signup, no time-limited trial dressed as "free")
• [ ] One resource per pull request
• [ ] PR title formatted as [Resource Name] -> [Section Name]
• [ ] PR body includes Link: https://your-resource-url
• [ ] Description in the table is short, factual, and one line
• [ ] Entry is in the correct section (or propose a new section in the PR if no section fits)

What gets rejected in practice

• Paid tools, regardless of how generous the free tier appears
• Duplicates already present in any section (search the README before submitting)
• Self-promotion that doesn't meaningfully expand the catalog
• Resources requiring crypto wallets, paywalls, or other access friction

Warning

Some tools have freemium models where the free tier is functional but limited. These are sometimes accepted. Pure-paid tools where "free" means only a trial are rejected. Verify the free tier is permanently usable before submitting.

6. Troubleshooting

Finding a dead or broken link

The web changes faster than any curated list. Dead links are the dominant maintenance reality — at any given time, several issues tracking broken URLs are open.

Cause: Third-party services change domains, shut down, or move behind paywalls.

Solution:

1. Verify the link is actually dead — try a different network, mobile data, an incognito window, and waybackmachine.org. Regional restrictions and temporary outages are common.
2. Check existing issues at the repository issues page — someone may have already reported it. Issue #1590 flagged palettelist.com as dead; the batch cleanup tracked in #1598 collects expired and broken links.
3. Open a new issue if your dead link isn't already tracked:

**Section:** CSS Frameworks
**Entry:** [Resource Name](https://example.com/)
**Status:** Domain returns 404 / Domain expired / Service shut down
**Verification:** Tried from multiple IPs, same error.
  Wayback Machine shows last successful capture on YYYY-MM-DD.
**Suggested action:** Remove from list / Replace with successor service

4. Don't rush a removal PR — the maintainer batches link cleanup. Issues are easier to coordinate.

Prevention: The catalog has no automated link checker. Check issue #1598 periodically for batch cleanup activity.

Finding a resource that has changed from free to paid

Cause: Services change business models after being added to the catalog.

Solution: Report it the same way as a dead link, with a note about the pricing change. This violates the "truly free without hidden surprises" rule.

Warning

Some entries link to freemium services that have removed their free tier or added required signups since being added. Always verify pricing on the linked site before relying on it commercially.

Can't find what I'm looking for

Cause: The catalog has 33 sections; the right section isn't always obvious.

Solution:

1. Use Ctrl+F / Cmd+F in-page search for a keyword (e.g., "tailwind", "animation", "palette").
2. Check the Category Atlas in Section 2 of this guide — the "What's in it" column is a dense summary.
3. Look in Others (section 33) — it's the catch-all for utilities that don't fit elsewhere.
4. Remember: cross-framework UI components are in "UI Components & Kits"; framework-specific libraries are in the five framework sections below it.

7. FAQ

Q: Is everything in this list actually free?

The contributing guidelines require resources to be "truly free without any kind of hidden surprises," and contributors verify this before submitting. In practice, some entries link to freemium services (free tier + paid upgrades). Some resources have also changed business models since being added. Always verify pricing on the linked site before relying on it commercially.

Q: Why is the README so long? Is there a shorter version?

The README is the catalog — there is no shorter official version. To trim it for your own use, clone the repo, open readme.md in an editor, and delete the sections you don't need. The file is plain markdown.

Q: Is the catalog versioned? Can I pin to a specific snapshot?

There are no tags or releases. If you need a stable snapshot, fork the repo or reference a specific commit: https://github.com/bradtraversy/design-resources-for-developers/blob/<commit>/readme.md.

Q: Can I add a paid tool?

No. Contributors must verify the tool is "truly free without any kind of hidden surprises" before submitting. Tools where "free" means a time-limited trial or requires a credit card are out of scope.

Q: Can I use the README content commercially? Reprint it on my blog?

The repository is licensed under MIT, which permits redistribution and modification with attribution. The third-party services the README links to each have their own licenses — those are not covered by the repo's MIT license.

Q: What's the difference between "UI Components & Kits" and "React UI Libraries"?

"UI Components & Kits" is cross-framework or framework-agnostic (HTML/CSS snippets, Tailwind component galleries, copy-paste blocks). The five framework-specific sections (React, Vue, Angular, Svelte, React Native) host library-style components you install via npm.

Q: Where did the banner at the top come from?

The Warp terminal banner above the Table of Contents is a project sponsorship, not a curated entry. The actual catalog starts with the Table of Contents below that block.

Q: I clicked a link and it's broken. What do I do?

Open an issue on the repository — see the Troubleshooting section above for the exact format. Don't open a PR that just removes the entry; the maintainer batches link cleanup.

Q: Is there a mobile-friendly view?

The README is plain markdown; github.com renders it responsively. Tables are wide and scroll horizontally on narrow screens — there is no separate mobile version.

Q: How do I keep my local clone current?

Run git pull in the repository directory. There is no notification system — watch the repository on GitHub for activity, or check periodically.

Q: Why no backend tools, JS libraries, or devops resources?

This catalog scopes itself to design resources (visuals, fonts, components, design tools). General "awesome" and "awesome-X" lists exist elsewhere on GitHub for other domains.

8. Reference

Repository facts

File tree

.
├── .prettierignore           # Skips readme.md so author column-spacing is preserved
├── LICENSE                   # MIT, Copyright 2020 Brad Traversy
├── contributing.md           # Four contribution rules
├── headerimage.png           # Repository banner displayed in README
└── readme.md                 # The catalog itself — 33 sections, ~1,088 entries

Useful URLs