@noho-digital/remix-icons-svg

@noho-digital/remix-icons-svg

All ~3200 Remix Icons as importable SVG strings with framework wrapper components for Svelte, React, and Vue.

Install

npm install @noho-digital/remix-icons-svg

Usage

SVG Strings (framework-agnostic)

import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
// Each export is an SVG string: '<svg viewBox="0 0 24 24" ...>...</svg>'

Svelte

<script>
  import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
  import { Icon } from '@noho-digital/remix-icons-svg/svelte';
</script>

<Icon icon={RiHomeLine} size="md" alt="Home" />
<Icon icon={RiSearchFill} size="sm" />

React

import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
import { Icon } from '@noho-digital/remix-icons-svg/react';

function App() {
  return (
    <>
      <Icon icon={RiHomeLine} size="md" alt="Home" />
      <Icon icon={RiSearchFill} size="sm" />
    </>
  );
}

Vue / Nuxt

<script setup>
import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
import { Icon } from '@noho-digital/remix-icons-svg/vue';
</script>

<template>
  <Icon :icon="RiHomeLine" size="md" alt="Home" />
  <Icon :icon="RiSearchFill" size="sm" />
</template>

Direct SVG file import

import icon from '@noho-digital/remix-icons-svg/icons/RiHomeLine.svg';

Icon Component Props

Sizes

Icon Naming

Icons follow PascalCase with an Ri prefix:

• home-line.svg → RiHomeLine
• search-fill.svg → RiSearchFill

How It Works

The icon components use CSS mask-image to render SVGs. The icon inherits currentColor from its parent, making it easy to style with CSS or Tailwind (text-red-500, etc.).

License

Icons are from Remix Icon (Apache 2.0).