Website Technology Icons (wticons)

A collection of 200+ icons of languages, frameworks, databases, tools, browsers, operating systems and AI products, shipped as Astro and React components.

Every icon now sits on a modern, uniform shape: a 512 × 512 squircle tile (a rounded square with continuous corners, like an app icon) that carries the original brand colours and gradients. Because every icon shares the same silhouette and padding, they line up in grids and lists without any extra styling.

npm i @wticons/astro
npm i @wticons/react

Astro components render an <img> through Astro's <Image>, so the SVG is served as a cacheable asset and the page stays small. React components render an inline <svg> and spread their props onto it. See the package readmes for details.

Requires Astro 5.7 or newer.

---
import { Php, AdobePhotoshop, VisualStudioCode } from '@wticons/astro';
---

<Php />
<AdobePhotoshop width={32} height={32} class="icon" />
<VisualStudioCode alt="VS Code" loading="eager" />

Components accept the same props as <Image> except src. alt defaults to the product name (PHP, Node.js, Visual Studio Code), width and height default to 512 and loading to lazy.

Importing from the package root pulls every icon into the build graph. To emit only the icons you render, import components individually, or import the SVG file itself when you need an inline <svg> you can style with CSS:

---
import Php from '@wticons/astro/Php';
import PhpInline from '@wticons/astro/icons/php.svg';
---

<Php />
<PhpInline class="icon" />

import { Php, AdobePhotoshop, VisualStudioCode } from '@wticons/react';

const Stack = () => (
  <ul>
    <li><Php width={24} /> PHP</li>
    <li><AdobePhotoshop width={24} /> Photoshop</li>
    <li><VisualStudioCode width={24} /> Visual Studio Code</li>
  </ul>
);

Some icons share a name with the library you are using them in. Import them under an alias:

import { Astro as AstroIcon } from '@wticons/astro';
import { React as ReactIcon } from '@wticons/react';

The repository is a pnpm workspace. The icons are drawn in Affinity Designer in wticons.afdesign, one named 512 × 512 artboard per icon. Raw artboard exports live in src/, their SVGO-optimized copies in icons/, and the packages in packages/ are generated from icons/.

pnpm install
pnpm build   # optimizes icons/ with SVGO, rebuilds both packages and updates the icon list below

To add or update an icon, draw it on a squircle artboard in wticons.afdesign, export the 512 × 512 SVG into both src/ and icons/, add its product name to icon-names.json (used as the default alt in Astro) and run pnpm build, which optimizes the copy in icons/ in place. The file name becomes the component name in PascalCase (visual-studio-code.svg → VisualStudioCode).

Both packages are versioned together and published by GitHub Actions on a v*.*.* tag:

make release VERSION=3.1.0

This bumps both packages, commits, tags v3.1.0 and pushes. The workflow then builds, runs astro check, publishes @wticons/astro and @wticons/react to npm with provenance and creates a GitHub Release.

• SVGPorn - a huge collection of SVG logos by @gilbarbara
• devicon - a set of icons representing programming languages, designing, and development tools.
• SVGO - Node.js tool for optimizing SVG files
• TechIcons - set of technology icons
• Affinity Designer - the vector editor the icons are drawn in

MIT