Plus UI Design · Practical guides

Build a readable portfolio tech stack section

Show the technologies used in a project with icons and labels that remain understandable in every theme.

Select the technologies that explain the work

Choose the tools that matter to the project: framework, language, database and deployment platform. A short, relevant set tells a clearer story than a wall of every tool you have tried. Add a sentence describing how they were used.

Use the React package

Install tech-stack-icons, then use the component with an icon name from the library. The example below keeps the name and label together. Change the icon names to match your project, and verify each one using the site’s search or the package’s TypeScript autocomplete.

Check layout and contrast

Give each icon a consistent container and keep the visible label. Compare the light, dark and grayscale variants on the actual page background. Check narrow widths so that the row wraps without clipping its labels.

Example to adapt

import StackIcon from "tech-stack-icons";

const tools = [
  { name: "react", label: "React" },
  { name: "typescript", label: "TypeScript" },
] as const;

export function ProjectStack() {
  return <ul className="flex flex-wrap gap-6">
    {tools.map(tool => <li key={tool.name}>
      <StackIcon name={tool.name} className="h-8 w-8" />
      <span>{tool.label}</span>
    </li>)}
  </ul>;
}