• 3453 icons - every Simple Icon as a type-safe function
• Zero dependencies beyond nodx
• Fully typed - autocomplete for every icon name
• Easy to customize - Tailwind, inline styles or global CSS
• No client JS - pure server-rendered SVG

Icon count and Simple Icons version correspond to 16.28.0. After each update the count in this README is refreshed by the code generator.

Installation

# Deno (JSR)
deno add --save-exact jsr:@varavel/nodx-simpleicons

# Node / Bun / Deno via npm
npm install --save-exact @varavel/nodx-simpleicons

Requires jsr:@varavel/nodx@^1.0.0 (or npm:@varavel/nodx) as a peer.

Usage

Every icon is a function that accepts optional NodX children to customize the SVG. The function name is Si + the slug with the first letter capitalized.

Browse icons at simpleicons.org: for example the slug github becomes SiGithub, nodedotjs becomes SiNodedotjs, and 1001tracklists becomes Si1001tracklists. Your editor will autocomplete the names.

import * as N from "@varavel/nodx";
import {
  SiDocker,
  SiGithub,
  SiGithubactions,
  SiGo,
  SiGoland,
  SiNodedotjs,
  SiTailwindcss,
} from "@varavel/nodx-simpleicons";

function myPage(): N.Node {
  return N.Div(
    SiGithub(),
    SiGithubactions(),
    SiNodedotjs(),
    SiGoland(),
    SiTailwindcss(),
    SiDocker(),
    // ... 3400+ icons available
    SiGo(
      // Any NodX attribute works
      N.Class("size-6 text-blue-500"),
    ),
  );
}

console.log(myPage().render());

With a namespace import you do not need to list icons individually:

import * as N from "@varavel/nodx";
import * as SimpleIcons from "@varavel/nodx-simpleicons";

const page = N.Div(
  SimpleIcons.SiGithub(N.Class("size-6 text-blue-500")),
);

Each icon renders an <svg> like this:

<svg
  role="img"
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  fill="currentColor"
  data-nodxts="simpleicons"
>
  <title>GitHub</title>
  <path d="M12 .297c-6.63 ..." />
</svg>

The role, viewBox, xmlns, fill and data-nodxts attributes follow the Simple Icons guidelines.

Icons metadata

All icons with their brand metadata are exported as iconsInfo:

import { iconsInfo, SiGithub } from "@varavel/nodx-simpleicons";

console.log(iconsInfo.length); // ~3453
console.log(iconsInfo[0]);
// {
//   title: "1001Tracklists",
//   slug: "1001tracklists",
//   hex: "40AEF0",
//   source: "https://www.1001tracklists.com",
//   guidelines: "",
//   aliases: [],
//   icon: Si1001tracklists
// }

// Find icons by color or source
const redIcons = iconsInfo.filter((i) => i.hex === "FF0000");

IconsInfo is also exported as an alias for Go compatibility.

import { IconsInfo } from "@varavel/nodx-simpleicons";
// IconsInfo === iconsInfo

Customization

Individually

Pass normal NodX attributes to any icon:

import { Class, Style } from "@varavel/nodx";
import { SiGithub } from "@varavel/nodx-simpleicons";

SiGithub(Class("size-6 text-blue-500"));
SiGithub(Style("fill: red; width: 32px;"));
SiGithub(Class("w-8 h-8"), Style("color: rebeccapurple"));

Globally

Every icon includes data-nodxts="simpleicons". Target it in CSS to style all icons at once:

svg[data-nodxts="simpleicons"] {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

Avoiding conflicts with Tailwind or custom styles

Use :not() to let per-icon Tailwind classes override the global defaults:

svg[data-nodxts="simpleicons"]:not([class*="size-"]) {
  width: 24px;
  height: 24px;
}

Then:

SiGithub(); // uses 24px default
SiGithub(Class("size-32")); // overrides default

API

| Export | Description | | ------------------------------------ | ------------------------------------------------------------------ | | SiIconName(...children) | Icon component, e.g. SiGithub(), SiDocker() | | iconsInfo / IconsInfo | Array of { title, slug, hex, source, guidelines, aliases, icon } | | simpleiconsSvgWrapper(...children) | Low-level SVG wrapper (advanced) | | simpleIconsSvgWrapper | Alias of simpleiconsSvgWrapper |

All icon functions have the signature (...children: NodeChild[]) => Node so you can pass Class, Style, Id, Group, Raw, or any Node.

The wrapper is useful if you need to build a custom icon with the same skeleton:

import { Raw } from "@varavel/nodx";
import { simpleiconsSvgWrapper } from "@varavel/nodx-simpleicons";

const custom = simpleiconsSvgWrapper(
  Raw(`<title>Custom</title><path d="M0 0h24v24H0z"/>`),
);

Versioning

This package versions independently of Simple Icons. Each release notes the Simple Icons version it was generated from (see Simple Icons version header in src/generated/icons.ts and src/generated/info.ts).

Check new Simple Icons releases at https://github.com/simple-icons/simple-icons/releases and https://www.npmjs.com/package/simple-icons?activeTab=versions.

License

MIT, see LICENSE.

Simple Icons themselves are licensed under CC0 1.0 Universal. See also https://simpleicons.org/.