Tech Stack Icons for GitHub README

Your GitHub README is often the first thing developers see when they land on your project. A clean tech stack section with recognizable icons instantly communicates your tools and builds credibility. Tech Stack Icons gives you 700+ free SVG icons purpose-built for this exact use case.

The quickest method: save & embed SVG

Browse to tech-stack-icons.com and find your icon
Click the icon to copy its SVG code
Save it as a file in your repository (e.g. assets/icons/react.svg)
Reference it in your README with an <img> tag

GitHub Markdown supports HTML <img> tags, giving you full control over size and spacing:

<img src="./assets/icons/react.svg" height="40" alt="React" />
<img src="./assets/icons/typescript.svg" height="40" alt="TypeScript" />
<img src="./assets/icons/nodejs.svg" height="40" alt="Node.js" />

Tip: Use height="40" for a standard icon row. Increase to height="50" if you want them a bit larger.

Create a tech stack badge row

The most popular README pattern is a horizontal row of icons. Here's a real-world example for a full-stack web project:

## Tech Stack
 
<p>
  <img src="./assets/icons/react.svg" height="40" alt="React" title="React" />
  <img src="./assets/icons/typescript.svg" height="40" alt="TypeScript" title="TypeScript" />
  <img src="./assets/icons/nodejs.svg" height="40" alt="Node.js" title="Node.js" />
  <img src="./assets/icons/postgresql.svg" height="40" alt="PostgreSQL" title="PostgreSQL" />
  <img src="./assets/icons/docker.svg" height="40" alt="Docker" title="Docker" />
</p>

Add title attributes so icon names appear on hover — a small UX detail reviewers notice.

Light, dark, and grayscale variants

Every Tech Stack Icon ships in three modes:

Mode	Best for
Light	READMEs with white backgrounds, light-theme GitHub profiles
Dark	Dark-themed pages, presentations, dark GitHub profile READMEs
Grayscale	Minimal/monochrome READMEs, resumes exported to PDF

Browse and toggle modes directly on the website before copying.

Popular stacks for GitHub README

MERN Stack

<img src="./assets/icons/mongodb.svg" height="40" alt="MongoDB" />
<img src="./assets/icons/express.svg" height="40" alt="Express" />
<img src="./assets/icons/react.svg" height="40" alt="React" />
<img src="./assets/icons/nodejs.svg" height="40" alt="Node.js" />

Python / Data Science

<img src="./assets/icons/python.svg" height="40" alt="Python" />
<img src="./assets/icons/numpy.svg" height="40" alt="NumPy" />
<img src="./assets/icons/pandas.svg" height="40" alt="pandas" />
<img src="./assets/icons/pytorch.svg" height="40" alt="PyTorch" />

Modern Frontend

<img src="./assets/icons/nextjs2.svg" height="40" alt="Next.js" />
<img src="./assets/icons/react.svg" height="40" alt="React" />
<img src="./assets/icons/typescript.svg" height="40" alt="TypeScript" />
<img src="./assets/icons/tailwindcss.svg" height="40" alt="Tailwind CSS" />

DevOps / Cloud

<img src="./assets/icons/aws.svg" height="40" alt="AWS" />
<img src="./assets/icons/docker.svg" height="40" alt="Docker" />
<img src="./assets/icons/kubernetes.svg" height="40" alt="Kubernetes" />
<img src="./assets/icons/githubactions.svg" height="40" alt="GitHub Actions" />

Adding labels under icons

Some developers prefer icons with text labels below them. Use an HTML table for this layout:

| React | TypeScript | Node.js |
|:---:|:---:|:---:|
| <img src="./assets/icons/react.svg" height="40" /> | <img src="./assets/icons/typescript.svg" height="40" /> | <img src="./assets/icons/nodejs.svg" height="40" /> |

Using Tech Stack Icons in a React app

If you want to use these icons inside a Next.js or React project (not just a README), install the NPM package:

npm i tech-stack-icons

import StackIcon from 'tech-stack-icons'
 
export default function TechStack() {
  return (
    <div className="flex gap-4">
      <StackIcon name="react" className="h-10 w-10" />
      <StackIcon name="typescript" className="h-10 w-10" />
      <StackIcon name="nodejs" className="h-10 w-10" />
    </div>
  )
}

See the full NPM package documentation for all available props.