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

# React

_hot_

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 prefix?** _(note)_
>
> Export names come from the icon's file name, split on `-` and PascalCased (`css` becomes `Css`, `discord-icon` becomes `DiscordIcon`). Four names would collide with framework imports: React, Vue, Svelte, and Astro. Those get an underscore prefix: `import { _React } from "@dev.icons/react";`

## Install

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

## Usage

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

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

## Monochrome variants

Import from the `/mono` subpath:

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

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

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

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

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

For purely decorative icons, hide them from assistive tech:

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

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

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

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

---

← Previous: [Quick start](/docs/quick-start.md)
→ Next: [Vue](/docs/vue.md)

[← All docs](/docs.md)