Morpheme Icons

Basic Usage

The quickest way to use these icons is to simply copy the source for the icon you need from morpheme-icons.vercel.app and inline it directly into your HTML:

<svg class="h-6 w-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 styleable 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 @morphemeicons/react from npm:

npm install @morphemeicons/react

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

import { ActivityHeartIcon } from '@morphemeicons/react/untitled'

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

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 @morphemeicons/vue from npm:

npm install @morphemeicons/vue

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

<script setup>
import { ActivityHeartIcon } from '@morphemeicons/vue/untitled'
</script>

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

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 →

License

This library is MIT licensed.