Tech Stack Icons

A Typesafe React component for rendering over 395+ original SVG icons for the most-used design & development tools, frameworks, and AI services.

---

• 🌐 tech-stack-icons.com — live search, preview, copy JSX/SVG
• 🎨 Figma Drag & Drop Plugin
• 📁 Figma File of Icons

---

✨ Features

• 395+ original SVG icons
• Light, Dark, and Grayscale variants
• Fully typed with TypeScript autocomplete
• Zero dependencies
• Optimized for 100% width and height scaling
• Works out of the box with Tailwind CSS and styled-components

---

📦 Installation

npm install tech-stack-icons
# or
pnpm add tech-stack-icons
# or
yarn add tech-stack-icons

---

🧱 Usage

import StackIcon from "tech-stack-icons";

export default function Example() {
  return (
    <div style={{ width: 40, height: 40 }}>
      <StackIcon name="nextjs" />
    </div>
  );
}

---

🧩 Props

Prop	Type	Required	Description
name	IconName	✅ Yes	The ID of the icon (autocompletes in TypeScript)
variant	"light" | "dark" | "grayscale"	❌ No	Defaults to "light"
className	string	❌ No	CSS class for the wrapping <span>
style	React.CSSProperties	❌ No	Inline styles for the wrapper <span>

---

🎨 Variants

<StackIcon name="react" variant="dark" />
<StackIcon name="github" variant="grayscale" />

---

✅ TypeScript Autocomplete

When using in a TypeScript project, the name prop autocompletes based on the internal icon list:

import StackIcon, { IconName } from "tech-stack-icons";

const myIcon: IconName = "typescript";

---

🧪 Example: Styled with Tailwind

<StackIcon name="tailwindcss" className="w-8 h-8 rounded" />

🪄 Accessibility

Icons are inserted as dangerouslySetInnerHTML inside a <span>, and are decorative by default. If needed, you can wrap it in a <figure> or manually add ARIA attributes like:

<figure role="img" aria-label="React logo">
  <StackIcon name="react" />
</figure>

---

📂 Folder structure

Icons are embedded inline (no file loading needed). You do not need to manage separate assets.

---

📄 License

MIT — Made by Eugenio Ciccale