tech-stack-icons
Version:
A Typesafe React component for rendering over **395+ original SVG icons** for the most-used design & development tools, frameworks, and AI services.
107 lines (76 loc) • 2.99 kB
Markdown
# 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**](https://tech-stack-icons.com/) — live search, preview, copy JSX/SVG
- 🎨 [**Figma Drag & Drop Plugin**](https://www.figma.com/community/plugin/1292847256216210035/tech-stack-design-stack-icons)
- 📁 [**Figma File of Icons**](https://www.figma.com/community/file/1095337897898466786/tech-stack-icons-design-stack-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
```bash
npm install tech-stack-icons
# or
pnpm add tech-stack-icons
# or
yarn add tech-stack-icons
```
## 🧱 Usage
```tsx
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
```tsx
<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:
```tsx
import StackIcon, { IconName } from "tech-stack-icons";
const myIcon: IconName = "typescript";
```
# 🧪 Example: Styled with Tailwind
```tsx
<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:
```jsx
<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](https://www.plusuidesign.com/about/)