# 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:**

| File | What it is |
|---|---|
| `readme.md` | The catalog itself — 33 categorized tables, ~1,088 entries |
| `contributing.md` | Four contribution rules (480 bytes) |
| `LICENSE` | MIT, Copyright 2020 Brad Traversy |
| `headerimage.png` | Repository banner displayed at the top of the README |
| `.prettierignore` | Excludes `readme.md` from formatter rewrites |

> [!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](https://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"

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

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

    Pull later to refresh:

    ```bash
    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.

| # | Section | Anchor | What's in it |
|---|---------|--------|--------------|
| 1 | UI Graphics | `#ui-graphics` | Illustration packs, avatar generators, SVG patterns, mesh gradients (Humaaans, Undraw, Open Peeps, Hero Patterns) |
| 2 | Fonts | `#fonts` | Free font libraries, font pairing tools, variable-font hosts (Google Fonts, Fontsource, Fontshare, Bunny Fonts) |
| 3 | Colors | `#colors` | Palette generators, gradient builders, accessibility-aware color tools (Coolors, Colormind, Adobe Color, Color Brewer 2) |
| 4 | Icons | `#icons` | Open-source SVG icon sets, brand icons, animated icons, search engines (Heroicons, Tabler, Lucide, Phosphor, Simple Icons) |
| 5 | Logos | `#logos` | Brand logo SVG/PNG repositories and logo generators (SVGPorn, World Vector Logo, Browser Logos) |
| 6 | Favicons | `#favicons` | Favicon generators and emoji-to-favicon converters |
| 7 | Icon Fonts | `#icon-fonts` | Icon families packaged as fonts (Font Awesome, IcoMoon, MFGLabs) |
| 8 | Stock Photos | `#stock-photos` | Royalty-free photography (Unsplash, Pexels, Pixabay, Burst, StockSnap) |
| 9 | Stock Videos | `#stock-videos` | Royalty-free video footage |
| 10 | Stock Music & Sound Effects | `#stock-music--sound-effects` | Royalty-free audio for video and game projects |
| 11 | Vectors & Clip Art | `#vectors--clip-art` | SVG and AI vector resources |
| 12 | Product & Image Mockups | `#product--image-mockups` | Device mockup generators (laptop, phone, browser frames) |
| 13 | HTML & CSS Templates | `#html--css-templates` | Free starter templates for landing pages, dashboards, portfolios |
| 14 | CSS Frameworks | `#css-frameworks` | Tailwind, Bootstrap, Bulma, Pico, Pure, UnoCSS — utility-first and component-first |
| 15 | CSS Methodologies | `#css-methodologies` | OOCSS, Atomic CSS, BEM, SMACSS, CUBE — naming and architecture conventions |
| 16 | CSS Animations | `#css-animations` | Animate.css, Anime.js, Motion One, keyframe builders, loaders |
| 17 | Javascript Animation Libraries | `#javascript-animation-libraries` | GSAP-style and lighter JS-driven animation tools |
| 18 | Javascript Chart Libraries | `#javascript-chart-libraries` | Chart.js, D3-adjacent, sparkline libraries |
| 19 | UI Components & Kits | `#ui-components--kits` | Cross-framework component galleries and Tailwind component kits |
| 20 | React UI Libraries | `#react-ui-libraries` | React-only component libraries (MUI, Chakra, shadcn, Radix, Mantine, Ant Design) |
| 21 | Vue UI Libraries | `#vue-ui-libraries` | Vue 2/3 component libraries (Vuetify, Quasar, PrimeVue, Naive UI) |
| 22 | Angular UI Libraries | `#angular-ui-libraries` | Angular Material, PrimeNG, NG-ZORRO |
| 23 | Svelte UI Libraries | `#svelte-ui-libraries` | Svelte and SvelteKit component libraries |
| 24 | React Native UI Libraries | `#react-native-ui-libraries` | Cross-platform mobile component libraries |
| 25 | Design Systems & Style Guides | `#design-systems--style-guides` | Public design systems from major companies (Material, Carbon, Lightning, Polaris) |
| 26 | Online Design Tools | `#online-design-tools` | Browser-based design and prototyping tools (Figma alternatives, wireframing, diagram makers) |
| 27 | Downloadable Design Software | `#downloadable-design-software` | Desktop apps (Inkscape, GIMP, Krita, Penpot Desktop) |
| 28 | Design Inspiration | `#design-inspiration` | Galleries of well-designed sites and components (Dribbble, Awwwards, Land-book, Mobbin) |
| 29 | Image Compression | `#image-compression` | TinyPNG, Squoosh, ImageOptim, online compressors |
| 30 | Chrome Extensions | `#chrome-extensions` | Browser extensions for designers (color pickers, font identifiers, screenshot tools) |
| 31 | Firefox Extensions | `#firefox-extensions` | Same concept, Firefox-native |
| 32 | AI Graphic Design Tools | `#ai-graphic-design-tools` | AI-driven design generation (Leonardo.Ai, Galileo AI, ImgGen) |
| 33 | Others | `#others` | The catch-all — devhints.io, Can I Use, Codepen, Devtools cheatsheets, miscellaneous utilities |

> [!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](https://github.com/bradtraversy/design-resources-for-developers/issues/1590) flagged `palettelist.com` as dead; the batch cleanup tracked in [#1598](https://github.com/bradtraversy/design-resources-for-developers/issues/1598) collects expired and broken links.
3. Open a new issue if your dead link isn't already tracked:

```markdown
**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

| Field | Value |
|---|---|
| Maintainer | Brad Traversy |
| License | MIT (Copyright 2020 Brad Traversy) |
| Default branch | `master` |
| Catalog file | `readme.md` |
| Contributing rules | `contributing.md` (4 rules, 480 bytes) |
| Total sections | 33 |
| Total entries | ~1,088 (grows as PRs merge) |
| Build system | None |
| CI | None |
| Releases / tags | None |
| Sponsorship | Warp terminal banner above TOC |

### File tree

```text
.
├── .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

| What | URL |
|---|---|
| Repository | https://github.com/bradtraversy/design-resources-for-developers |
| README (rendered) | https://github.com/bradtraversy/design-resources-for-developers#readme |
| Issues (broken links, suggestions) | https://github.com/bradtraversy/design-resources-for-developers/issues |
| Pull requests | https://github.com/bradtraversy/design-resources-for-developers/pulls |
| Maintainer | https://github.com/bradtraversy |

---

_Generated May 2026 from bradtraversy/design-resources-for-developers at 6d9884e. AI-generated documentation. The library is checked by sampling (three repositories so far); this guide was not individually reviewed. Verify against the project before relying on it. Unofficial; not affiliated with or reviewed by the project._