React

@dev.icons/react ships every icon as a named export. Components are typed, tree-shakeable, and have no runtime dependencies.

Install

npm install @dev.icons/react

Usage

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

export function Logo() {
  return <_React size={32} />;
}

Monochrome variants

Import from the /mono subpath:

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

export function MonoLogo() {
  return <_React size={32} />;
}

Monochrome icons use currentColor, so they inherit the parent’s text color.

Props

Every icon accepts standard SVG props plus these:

Prop	Type	Default	Description
size	string | number	"1em"	Sets both width and height
color	string	"currentColor"	Sets the root fill. Visible on monochrome icons.
alt	string	none	Accessible name, rendered as an SVG <title>
mirrored	boolean	false	Flips the icon horizontally (scale(-1, 1))

Anything else (className, style, onClick, aria-*, data-*) is forwarded to the root <svg>. To set defaults for a subtree, wrap it in IconContext.Provider:

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

<IconContext.Provider value={{ size: 24 }}>
  <_React />
</IconContext.Provider>

Tree-shaking

Use named imports. Wildcard imports pull in the entire catalog and defeat tree-shaking in most bundlers.

// Good: only _React lands in your bundle
import { _React } from "@dev.icons/react";

// Bad: pulls everything
import * as Devicons from "@dev.icons/react";

SSR and React Server Components

Icons are pure components with no useState or useEffect. They work in React Server Components, Next.js app/ routes, Remix, and any SSR setup without extra config. In Astro, they render to static SVG without a client:* directive.

// app/page.tsx
import { _React } from "@dev.icons/react";

export default function Page() {
  return <_React size={64} />;
}

Accessibility

When an icon carries meaning, pass alt. It renders as the SVG’s <title>:

<_React alt="React" size={24} />

For purely decorative icons, hide them from assistive tech:

<_React aria-hidden="true" size={24} />

For icon-only buttons, put the label on the button instead:

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

<button aria-label="Open React docs">
  <_React size={20} aria-hidden="true" />
</button>