React
UI library
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="react" variant="light" className="h-12 w-12" />20 curated logos · SVG + React
Frontend logos
Show what powers your frontend.
Frontend framework, UI library and build tool logos. Download React, Vue, Angular, Svelte, Tailwind CSS and more as SVG, with React usage examples.
20 of 20 logos · light variant
Vue.js
UI framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="vuejs" variant="light" className="h-12 w-12" />
Angular
Application framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="angular17" variant="light" className="h-12 w-12" />
Svelte
UI framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="sveltejs" variant="light" className="h-12 w-12" />
Next.js
Full-stack React framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="nextjs" variant="light" className="h-12 w-12" />
Nuxt
Full-stack Vue framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="nuxtjs" variant="light" className="h-12 w-12" />
Astro
Web framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="astro" variant="light" className="h-12 w-12" />
HTML5
Markup
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="html5" variant="light" className="h-12 w-12" />
CSS3
Styling
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="css3" variant="light" className="h-12 w-12" />
JavaScript
Programming language
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="js" variant="light" className="h-12 w-12" />
TypeScript
Programming language
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="typescript" variant="light" className="h-12 w-12" />
Tailwind CSS
CSS framework
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="tailwindcss" variant="light" className="h-12 w-12" />
Sass
CSS preprocessor
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="sass" variant="light" className="h-12 w-12" />
Vite
Build tool
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="vitejs" variant="light" className="h-12 w-12" />
webpack
Module bundler
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="webpack" variant="light" className="h-12 w-12" />
Storybook
Component development
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="storybook" variant="light" className="h-12 w-12" />
shadcn/ui
UI components
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="shadcnui" variant="light" className="h-12 w-12" />
Radix UI
UI primitives
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="radixui" variant="light" className="h-12 w-12" />
Redux
State management
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="redux" variant="light" className="h-12 w-12" />
GSAP
Animation
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="gsap" variant="light" className="h-12 w-12" />Use frontend logos in your next project
Separate the framework from styling and build tools when documenting a frontend stack. A framework such as Next.js can also cover server-side work, so these collections can overlap.
Use React, TypeScript, Tailwind CSS and Vite in a portfolio skills section, or compare Vue, Angular and Svelte in team documentation.
From SVG to React
Choose the background and download an SVG for your README, presentation or website. For React, install tech-stack-icons, open a logo’s React example and copy its component. The package name in the example matches the library asset.
npm install tech-stack-iconsLight, dark and grayscale select library variants. Some marks use the same artwork in light and dark modes; check the preview on your final background.
Logos identify their respective products and companies. Download availability does not change their brand usage requirements. Keep the original proportions and label tools clearly.
From browser to canvas
Your stack, inside your design tools.
Insert technology logos into designs and workshop diagrams with the Tech Stack Icons plugins.