Scienceicons NPM

React

First, install @scienceicons/react from npm:

npm install @scienceicons/react

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

import { OpenAccessIcon } from '@scienceicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <OpenAccessIcon className="h-6 w-6 text-blue-500" />
      <p>...</p>
    </div>
  )
}

The 24x24 outline icons can be imported from @scienceicons/react/24/outline, the 24x24 solid icons can be imported from @scienceicons/react/24/solid, and the 20x20 solid icons can be imported from @scienceicons/react/20/solid.

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

Browse the full list of icon names on UNPKG →

Vue

Note that this library currently only supports Vue 3.

First, install @scienceicons/vue from npm:

npm install @scienceicons/vue

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

<template>
  <div>
    <OpenAccessIcon class="h-6 w-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script>
import { OpenAccessIcon } from '@scienceicons/vue/24/solid'

export default {
  components: { OpenAccessIcon },
}
</script>

The 24x24 outline icons can be imported from @scienceicons/vue/24/outline, the 24x24 solid icons can be imported from @scienceicons/vue/24/solid, and the 20x20 solid icons can be imported from @scienceicons/vue/20/solid.

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

Browse the full list of icon names on UNPKG →