Notion
Knowledge and planning
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="notion" variant="light" className="h-12 w-12" />14 curated logos · SVG + React
Productivity logos
The tools that keep work moving.
Find productivity, collaboration and automation tool logos. Download Notion, Slack, Linear, Trello, n8n and more as SVG, with React component examples.
14 of 14 logos · light variant
Slack
Team communication
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="slack" variant="light" className="h-12 w-12" />
Linear
Issue tracking
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="linear" variant="light" className="h-12 w-12" />
Trello
Project planning
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="trello" variant="light" className="h-12 w-12" />
Asana
Work management
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="asana" variant="light" className="h-12 w-12" />
ClickUp
Work management
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="clickup" variant="light" className="h-12 w-12" />
Airtable
Collaborative databases
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="airtable" variant="light" className="h-12 w-12" />
Jira
Project and issue tracking
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="jira" 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" />
n8n
Workflow automation
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="n8n" variant="light" className="h-12 w-12" />
Zapier
Workflow automation
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="zapier" variant="light" className="h-12 w-12" />
Make
Workflow automation
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="make" variant="light" className="h-12 w-12" />
OneDrive
File collaboration
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="onedrive" variant="light" className="h-12 w-12" />
Atlassian
Team software
Download SVG ↓React example
import StackIcon from "tech-stack-icons";
<StackIcon name="atlassian" variant="light" className="h-12 w-12" />Use productivity logos in your next project
Show how your team plans, communicates and automates work. Keep planning, knowledge management and automation separate in your diagram so the collection tells readers how the tools connect.
Create a team onboarding page with Notion for knowledge, Slack for communication, Linear for issues and n8n for automation.
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.