Remix Icon is a set of 2270+ free MIT-licensed neutral-style system symbols elaborately crafted for designers and developers.
All of the icons are free for both personal and commercial use.
Available as basic SVG icons and via first-party React and Vue libraries.

Browse at remixicon.com →

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.

Important Note About Numeric Icons

When using icons that start with numbers (e.g., "24HoursIcon"), you need to use them with an underscore prefix in your code:

// React
import { _24HoursIcon } from '@remixicons/react'

function MyComponent() {
  return <_24HoursIcon className="h-6 w-6" />
}

<!-- Vue -->
import { _24HoursIcon } from '@remixicons/vue'

<template>
  <_24HoursIcon class="h-6 w-6" />
</template>

This is because JavaScript identifiers cannot start with numbers. All numeric icons in our library are automatically prefixed with an underscore to make them valid JavaScript identifiers.

License

This library is MIT licensed.