Developer Icons

developer-icons

What It Is

developer-icons is an npm package of curated, optimized SVG icons for popular technologies — HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js, Docker, PostgreSQL, and 300+ more. Each icon is a React component, TypeScript-typed, and SVGO-optimized.

This is the standard icon library for all Kevin's projects (mywifi-redesign, dmhub, guestnetworks).

• GitHub: https://github.com/xandemon/developer-icons (839 stars)
• Browse all icons: https://xandemon.github.io/developer-icons/icons/All
• License: MIT

Installation

npm i developer-icons

Basic Usage

import { HtmlIcon, JavascriptIcon, ReactIcon, NextjsIcon } from "developer-icons"

export function TechStack() {
  return (
    <div>
      <ReactIcon size={32} />
      <NextjsIcon size={32} />
      <JavascriptIcon size={32} />
    </div>
  )
}

Props

<ReactIcon size={48} className="opacity-80 hover:opacity-100" />
<DockerIcon size={40} color="#2496ED" style={{ marginRight: 8 }} />

Variants

Icons ship in three variants — append suffix to the base name:

import { ReactIcon, ReactLightIcon, ReactWordmarkIcon } from "developer-icons"

// Dark-mode aware
<ReactIcon className="dark:hidden" />
<ReactLightIcon className="hidden dark:block" />

Common Icons

import {
  HtmlIcon, CssIcon, JavascriptIcon, TypescriptIcon,
  ReactIcon, NextjsIcon, TailwindcssIcon, NodejsIcon,
  PostgresqlIcon, MysqlIcon, MongodbIcon, RedisIcon,
  DockerIcon, GithubIcon, VercelIcon, AwsIcon,
  PrismaIcon, GraphqlIcon, FigmaIcon, VscodeIcon,
} from "developer-icons"