React — Rivo Icons

React

Use Rivo Icons in your React project with @rivo-icons/react.

Installation

npm install @rivo-icons/react

Usage

Import individual icons by name — only what you use gets bundled:

import { IconName } from '@rivo-icons/react'

import { Setting, Dollar, Clock, Plus } from '@rivo-icons/react'

export default function App() {
  return (
    <div>
      {/* Default size: 24px */}
      <Setting />

      {/* Custom size */}
      <Dollar size={32} />

      {/* Custom color */}
      <Clock size={20} color="#6366f1" />

      {/* CSS class */}
      <Plus className="my-icon" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`size`	`number \| string`	`24`	Width and height in px
`color`	`string`	`currentColor`	Stroke / fill color
`strokeWidth`	`number \| string`	`1.5`	Stroke width (outline icons)
`className`	`string`	—	CSS class attribute

TypeScript

All props are fully typed. Icon components extend a shared IconProps interface:

interface IconProps {
  size?: number | string
  color?: string
  strokeWidth?: number | string
  className?: string  // React / Solid
}

Browse All Icons →Back to Getting Started