Fanmade icons to complement Heroicons.

Heroicons are amazing, but they don't include some icons I need. I've been creating these missing icons myself so they share a similar style, size and naming scheme.

Unfortunately, I can't contribute these icons to the Heroicons repository. From the README:

We're not accepting contributions for new icons [...]. Instead we encourage you to release your own icons in your own library [...].

So I am sharing these icons in my own library as a Sidekick to the Hero.

Browse them at sidekickicons.andri.io.

List of available icons

Outline	Solid	Mini	Micro	Code	Class	Usage
				arc-third	ArcThirdIcon	loading, spinner
				arrow-path-clock	ArrowPathClockIcon	history
				chevron-down-up	ChevronDownUpIcon	collapse
				chevron-left-right	ChevronLeftRightIcon	expand
				chevron-right-left	ChevronRightLeftIcon	collapse
				compass	CompassIcon	explore
				cookie	CookieIcon	privacy, consent, tracking
				crown	CrownIcon	upgrade, pro, premium, subscribe
				floppy-disk	FloppyDiskIcon	save
				headphones	HeadphonesIcon	listen, undeafen
				headphones-slash	HeadphonesSlashIcon	deafen
				mask	MaskIcon	privacy, security
				microphone-slash	MicrophoneSlashIcon	mute
				pin	PinIcon	pin, focus, keep
				pin-slash	PinSlashIcon	unpin, unfocus, unkeep
				shield	ShieldIcon	security, protection
				sidebar-left	SidebarLeftIcon	sidebar, menu
				sidebar-right	SidebarRightIcon	sidebar, menu
				view-split	ViewSplitIcon	layout, split

Usage

These icons can be used exactly like Heroicons. You can copy the SVG source of an icon from sidekickicons.andri.io and inline it directly into your HTML:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="currentColor"
  aria-hidden="true"
  data-slot="icon"
  class="size-6 text-gray-500"
>
  <path
    d="M12 5a.75.75 0 0 0-.643.363L8.145 10.7 3.408 7.621a.75.75 0 0 0-1.15.74l1.5 10A.75.75 0 0 0 4.5 19h15a.75.75 0 0 0 .742-.639l1.5-10a.75.75 0 0 0-1.15-.74L15.855 10.7l-3.212-5.336A.75.75 0 0 0 12 5Z"
  />
</svg>

If you use TailwindCSS, you need to add the size-6 class to 24px icons, size-5 to 20px icons, and size-4 to 16px icons. You can also change the text color with text-gray-500 or any other color class.

Otherwise, you need to use CSS or set the width and height attributes for the size and change the color attribute for the color.

React

First, install @sidekickicons/react from npm:

npm install @sidekickicons/react

Now each icon can be used alongside Heroicons and imported individually as a React component:

import { CrownIcon } from '@sidekickicons/react/24/solid'
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <CrownIcon className="size-6 text-blue-500" />
      <BeakerIcon className="size-6 text-green-500" />
    </div>
  )
}

Import the icons from their respective directory:

• 24x24 outline: @sidekickicons/react/24/outline
• 24x24 solid: @sidekickicons/react/24/solid
• 20x20 solid: @sidekickicons/react/20/solid
• 16x16 solid: @sidekickicons/react/16/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

First, install @sidekickicons/vue from npm:

npm install @sidekickicons/vue

Now each icon can be used alongside Heroicons and imported individually as a Vue component:

<template>
  <div>
    <CrownIcon class="size-6 text-blue-500" />
    <BeakerIcon class="size-6 text-green-500" />
  </div>
</template>

<script setup>
import { CrownIcon } from '@sidekickicons/vue/24/solid'
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

Import the icons from their respective directory:

• 24x24 outline: @sidekickicons/vue/24/outline
• 24x24 solid: @sidekickicons/vue/24/solid
• 20x20 solid: @sidekickicons/vue/20/solid
• 16x16 solid: @sidekickicons/vue/16/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 →

Contributing

Feel free to suggest icons in an issue or create a pull request with your own icons.

I will create a better contribution guide in the future.

License

This library is MIT licensed.