Tech Stack Icons — NPM Package

The tech-stack-icons NPM package lets you render any of 700+ tech icons as a React component in a single line of code. It ships with full TypeScript support and three visual modes out of the box.

→ View full package on NPM

Installation

npm i tech-stack-icons

# or with pnpm / yarn
pnpm add tech-stack-icons
yarn add tech-stack-icons

Basic usage

import StackIcon from 'tech-stack-icons'
 
export default function MyComponent() {
  return <StackIcon name="react" className="h-8 w-8" />
}

That's it. The icon is a self-contained SVG — no external network requests, no image files to manage.

Props

Prop	Type	Required	Description
`name`	`IconName`	✅	The icon identifier — fully typed with autocomplete
`variant`	`"light" \| "dark" \| "grayscale"`	—	Visual style, defaults to `"light"`
`className`	`string`	—	CSS class for the wrapper `<span>` (use for sizing)
`style`	`React.CSSProperties`	—	Inline styles for the wrapper `<span>`

Sizing with Tailwind CSS

The icon fills 100% of its wrapper, so control size via className on the <span>:

<StackIcon name="typescript" className="h-6 w-6" />   {/* 24px */}
<StackIcon name="typescript" className="h-8 w-8" />   {/* 32px */}
<StackIcon name="typescript" className="h-10 w-10" /> {/* 40px */}
<StackIcon name="typescript" className="h-12 w-12" /> {/* 48px */}

Or use inline styles:

<StackIcon name="typescript" style={{ width: 40, height: 40 }} />

Variants

<StackIcon name="react" variant="light" className="h-8 w-8" />     {/* default */}
<StackIcon name="react" variant="dark" className="h-8 w-8" />
<StackIcon name="react" variant="grayscale" className="h-8 w-8" />

TypeScript support

The package ships with .d.ts declarations. The name prop is typed as a union of all valid icon identifiers, so you get autocomplete and compile-time errors for typos:

import StackIcon from 'tech-stack-icons'
 
// ✅ Valid
<StackIcon name="nextjs2" className="h-8 w-8" />
 
// ❌ TypeScript error: "nxtjs" is not a valid icon name
<StackIcon name="nxtjs" className="h-8 w-8" />

Building a tech stack section

A common use case is a portfolio or project page listing your technologies:

import StackIcon from 'tech-stack-icons'
 
const STACK = [
  { name: 'react',      label: 'React' },
  { name: 'typescript', label: 'TypeScript' },
  { name: 'nextjs2',    label: 'Next.js' },
  { name: 'tailwindcss',label: 'Tailwind CSS' },
  { name: 'postgresql', label: 'PostgreSQL' },
  { name: 'docker',     label: 'Docker' },
] as const
 
export function TechStack() {
  return (
    <ul className="flex flex-wrap gap-6">
      {STACK.map(({ name, label }) => (
        <li key={name} className="flex flex-col items-center gap-2">
          <StackIcon name={name} className="h-10 w-10" />
          <span className="text-sm text-slate-500">{label}</span>
        </li>
      ))}
    </ul>
  )
}

Dynamic variant from state

Drive the variant prop from application state — useful for theme-aware icon grids:

type Variant = 'light' | 'dark' | 'grayscale'
 
function IconGrid({ variant }: { variant: Variant }) {
  return (
    <div className="flex gap-4">
      <StackIcon name="react" variant={variant} className="h-10 w-10" />
      <StackIcon name="vue" variant={variant} className="h-10 w-10" />
      <StackIcon name="svelte" variant={variant} className="h-10 w-10" />
    </div>
  )
}

Available icons

Browse all 700+ icons interactively — with search, preview, and one-click copy — at tech-stack-icons.com.

The library covers:

Frameworks: React, Vue, Angular, Svelte, Next.js, Nuxt, Remix, Astro, SvelteKit
Languages: TypeScript, JavaScript, Python, Rust, Go, Java, Ruby, PHP, Swift, Kotlin, Dart
Databases: PostgreSQL, MySQL, MongoDB, Redis, SQLite, Supabase, PlanetScale, Fauna
Cloud & DevOps: AWS, GCP, Azure, Docker, Kubernetes, GitHub Actions, Terraform, Vercel, Netlify
AI / ML: PyTorch, TensorFlow, scikit-learn, Hugging Face, LangChain, OpenAI
Design tools: Figma, Sketch, Adobe XD, Storybook
And many more…

GitHub README use case

For GitHub README files (which use Markdown, not React), see our dedicated GitHub README guide for copy-paste <img> tag examples and workflow.