Getting Started

Introduction

Rivo Icons is a collection of free, open-source SVG icons designed for modern web apps. Every icon is hand-crafted to a 24×24px canvas with a consistent 1.5px stroke weight.

Icons use currentColor for both fill and stroke, so they adapt automatically to your text color. All packages include TypeScript type definitions.

React

Install

npm install @rivo-icons/react

Usage

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

export default function App() {
  return (
    <div>
      <Setting size={24} />
      <Dollar size={20} color="green" />
    </div>
  )
}

Vue

Install

npm install @rivo-icons/vue

Usage

<script setup>
import { Setting, Dollar } from '@rivo-icons/vue'
</script>

<template>
  <Setting :size="24" />
  <Dollar :size="20" color="green" />
</template>

Nuxt

Install

npm install @rivo-icons/nuxt

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@rivo-icons/nuxt'],
})

Usage

Icons are auto-imported — no import statement needed:

<template>
  <IconSetting />
  <IconDollar />
</template>

Svelte

Install

npm install @rivo-icons/svelte

Usage

<script>
  import { Setting } from '@rivo-icons/svelte'
</script>

<Setting size={24} />

Solid

Install

npm install @rivo-icons/solid

Usage

import { Setting } from '@rivo-icons/solid'

export default function App() {
  return <Setting size={24} />
}

Icon Props

All icons across every framework accept the same props:

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

Raw SVG

You can always use the raw SVG directly. Download icons or copy SVG code from the Icon Browser.