Basic Usage

The quickest way to use these icons is to copy the source for the icon you need from the repository SVGs at optimized/<16 | 20 | 24>/jk and inline it directly into your HTML:

<svg
  class="size-6 text-gray-500"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  stroke-width="2"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

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

React

First, install @jokula-heroicons/react from npm:

npm install @jokula-heroicons/react

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

import { IslNorthernLightsIcon } from '@jokula-heroicons/react/24/jk'

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

The jk 16x16, 20x20, and 24x24 outline icons can be imported from @jokula-heroicons/react/<16 | 20 | 24>/jk.

The original 24x24 solid icons can be imported from @jokula-heroicons/react/24/solid, the 20x20 solid icons can be imported from @jokula-heroicons/react/20/solid, and the 16x16 solid icons can be imported from @heroicons/react/16/solid.

Vue

First, install @jokula-heroicons/vue from npm:

npm install @jokula-heroicons/vue

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

<template>
  <div>
    <IslNorthernLightsIcon class="size-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { IslNorthernLightsIcon } from '@jokula-heroicons/vue/24/jk'
</script>

The jk 16x16, 20x20, and 24x24 outline icons can be imported from @jokula-heroicons/vue/<16 | 20 | 24>/jk.

The original 24x24 solid icons can be imported from @jokula-heroicons/vue/24/solid, the 20x20 solid icons can be imported from @jokula-heroicons/vue/20/solid, and the 16x16 solid icons can be imported from @heroicons/vue/16/solid.

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

License

This library is MIT licensed.