Tech Stack Icons — Figma Plugin
Design presentations, portfolio mockups, architecture diagrams, and README banners without ever leaving Figma. The Tech Stack Icons Figma plugin gives you instant access to 700+ SVG tech icons — searchable, themeable, and ready to drop into any frame.
Install the plugin
- Open Figma and go to Plugins → Browse plugins in Community
- Search for "Tech Stack Icons"
- Click Install
Or install directly: Tech Stack Icons Figma Plugin →
How to use
Once installed, open the plugin from Plugins → Tech Stack Icons:
- Search for any technology by name (e.g. "docker", "react", "postgresql")
- Pick a theme — Light, Dark, or Grayscale
- Click an icon to insert it directly onto your canvas as a vector frame
Icons are inserted as editable SVG vectors — not rasterized images — so they scale crisp at any size.
Three visual modes
Every icon is available in three modes, designed for different design contexts:
| Mode | Use when… |
|---|---|
| Light | Dark-background slides, dark UI mockups, dark README banners |
| Dark | Light-background presentations, white wireframes, light UI mockups |
| Grayscale | Neutral layouts, print-ready documents, minimalist portfolios |
Common design use cases
Tech stack section in a portfolio
Arrange icons in a row or grid with labels beneath each one. Use Figma's auto-layout for easy spacing control. A typical portfolio tech section takes under 2 minutes to build with the plugin.
Architecture diagrams
Combine tech stack icons with arrows and containers to create infrastructure or system design diagrams. Icons are sized consistently (each inserts as a 40×40px frame) making grid alignment automatic.
GitHub README banners
Design a 1200×300px banner in Figma with your project name and tech stack icons, export as PNG, and use it as a README hero image. Far more polished than text-only READMEs.
Slide decks and presentations
"What's in our stack?" slides are instantly clear with visual icons. Insert them into Notion, Google Slides, or Figma Slides.
Figma Component Library
Prefer components over a plugin? The Tech Stack Icons component library gives you all 700+ icons as organized Figma components you can copy into your own file or use via team library.
Open the Figma Component Library →
The component library is useful when:
- You want icons to live in a shared team library
- You need to publish icons as part of a design system
- Your team works offline or without plugin access
Icon coverage
The plugin includes icons for every major technology:
- Frontend: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, SvelteKit, Remix, Qwik
- Languages: TypeScript, JavaScript, Python, Rust, Go, Java, Ruby, PHP, Swift, Kotlin, Dart, Elixir
- Styling: Tailwind CSS, CSS3, Sass, styled-components, Bootstrap, Material UI, Chakra UI
- Databases: PostgreSQL, MySQL, MongoDB, Redis, SQLite, Supabase, Prisma, Drizzle
- Cloud & DevOps: AWS, GCP, Azure, Docker, Kubernetes, Vercel, Netlify, GitHub Actions, Terraform
- AI / ML: PyTorch, TensorFlow, scikit-learn, Hugging Face, OpenAI, LangChain
- Design & tooling: Figma, Storybook, Vite, webpack, esbuild, ESLint, Prettier
Using icons in code
If you're a developer who wants to use these same icons inside a React or Next.js app, install the NPM package:
npm i tech-stack-iconsimport StackIcon from 'tech-stack-icons'
<StackIcon name="react" className="h-10 w-10" />See the full NPM documentation or browse all icons at tech-stack-icons.com.