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.com.

Examples of new icons

Outline	Solid	Mini	Micro	Code	Class	Usage
				mask	MaskIcon	privacy, security
				floppy-disk	FloppyDiskIcon	save
				microphone-slash	MicrophoneSlashIcon	mute
				arc-third	ArcThirdIcon	loading, spinner
				chevron-down-up	ChevronDownUpIcon	collapse
				robot	RobotIcon	bot, automation, system
				arrow-path-clock	ArrowPathClockIcon	history
				quotation-mark	QuotationMarkIcon	quote
				cookie	CookieIcon	privacy, consent, tracking
				computer-laptop	ComputerLaptopIcon	device, desktop
				pin	PinIcon	pin, focus, keep
				headphones	HeadphonesIcon	listen, undeafen

See the full list of new icons at https://sidekickicons.com/?iconset=Sidekickicons.

Usage

These icons can be used exactly like Heroicons. You can copy the SVG source of an icon from sidekickicons.com 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 →

Svelte

First, install @sidekickicons/svelte from npm:

pnpm install @sidekickicons/svelte

Now each icon can be imported and used in Svelte components. Since there is no official Svelte package for Heroicons, the @sidekickicons/svelte package includes Heroicons as well.

<script lang="ts">
  import { CrownIcon, BeakerIcon } from '@sidekickicons/svelte/24/solid'
</script>

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

Import the icons from their respective directory:

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

The imported components are simple Svelte components that accept the class prop. The component already includes the size-6, size-5, or size-4 class, so the class adds any additional classes you want to apply.

Rails

In Rails, you can use Heroicons and Sidekickicons using Rails Icons.

First, add the gem:

bundle add rails_icons

Then, install the icons:

rails generate rails_icons:install --libraries=heroicons
rails generate rails_icons:install --libraries=sidekickicons

Now you can use the icons in your code. The default library is Heroicons and you need to specify Sidekickicons. The available variants are outline (default), solid, mini, and micro.

# Heroicons beaker icon, outline 24px
icon "beaker"
# Heroicons beaker icon, solid 24px
icon "beaker", variant: "solid"
# Sidekickicons crown icon, outline 24px
icon "crown", library: "sidekickicons"
# Sidekickicons crown icon, mini 20px
icon "crown", library: "sidekickicons", variant: "mini"

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.

The repository is forked from Heroicons and the tooling from there is unchanged. The license for the files from that repository is included in the HEROICONS-LICENSE file.

The icons themselves have been replaced and are not affiliated with Tailwind Labs, Inc. The license for the new icons is included in the LICENSE file.