Figma
Interface design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="figma" variant="light" className="h-12 w-12" />15 curated logos · SVG + React
Design tool logos
Show your design toolkit.
Design software logos for portfolios and handoff diagrams. Download Figma, Sketch, Adobe Illustrator, Photoshop, Framer and more as SVG with React examples.
15 of 15 logos · light variant
Sketch
Interface design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="sketch" variant="light" className="h-12 w-12" />
Adobe Illustrator
Vector illustration
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="adobeillustrator" variant="light" className="h-12 w-12" />
Adobe Photoshop
Image editing
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="photoshop" variant="light" className="h-12 w-12" />
Canva
Visual design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="canva" variant="light" className="h-12 w-12" />
Framer
Website design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="framer" variant="light" className="h-12 w-12" />
Webflow
Website design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="webflow" variant="light" className="h-12 w-12" />
Miro
Visual collaboration
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="miro" variant="light" className="h-12 w-12" />
Affinity Designer
Vector design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="affinitydesigner" variant="light" className="h-12 w-12" />
Affinity Photo
Image editing
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="affinityphoto" variant="light" className="h-12 w-12" />
Affinity Publisher
Page layout
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="affinitypublisher" variant="light" className="h-12 w-12" />
Adobe Lightroom
Photo editing
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="lightroom" variant="light" className="h-12 w-12" />
Adobe After Effects
Motion design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="ae" variant="light" className="h-12 w-12" />
Adobe Premiere Pro
Video editing
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="premierepro" variant="light" className="h-12 w-12" />
Adobe XD
Interface design
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="xd" variant="light" className="h-12 w-12" />Use design tool logos in your next project
Use design tool logos to explain a creative process or handoff. Preserve each mark’s proportions, then put different logos inside equal-size containers for a balanced layout.
Show a workflow from Photoshop or Illustrator to Figma, then Framer or Webflow. Use Miro when the workflow includes collaborative planning.
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.