Basic Usage

The quickest way to use these icons is to simply copy the source for the icon you need from https://remixicon.com and inline it directly into your HTML:

Both icon styles are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like fill-gray-500 in a framework like Tailwind CSS.

React

First, install @remixicons/react from npm:

yarn add --dev @remixicons/react

Now each icon can be imported individually as a React component:

import { BrushIcon } from '@remixicons/react/fill'

function MyComponent() {
  return (
    <div>
      <BrushIcon className="h-5 w-5 fill-blue-500"/>
      <p>...</p>
    </div>
  )
}

The 24x24 line icons can be imported from @remixicons/react/line, and the 24x24 fill icons can be imported from @remixicons/react/fill.

Icons use an upper camel case naming convention and are always postfixed with the word Icon.

Vue

Note that this library currently only supports Vue 3.

First, install @remixicons/vue from npm:

yarn add --dev @remixicons/vue

Now each icon can be imported individually as a Vue component:

<template>
  <div>
    <BrushIcon class="h-5 w-5 fill-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
import { BrushIcon } from '@remixicons/vue/fill'

export default {
  components: { BrushIcon }
}
</script>

The 24x24 line icons can be imported from @remixicons/vue/line, and the 24x24 fill icons can be imported from @remixicons/vue/fill.

Icons use an upper camel case naming convention and are always postfixed with the word Icon.

License

This library is MIT licensed.