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 { ReactIcon } from "@dev.icons/react";

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

Monochrome variants

Import from the /mono subpath:

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

export function MonoLogo() {
  return <ReactIcon 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	number | string	24	Sets both width and height
title	string	undefined	Accessible name rendered as <title>
color	string	currentColor	Override fill color

Anything else (className, onClick, aria-*, data-*) is forwarded to the root <svg>.

Tree-shaking

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

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

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

SSR and React Server Components

All icons are pure components with no useState or useEffect. They work in React Server Components, Next.js app/ routes, Remix loaders, and any SSR setup without extra config.

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

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

Accessibility

Icons are decorative by default (aria-hidden="true"). When an icon carries meaning, pass a title:

<ReactIcon title="React" size={24} />

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

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

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