[Home](/index.md) › [Docs](/docs.md) › Packages › React

# React

_new_

Tree-shakeable, typed React components for every Devicons icon.

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

> **Why the underscore suffix?** _(note)_
>
> Some icon names collide with reserved imports from major frameworks. When that happens, the export is suffixed with an underscore: `import { _React } from "@dev.icons/react";`

## Install

```bash
npm install @dev.icons/react
```

## Usage

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

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

## Monochrome variants

Import from the `/mono` subpath:

```tsx
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.

```tsx
// 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.

```tsx
// 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`:

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

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

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

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

---

← Previous: [skill.md](/docs/skill.md)
→ Next: [Vue](/docs/vue.md)

[← All docs](/docs.md)