Tech Stack Icons

Free SVG Tech Icons & Technology Icons

694 icons

Figma & React libraries

Pro/Library

Component Library

18 production-ready layouts. Click any component to view and copy the code.

View code →

Single Row Marquee

Marquees

Auto-scrolling horizontal strip of icons. Smooth infinite loop with faded edges. Perfect for landing pages and 'Powered by' sections.

View code →

Dual Row Marquee

FreeMarquees

Two rows scrolling in opposite directions. Row 1 goes left, row 2 goes right — a popular pattern on SaaS landing pages.

View code →

Vertical Marquee

Marquees

Continuous vertical scroll — icons flow upward in a column. Works great in sidebars or as a decorative accent column.

View code →

Grayscale → Color

Hover Effects

Icons render in grayscale by default and reveal their brand colors on hover. A subtle, elegant effect for portfolios and tech stack sections.

View code →

Glow on Hover

Hover Effects

Each icon card glows with an indigo halo and a tinted background on hover. Adds life to otherwise flat icon grids.

View code →

Scale & Pop

Hover Effects

Icons scale up with a slight background change on hover. Simple, satisfying, and works with any icon set.

react
typescript
nextjs2
tailwindcss
nodejs
postgresql
docker
vuejs
sveltejs
python
mongodb
redis
View code →

3D Flip Card

Hover Effects

Icons flip to reveal their name on the back with a 3D card rotation. Great for tech stack showcases where the name context matters.

View code →

Simple Icon Grid

Grids & Bento

Clean, responsive icon grid. The most versatile layout — works on any page. Adjust columns with grid-cols-* to fit your design.

react
typescript
nextjs2
tailwindcss
nodejs
postgresql
docker
vuejs
sveltejs
python
mongodb
redis
View code →

Grid with Labels

Grids & Bento

Icon grid where each cell shows the technology name below the icon. Ideal for 'Skills' or 'Tech stack' sections on portfolios.

Frontend

Backend

DevOps

View code →

Category Groups

Grids & Bento

Icons organised into labelled sections: Frontend, Backend, DevOps. Makes a large tech stack scannable at a glance.

React
TS + Next.js
View code →

Bento Grid

Grids & Bento

Asymmetric CSS grid with one large feature cell, a medium duo cell, and smaller single-icon cells. On-trend bento style.

View code →

Staggered Fade-in

Animated

Icons animate in from below with a cascading delay. Each icon waits its turn — great for scroll-triggered tech stack reveals.

View code →

Floating / Bobbing

Animated

Each icon gently floats up and down with a staggered phase offset, creating an organic, lively feel. Decorative and eye-catching.

Tech Stack

What I build with

A curated set of tools I use to ship fast, scalable products.

React
TypeScript
Next.js
Tailwind
PostgreSQL
Docker
AWS
Figma
View code →

Portfolio Tech Stack Section

Cards & Sections

A complete 'What I build with' section — headline, subtitle, and an icon grid with labels. Drop it straight into any portfolio page.

ReactTypeScriptNext.jsTailwind CSSNode.jsPostgreSQLDockerAWS
View code →

Tech Badge Pills

Cards & Sections

Inline pill badges combining an icon and a label. Perfect for project descriptions, README-style pages, and 'Built with' footers.

View code →

Icon with Tooltip

Cards & Sections

Hovering any icon reveals a named tooltip above it. Clean and accessible — use when you want labels without cluttering the layout.

Web AppB2B

SaaS Dashboard

Real-time analytics platform with role-based access.

BackendAPI

E-commerce API

High-throughput REST API serving 50k+ requests/day.

View code →

Project Card

Cards & Sections

Project card with title, description, category tags, and a tech stack row. Plug into any portfolio or case study grid.

View code →

Orbital Icon Ring

Special

Icons arranged in a perfect circle around a central 'hero' icon. Great as a visual centrepiece for a hero section or an 'about' page.