Simple Icons alternative with full-color brand logos | theSVG

Full-color brand SVGs for React: thesvg.org · Docs · Library comparison · Star on GitHub

If you need a Simple Icons alternative because every logo comes out as one flat color, use thesvg. It ships the full-color mark for 7,600+ brands, with mono, light, dark and wordmark variants, and it installs as React components, a CDN URL or a CLI. This post shows how to wire full-color logos into React so they also behave in dark mode.

The ticket said "add the integration logos to the settings page." Twelve brands, how hard could it be. I installed the monochrome icon set everyone reaches for, rendered the grid, and sent a screenshot to design. The reply came back in four minutes: "why is everything gray?"

Not gray, exactly. Each logo was one flat color, and Slack, Google and Figma looked like silhouettes of themselves. A single-path icon set can only do that. It cannot ship a brand's real mark.

I build thesvg, which exists to fix this, so everything below uses it and every claim can be checked.

Simple Icons alternatives at a glance

For a longer head-to-head with counts and licenses, see the library comparison.

Why Simple Icons is single color

A single-path icon is small and recolors with CSS. It breaks when a mark depends on more than one color to be recognizable. Google, Slack, Microsoft and Chrome are the obvious cases. A gradient is another, and gradients are everywhere in 2026 logo refreshes. You also get no wordmark. A symbol beside a name works in a toolbar, but a partner page usually wants the wide logo.

Check your own brand list

Do not take my word for coverage. List ten brands on your roadmap, not the ones in today's design, and run them through the registry. This script reports which ones exist and which variants each has. It reads the public JSON from the CDN, so nothing needs installing.

const registry =
  "https://cdn.jsdelivr.net/gh/glincker/thesvg@main/src/data/icons.json";
const wanted = ["github", "slack", "stripe", "vercel", "notion"];

const res = await fetch(registry);
const icons: Array<{ slug: string; variants: Record<string, string> }> =
  await res.json();

for (const slug of wanted) {
  const hit = icons.find((i) => i.slug === slug);
  const variants = hit ? Object.keys(hit.variants).join(", ") : "";
  console.log(slug.padEnd(10), hit ? "found" : "missing", variants);
}

Run it with your own list. It takes a minute.

Full-color brand logos in React

Install the React package from thesvg.

npm install @thesvg/react

Import the icons you use, individually, so the bundler keeps only those.

import { Github, Slack, Stripe } from "@thesvg/react";

export function Integrations() {
  return (
    <ul className="grid grid-cols-3 gap-4">
      {[Github, Slack, Stripe].map((Icon, i) => (
        <li key={i}>
          <Icon width={40} height={40} aria-hidden />
        </li>
      ))}
    </ul>
  );
}

Export names follow each brand's slug, so check the package README for the exact one. If you would rather install nothing for a handful of icons, the CDN serves one SVG per URL, which is the quickest way to try it.

<img
  src="https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/github/default.svg"
  width="40"
  height="40"
  alt="GitHub"
/>

Pin a release tag instead of main in production so an upstream change cannot alter a logo under you. The next example does that.

Dark mode for brand logos without a rewrite

The usual failure is a black logo on a near-black card. With variants, the fix is to pick the file by theme rather than recolor.

import { useTheme } from "next-themes";

const CDN = "https://cdn.jsdelivr.net/gh/glincker/thesvg";
const release = "thesvg%403.4.0";

function iconUrl(slug: string, variant: string, ref = release): string {
  return [CDN, "@", ref, "/public/icons/", slug, "/", variant, ".svg"].join("");
}

export function BrandLogo({ slug, size = 40 }: { slug: string; size?: number }) {
  const { resolvedTheme } = useTheme();
  const variant = resolvedTheme === "dark" ? "dark" : "default";

  return (
    <img
      src={iconUrl(slug, variant)}
      width={size}
      height={size}
      alt=""
      loading="lazy"
    />
  );
}

Two caveats. Not every brand ships a dark variant, so check the icon's page or fall back to default.svg on a 404. And the first paint uses the default theme unless you read it on the server, which can cause a one-frame flash.

If you do not need runtime switching, put the logos on a neutral light card in both themes. Most partner pages do that anyway.

Wordmarks and the wide logo problem

The other thing a symbol-only library cannot do is the wide logo. A partner page with six names in a row reads better with wordmarks than with six squares, and mixing the two looks like a mistake.

With variant files you choose per layout, using the same helper from the dark mode example. A compact toolbar takes default.svg. A partner strip takes wordmark.svg, with wordmark-dark.svg and wordmark-light.svg for themed versions.

export function PartnerStrip({ slugs }: { slugs: string[] }) {
  return (
    <ul className="flex flex-wrap items-center gap-8">
      {slugs.map((slug) => (
        <li key={slug}>
          <img
            src={iconUrl(slug, "wordmark")}
            height={28}
            alt=""
            loading="lazy"
          />
        </li>
      ))}
    </ul>
  );
}

Not every brand ships a wordmark. In a strip, a missing wordmark looks worse than a missing logo, so I fall back to the symbol with the brand name beside it.

Frequently asked questions

Is there a Simple Icons alternative with full-color logos?

Yes, thesvg. It has full-color logos for 7,600+ brands with color, mono, light, dark and wordmark variants.

Does Simple Icons support dark mode?

Its icons are single path, so you recolor them with CSS. There is no separate dark artwork, which works for silhouettes and not for multicolor marks.

Can I use full-color brand SVGs commercially?

The file licenses allow it, but trademark rules still apply. Showing a logo to say you integrate with a product is normally fine. Implying a partnership you do not have is not.

How do I get logos for niche developer tools?

Run the coverage script above. thesvg has a submit page if a brand is missing.

The bottom line

The job needed color, and a monochrome set cannot provide it. thesvg gives you the real mark, the dark version and the wordmark from one place, so the question from design never comes back.

If you try thesvg, a star on GitHub helps other developers find it, and the docs cover every package. Which brand could you never find a decent SVG for?

GDS K S · thegdsks.com · building thesvg.org and Glincker · follow on X @thegdsks

Brand logos should be a dependency, not a design chore.