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 { _React, GithubIcon } from "@dev.icons/react/mono";

<div className="text-accent">
  <_React 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 { _React } from "@dev.icons/react/mono";

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

CSS custom properties

Use design tokens to control icon color:

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

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

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

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

Dark mode

Some full-color marks are mostly black or white and disappear on one theme (GitHub, Vercel, OpenAI). Icon pages flag these, and so does search-index.json with badInDark and badInLight. You have two options:

• Switch to the monochrome variant, which follows the text color on either theme:

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

<span className="text-text">
  <GithubIcon size={32} />
</span>

• Keep the color mark and give it a contrasting backdrop:

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

<span className="inline-flex p-1 bg-white">
  <GithubIcon size={32} />
</span>

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.