Components Easy

Tech Stack Icon

SVG icon pill for technology names — maps strings like "react", "tailwind", or "astro" to their brand SVG paths with consistent sizing.

Open in Lab

css javascript react

Targets: HTML

Code

:root {
  color-scheme: dark;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #080808;
  color: #e2e8f0;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 600px;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.15s, border-color 0.15s;
  cursor: default;
}

.tech-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.tech-svg {
  flex-shrink: 0;
}

.tech-name {
  text-transform: capitalize;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tech Stack Icons</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="stage">
      <div class="icon-grid" id="icon-grid"></div>
    </main>

    <script>
      const ICONS = {
        html: {
          color: '#e34f26',
          path: 'M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z'
        },
        css: {
          color: '#1572b6',
          path: 'M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z'
        },
        javascript: {
          color: '#f7df1e',
          path: 'M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z'
        },
        typescript: {
          color: '#3178c6',
          path: 'M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z'
        },
        react: {
          color: '#61dafb',
          path: 'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09c.45 0 .801.1 1.013.267 1.007.578 1.224 2.622.634 5.3-.132.582-.29 1.188-.473 1.8-.547-.16-1.134-.312-1.755-.45-.354-.5-.724-1.003-1.106-1.496.385-.38.754-.757 1.104-1.12.34-.353.665-.697.976-1.03-.374-.368-.75-.72-1.133-1.056a25.66 25.66 0 0 0-.945.976c-.38.414-.755.847-1.118 1.295a26.81 26.81 0 0 0-1.743-.29 26.81 26.81 0 0 0-1.743.29 32.53 32.53 0 0 0-1.118-1.295 27.7 27.7 0 0 0-.945-.976 24.73 24.73 0 0 0-1.133 1.056c.311.333.636.677.976 1.03.35.363.72.74 1.104 1.12-.382.493-.752.996-1.106 1.496-.621.138-1.208.29-1.755.45a24.96 24.96 0 0 1-.473-1.8c-.587-2.676-.37-4.72.63-5.3.213-.166.563-.265 1.013-.265.85 0 1.943.32 3.128.95a26.56 26.56 0 0 1 1.312.79 26.56 26.56 0 0 1 1.313-.79c1.185-.63 2.278-.95 3.128-.95zm-8.32 6.9c.19.54.403 1.08.636 1.615-.233.534-.447 1.074-.636 1.613a26.8 26.8 0 0 1-1.477-.603 24.95 24.95 0 0 1 1.477-2.625zm11.516 0c.533.844 1.032 1.735 1.477 2.625a26.81 26.81 0 0 1-1.477.602c-.19-.538-.403-1.078-.636-1.613.232-.535.446-1.075.636-1.614zM12 8.131c.39.49.773 1.003 1.148 1.535-.76-.048-1.527-.048-2.296 0 .375-.532.758-1.045 1.148-1.535zm0 7.745c-.39-.49-.773-1.004-1.148-1.536.769.048 1.536.048 2.296 0-.375.532-.758 1.046-1.148 1.536zm-2.963-3.398c-.41.57-.802 1.147-1.166 1.727a25.73 25.73 0 0 1-.897-1.727c.298-.582.6-1.16.897-1.727.364.58.756 1.157 1.166 1.727zm5.926 0c.41-.57.802-1.147 1.166-1.727.297.567.6 1.145.897 1.727a26.81 26.81 0 0 1-.897 1.727c-.364-.58-.756-1.157-1.166-1.727zm-5.46 4.553c-.85 0-1.943-.32-3.128-.95-.47-.25-.918-.53-1.312-.79a26.56 26.56 0 0 1-1.313.79c-1.185.63-2.278.95-3.128.95-.45 0-.8-.1-1.013-.267-1.007-.578-1.224-2.622-.634-5.3.132-.582.29-1.188.473-1.8.547.16 1.134.312 1.755.45.354.5.724 1.003 1.106 1.496-.385.38-.754.757-1.104 1.12-.34.353-.665.697-.976 1.03.374.368.75.72 1.133 1.056.312-.314.628-.64.945-.976.38-.414.755-.847 1.118-1.295.562.1 1.143.182 1.743.29.6-.108 1.18-.19 1.743-.29.363.448.738.881 1.118 1.295.317.336.633.662.945.976a24.73 24.73 0 0 0 1.133-1.056c-.311-.333-.636-.677-.976-1.03-.35-.363-.72-.74-1.104-1.12.382-.493.752-.996 1.106-1.496.621-.138 1.208-.29 1.755-.45.183.612.34 1.218.473 1.8.59 2.678.373 4.722-.63 5.3-.213.167-.563.267-1.013.267z'
        },
        vue: {
          color: '#42b883',
          path: 'M24 1.61h-9.94L12 5.16 9.94 1.61H0l12 20.78zM12 14.08L5.16 2.23h4.43L12 6.41l2.41-4.18h4.43z'
        },
        astro: {
          color: '#ff5d01',
          path: 'M16.074 16.86c-.72.616-2.157 1.035-3.812 1.035-2.032 0-3.735-.632-4.187-1.483-.161-.3-.198-.642-.109-.977.116-.44.62-.83 1.303-1.038a3.94 3.94 0 0 0 .694 1.108 4.129 4.129 0 0 0 2.292 1.378l.007.001.005.001a4.21 4.21 0 0 0 .832.082c.17 0 .34-.01.505-.032a4.055 4.055 0 0 0 1.01-.283c.547-.23 1.096-.645 1.46-1.253v-.001zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 21.6c-5.302 0-9.6-4.298-9.6-9.6S6.698 2.4 12 2.4 21.6 6.698 21.6 12 17.302 21.6 12 21.6z'
        },
        tailwind: {
          color: '#06b6d4',
          path: 'M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z'
        },
        nodejs: {
          color: '#339933',
          path: 'M11.998 24a12 12 0 0 1-6.073-1.648l-2.546-1.47-.005-.002-.002-.003-2.328-1.345a3.016 3.016 0 0 1-1.508-2.609V7.077a3.018 3.018 0 0 1 1.51-2.61L8.932 1.05a3.015 3.015 0 0 1 3.018 0l7.12 4.121a3.016 3.016 0 0 1 1.51 2.61v9.844a3.015 3.015 0 0 1-1.51 2.608l-4.584 2.65a11.938 11.938 0 0 1-2.488.917zm0-21.6a9.6 9.6 0 1 0 0 19.2 9.6 9.6 0 0 0 0-19.2z'
        },
        python: {
          color: '#3776ab',
          path: 'M11.914 0C5.82 0 6.2 2.656 6.2 2.656l.007 2.752h5.814v.826H3.9S0 5.789 0 11.969c0 6.18 3.403 5.963 3.403 5.963h2.03v-2.868s-.109-3.402 3.35-3.402h5.766s3.24.052 3.24-3.13V3.19S18.28 0 11.914 0zM8.708 1.84a1.05 1.05 0 1 1 0 2.101 1.05 1.05 0 0 1 0-2.1zM12.086 24c6.094 0 5.714-2.656 5.714-2.656l-.007-2.752h-5.814v-.826h8.121S24 18.21 24 12.031c0-6.18-3.403-5.963-3.403-5.963h-2.03v2.868s.109 3.402-3.35 3.402H9.451s-3.24-.052-3.24 3.13v5.313S5.72 24 12.086 24zm3.206-1.84a1.05 1.05 0 1 1 0-2.101 1.05 1.05 0 0 1 0 2.1z'
        },
      };

      const grid = document.getElementById('icon-grid');

      Object.entries(ICONS).forEach(([name, data]) => {
        const pill = document.createElement('div');
        pill.className = 'tech-pill';
        pill.innerHTML = `
          <svg class="tech-svg" width="16" height="16" viewBox="0 0 24 24" fill="${data.color}" aria-hidden="true">
            <path d="${data.path}"/>
          </svg>
          <span class="tech-name">${name}</span>
        `;
        grid.appendChild(pill);
      });
    </script>
  </body>
</html>

Tech Stack Icon

A compact component that renders an inline SVG brand icon for a given technology name. Pass a string like "react", "tailwind", or "astro" and get a correctly colored icon back. Useful for tech tag badges on resource cards or stack-display rows.

Supported technologies

HTML, CSS, JavaScript, TypeScript, React, Next.js, Vue, Astro, Svelte, Tailwind CSS, Node.js, Python, PostgreSQL, GSAP, and more.

Notes

Uses Simple Icons paths (MIT licensed)
Some icons use fill, others need stroke — the component handles both
Pass className / class to control sizing or color overrides