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
				badge	BadgeIcon	shape
				bars-3-bottom-center	Bars3BottomCenterIcon	text, align, justify, center
				blockquote	BlockquoteIcon	quote
				checklist	ChecklistIcon	todo, tasks
				checklist-boxes	ChecklistBoxesIcon	todo, tasks
				check-double	CheckDoubleIcon	read receipt, received
				chevron-down-up	ChevronDownUpIcon	collapse
				chevron-left-right	ChevronLeftRightIcon	expand
				chevron-right-left	ChevronRightLeftIcon	collapse
				circle	CircleIcon	shape
				compass	CompassIcon	explore
				computer-laptop	ComputerLaptopIcon	device, desktop
				cookie	CookieIcon	privacy, consent, tracking
				crown	CrownIcon	upgrade, pro, premium, subscribe
				dots-2x3	Dots2x3Icon	drag, grip, handle
				dots-3x2	Dots3x2Icon	drag, grip, handle
				face-smile-plus	FaceSmilePlusIcon	reaction
				floppy-disk	FloppyDiskIcon	save
				h4	H4Icon	heading
				h5	H5Icon	heading
				h6	H6Icon	heading
				heading	HeadingIcon	heading
				headphones	HeadphonesIcon	listen, undeafen
				headphones-slash	HeadphonesSlashIcon	deafen
				indent	IndentIcon	indent
				lettered-list	LetteredListIcon	ordered list
				lock-semi-open	LockSemiOpenIcon	unlocked
				mask	MaskIcon	privacy, security
				microphone-slash	MicrophoneSlashIcon	mute
				outdent	OutdentIcon	outdent
				password	PasswordIcon	security, login
				password-pencil	PasswordPencilIcon	edit, fill
				photo-plus	PhotoPlusIcon	attach, upload
				pilcrow	PilcrowIcon	paragraph, formatting
				pin	PinIcon	pin, focus, keep
				pin-slash	PinSlashIcon	unpin, unfocus, unkeep
				quotation-mark	QuotationMarkIcon	quote
				shield	ShieldIcon	security, protection
				sidebar-left	SidebarLeftIcon	sidebar, menu
				sidebar-right	SidebarRightIcon	sidebar, menu
				square	SquareIcon	shape
				triangle	TriangleIcon	shape
				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.

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.