npm and JavaScript

Pick a package

Install the package for your framework. It brings @iconoven/icons, the icon data, with it.

pnpm, Yarn and Bun work the same way: pnpm add @iconoven/react, yarn add @iconoven/react or bun add @iconoven/react.

React

npm install @iconoven/react

import { HomeIcon, Camera } from '@iconoven/react'

<HomeIcon />
<Camera size={32} color="#0F766E" title="Take a photo" />

Every icon has a component in two names: HomeIcon and its short form Home. Import only the icons you use; bundlers drop the rest. IconProvider sets defaults for every icon inside it, @iconoven/react/dynamic renders an icon from its name, and @iconoven/react/motion adds the motions when you import it once in your app.

Vue

npm install @iconoven/vue

<script setup lang="ts">
import { HomeIcon, Camera } from '@iconoven/vue'
</script>

<template>
  <HomeIcon />
  <Camera :size="32" color="#0F766E" title="Take a photo" />
</template>

The same components and props as React. For motion, import @iconoven/vue/motion once in main.ts. Server rendering and Nuxt output the full SVG markup.

Svelte

npm install @iconoven/svelte

<script>
  import { HomeIcon, Camera } from '@iconoven/svelte'
</script>

<HomeIcon />
<Camera size={32} title="Take a photo" />

The package ships .svelte source, so your build compiles it like your own components. Each icon can also be imported on its own: import Home from '@iconoven/svelte/icons/home'.

Solid

npm install @iconoven/solid

import { HomeIcon, Camera } from '@iconoven/solid'

export function Toolbar() {
  return (
    <>
      <HomeIcon />
      <Camera size={32} color="#0F766E" title="Take a photo" />
    </>
  )
}

Preact

npm install @iconoven/preact

import { HomeIcon, Camera } from '@iconoven/preact'

export function Toolbar() {
  return (
    <>
      <HomeIcon />
      <Camera size={32} color="#0F766E" title="Take a photo" />
    </>
  )
}

Angular

npm install @iconoven/angular

import { Component } from '@angular/core'
import { IconComponent, home, Camera } from '@iconoven/angular'

@Component({
  selector: 'app-toolbar',
  imports: [IconComponent],
  template: `
    <svg ioIcon [icon]="home"></svg>
    <svg ioIcon [icon]="Camera" size="32" title="Take a photo"></svg>
  `,
})
export class ToolbarComponent {
  home = home
  Camera = Camera
}

Put ioIcon on an <svg> and pass the icon data. It works with zoneless apps and server rendering. provideIconDefaults() sets defaults for every icon in an injector.

React Native

npm install @iconoven/react-native react-native-svg

import { HomeIcon, Camera } from '@iconoven/react-native'

export function Toolbar() {
  return (
    <>
      <HomeIcon />
      <Camera size={32} color="#0F766E" title="Take a photo" />
    </>
  )
}

For Expo, run npx expo install react-native-svg. On bare iOS projects, run npx pod-install after installing.

Web component

npm install @iconoven/web-component

import '@iconoven/web-component/auto'

<iconoven-icon name="camera" size="32"></iconoven-icon>
<iconoven-icon name="home" motion="draw-on" trigger="hover"></iconoven-icon>

This registers <iconoven-icon>, which works in any framework or in plain HTML. To pick the tag name yourself, import define from @iconoven/web-component and call define('my-icon').

Plain JavaScript

npm install @iconoven/icons

import { renderSvg } from '@iconoven/icons'
import { home } from '@iconoven/icons/icons'

document.body.innerHTML = renderSvg(home, { strokeWidth: 1.5 })

@iconoven/icons/icons has every icon as a named export in camel case (creditCard), so you import only what you use.

SVG files

@iconoven/svg has every icon as a 24 × 24 file in round/ and sharp/, drawn with currentColor. Use it from a CDN with no install:

<img src="https://cdn.jsdelivr.net/npm/@iconoven/svg@1/round/home.svg" alt="Home">
<img src="https://unpkg.com/@iconoven/svg@1/sharp/home.svg" alt="Home">

Or install it and import the files with your bundler (Vite shown):

import homeUrl from '@iconoven/svg/round/home.svg'      // a URL, for <img src>
import homeSvg from '@iconoven/svg/round/home.svg?raw'  // the markup, for inline use

An <img> always draws in black. Inline the SVG, or use it as a CSS mask, so it takes the text colour. More in SVG and other formats.

Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@iconoven/font@1/iconoven.css">

<i class="io io-home" aria-hidden="true"></i>

Or npm install @iconoven/font and import '@iconoven/font/iconoven.css'. io is the base class, and every icon has a class io-<name>, with the same names as the site.

Props

The React, Vue, Svelte, Solid, Preact and React Native components take the same props:

Pro styles

Every package draws the free Stroke style. The other styles come with IconOven Pro in @iconoven-pro/icons, which has the same export names. Pro setup shows how to point npm, pnpm, Yarn or Bun at the Pro registry with your licence key.