https://github.com/ndri/sidekickicons
Fanmade icons to complement Heroicons
https://github.com/ndri/sidekickicons
heroicons icons react svg vue
Last synced: 6 months ago
JSON representation
Fanmade icons to complement Heroicons
- Host: GitHub
- URL: https://github.com/ndri/sidekickicons
- Owner: ndri
- License: mit
- Created: 2024-10-28T12:18:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2026-01-13T17:58:22.000Z (6 months ago)
- Last Synced: 2026-01-13T19:24:30.250Z (6 months ago)
- Topics: heroicons, icons, react, svg, vue
- Language: JavaScript
- Homepage: https://sidekickicons.com
- Size: 3.15 MB
- Stars: 39
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Fanmade icons to complement [Heroicons](https://github.com/tailwindlabs/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](https://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](https://sidekickicons.com/) and inline it directly into your HTML:
```html
```
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:
```sh
npm install @sidekickicons/react
```
Now each icon can be used alongside Heroicons and imported individually as a React component:
```js
import { CrownIcon } from '@sidekickicons/react/24/solid'
import { BeakerIcon } from '@heroicons/react/24/solid'
function MyComponent() {
return (
)
}
```
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 →](https://unpkg.com/browse/@sidekickicons/react/24/outline/)
### Vue
First, install `@sidekickicons/vue` from npm:
```sh
npm install @sidekickicons/vue
```
Now each icon can be used alongside Heroicons and imported individually as a Vue component:
```vue
import { CrownIcon } from '@sidekickicons/vue/24/solid'
import { BeakerIcon } from '@heroicons/vue/24/solid'
```
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 →](https://unpkg.com/browse/@sidekickicons/vue/24/outline/)
### Svelte
First, install [`@sidekickicons/svelte`](https://github.com/ndri/sidekickicons-svelte) from npm:
```bash
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`](https://github.com/ndri/sidekickicons-svelte) package includes Heroicons as well.
```svelte
import { CrownIcon, BeakerIcon } from '@sidekickicons/svelte/24/solid'
```
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 →](https://unpkg.com/browse/@sidekickicons/dist/svelte/24/outline/)
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](https://github.com/Rails-Designer/rails_icons).
First, add the gem:
```bash
bundle add rails_icons
```
Then, install the icons:
```bash
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`.
```ruby
# 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](https://github.com/tailwindlabs/heroicons) and the tooling from there is unchanged. The license for the files from that repository is included in the [HEROICONS-LICENSE](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](LICENSE) file.