Skip to content
Get packs

Guide · Open source

How to use design-resources-for-developers: a curated guide

Updated · written with AI from the project's own documentation and checked against our catalogue data

design-resources-for-developers is a curated, categorized list of links to design and front-end resources, including illustration sites, icon sets, stock photos, HTML and CSS templates, CSS and React UI libraries, and online design tools. It is written for developers and designers who need visual assets or UI libraries and want a starting point. After this guide you will know how to browse the list, compare options in a category, and check each linked resource's terms before you use it.

design-resources-for-developersbradtraversy/design-resources-for-developers · ★ 67.3k · MIT

Quick start

  1. 1Open the list. Go to the repository on GitHub, or clone it with the git command in the guide, and open the README.
  2. 2Pick a category. Use the table of contents to jump to the category that matches your need, such as Icons, CSS Frameworks or React UI Libraries.
  3. 3Scan the descriptions. Read the description column to shortlist the sites that fit your project.
  4. 4Open and compare candidates. Visit two or three shortlisted sites and compare their components, assets or tools against your requirements.
  5. 5Verify the license. Read each site's license or terms, because the list does not state them for each resource.
  6. 6Report problems. If a link is broken, a resource is no longer free, or a description is wrong, open an issue as the README asks.

What the list is and what it is not

This repository is a reference you browse, not software you install. Every entry is a link to another website, with a short description of what that site offers.

The README notes that new resource submissions are currently paused. The list is kept as a maintained reference, and maintainers fix broken links and outdated descriptions when they are reported.

  • It is a list of links, not a tool with features of its own.
  • It does not specify license terms for each linked resource, so you must check each one.
  • It may contain broken links or outdated descriptions.

Get a local copy of the list (optional)

You can read the list online on GitHub. If you prefer to keep a local copy of the README, the source gives this command to clone the repository.

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

Find resources by category

The README has a table of contents with categories such as UI Graphics, Fonts, Colors, Icons, Stock Photos, HTML & CSS Templates, CSS Frameworks, React UI Libraries, Vue UI Libraries, Online Design Tools and Image Compression. Click a category in the table of contents to jump to it.

Each category is a table with two columns: the website name, which links to the site, and a short description of what it offers.

  • Use the table of contents to jump straight to the category you need.
  • Scan the description column to see which sites match your use case before opening them.

Compare CSS frameworks and UI libraries

If you need a UI component library or CSS framework, go to the CSS Frameworks, UI Components & Kits, or the framework-specific sections such as React UI Libraries, Vue UI Libraries, Angular UI Libraries, Svelte UI Libraries or React Native UI Libraries.

Open two or three candidates in separate tabs and compare them on the criteria that matter for your project, such as the components they include and how they fit your framework. The list does not rank or score them, so that comparison is up to you.

  • Pick the section that matches your framework.
  • Open the linked site and check its documentation and components yourself.
  • Note which options fit your stack before deciding.

Find illustrations, icons and stock assets

For a landing page or prototype, the UI Graphics, Icons, Stock Photos, Vectors & Clip Art and Illustration-related entries are the most useful. The UI Graphics section describes its entries as websites with modern UI components in formats such as PSD, Sketch and Figma.

Some entries describe their assets as free, open-source or royalty-free, but the list itself does not state the terms. Confirm the license on the source site before you use an asset in a commercial project.

  • Use UI Graphics for component ideas and Figma or Sketch files.
  • Check each site's license before downloading assets for a paid product.
  • Keep a record of the license page you used for each asset.

Check each resource before you use it

The README says the list relies on maintainers to fix broken links and outdated descriptions. Because of this, treat every entry as a pointer to verify, not a guarantee.

Before you rely on a resource, open it and confirm three things: that the link works, that the resource is still free if you need it to be, and that its license allows your use.

  • Confirm the link loads and the resource still exists.
  • Confirm whether the resource is free, since the README asks for reports when a resource is no longer free.
  • Read the site's license or terms for your specific use.

What people use it for

  • A developer comparing React UI libraries before starting a dashboard project.
  • A designer looking for free icon sets or patterns for a mockup in Figma or Sketch.
  • Someone building a landing page who needs quick illustrations or SVG background patterns.
  • A developer searching for a CSS framework and comparing a few options from the CSS Frameworks section.
  • Anyone who wants a starting point for online design tools before searching the web.

Frequently asked questions

Is design-resources-for-developers a tool I can install?

No. The README describes it as a curated list of links to design and front-end resources. You browse it rather than install it, and the only command in the source is an optional git clone to get a local copy.

Is design-resources-for-developers free?

The repository is licensed under MIT. However, the list does not specify license terms for each linked resource, so you need to check the terms on each site you use.

Can I submit a new resource to the list?

Not currently. The README says new resource submissions are paused and the repository is kept as a curated reference. You can open an issue to report a broken link, a resource that is no longer free, or an inaccurate description.

Are the links and descriptions up to date?

The README says the list relies on maintainers to fix broken links and outdated descriptions. Check any link and its details before relying on it.

What are the alternatives to this list?

The source names Awesome Design Tools, Awesome Web Design and Awesome CSS as comparable projects. They are also curated lists, so the same checking applies.

Do I need any prerequisites to use it?

The source lists no prerequisites. You only need a web browser to read the list, and git only if you want a local clone.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This list suits developers comparing UI libraries and CSS frameworks, and designers or builders looking for free illustrations, patterns, icons and quick visual assets. It is not a good choice if you need a single installable tool, guaranteed-current links, or clear license terms for every resource, so check each site yourself before using it.

Install options & downloads