Theming

Each icon has two variants: a full-color brand mark and a monochrome glyph that inherits currentColor. Import monochrome variants from the /mono subpath.

Tint with currentColor

Set a text color on the parent element. Monochrome icons inherit it.

import { ReactIcon, GithubIcon } from "@dev.icons/react/mono";

<div className="text-accent">
  <ReactIcon size={48} />
</div>

<button className="text-text-muted hover:text-accent transition-colors">
  <GithubIcon size={20} />
</button>

Override with the color prop

Pass a color directly for one-off use:

import { ReactIcon } from "@dev.icons/react/mono";

<ReactIcon color="#ff4d00" size={48} />

CSS custom properties

Use design tokens to control icon color:

:root {
  --icon-color: #ff4d00;
}

.icon {
  color: var(--icon-color);
}

import { ReactIcon } from "@dev.icons/react/mono";

<span className="icon">
  <ReactIcon size={48} />
</span>

Dark mode brand colors

Some brands have different marks for light and dark backgrounds. Devicons exposes suffix variants for these:

import { GithubIcon, GithubLightIcon } from "@dev.icons/react";

function ThemedLogo() {
  return (
    <>
      <GithubIcon className="dark:hidden" size={32} />
      <GithubLightIcon className="hidden dark:block" size={32} />
    </>
  );
}

Brand guidelines

Icons with strict brand guidelines (Slack, Figma, Google) default to guideline-approved colors. Check the brand’s usage rules before overriding. Most guidelines are linked on the icon’s detail page.