@rdicons/react Coming soon

All 18 libraries as React components. Only the icons you import end up in your app.

Publishing to npm is coming soon. Until then, use the website to copy icons as SVG or JSX.

Install

Choose the size that fits. See Choose how to install for a guide.

terminal

# every library in one package
npm install @rdicons/react

# or just one library (smaller)
npm install @rdicons/react-lucide

Needs React 17 or newer. ESM only, with TypeScript types included.

Use an icon

Button.tsx

import { Bell } from '@rdicons/react/tabler'
import { ArrowRight } from '@rdicons/react/lucide'

export function Alerts() {
  return (
    <button>
      <Bell size={18} /> Alerts <ArrowRight size={16} strokeWidth={1.5} />
    </button>
  )
}

Props

Prop	Default	What it does
`size`	24	Width and height in px, or any CSS length such as `"1.5em"`
`color`	text color	Any CSS color. By default the icon follows the surrounding text color
`strokeWidth`	icon's own	Changes the line thickness of outline icons
`title`	none	Accessible name. Without it the icon is hidden from screen readers
`...rest`		Any SVG prop: `className`, `style`, `onClick`, `ref`

Finding the component name

Names are the icon name in PascalCase: arrow-up-right becomes ArrowUpRight. A name that starts with a digit gets an Icon prefix, so 24-hours becomes Icon24Hours. Search any library on the icon browser; the name shown there is the one to import. Your editor will also autocomplete it.

Import paths

Library	One library package	Or from @rdicons/react
Tabler	`@rdicons/react-tabler`	`@rdicons/react/tabler`
Lucide	`@rdicons/react-lucide`	`@rdicons/react/lucide`
Phosphor	`@rdicons/react-ph`	`@rdicons/react/ph`
Material Symbols	`@rdicons/react-material-symbols`	`@rdicons/react/material-symbols`
Fluent UI	`@rdicons/react-fluent`	`@rdicons/react/fluent`
Heroicons	`@rdicons/react-heroicons`	`@rdicons/react/heroicons`
Solar	`@rdicons/react-solar`	`@rdicons/react/solar`
Huge Icons	`@rdicons/react-hugeicons`	`@rdicons/react/hugeicons`
Mingcute	`@rdicons/react-mingcute`	`@rdicons/react/mingcute`
Bootstrap	`@rdicons/react-bi`	`@rdicons/react/bi`
Carbon	`@rdicons/react-carbon`	`@rdicons/react/carbon`
Feather	`@rdicons/react-feather`	`@rdicons/react/feather`
Radix	`@rdicons/react-radix-icons`	`@rdicons/react/radix-icons`
Iconoir	`@rdicons/react-iconoir`	`@rdicons/react/iconoir`
Majesticons	`@rdicons/react-majesticons`	`@rdicons/react/majesticons`
Octicons	`@rdicons/react-octicon`	`@rdicons/react/octicon`
Remix Icon	`@rdicons/react-ri`	`@rdicons/react/ri`
Material Design Icons	`@rdicons/react-mdi`	`@rdicons/react/mdi`

Good to know

The package is big on disk because it holds every library, but bundlers drop everything you do not import.
Each library keeps its own license. Solar is CC BY 4.0 and needs credit. See Icon licenses.
On npm: @rdicons/react.