# Sidekickicons

> Sidekickicons are 69 fanmade icons in the Heroicons style, for icons Heroicons doesn't have, like keyboard, H4 to H6, video call states and loading spinners. They come in the same four styles and sizes as Heroicons and work next to it in React, Vue, Svelte and React Native.

Heroicons hasn't added new icons since version 2.2.0. https://sidekickicons.com lets you search all 385 icons: 316 Heroicons and 69 Sidekickicons. The current Sidekickicons version is 0.17.0. Sidekickicons are MIT-licensed like Heroicons, and are made by Andri Soone, not by Tailwind Labs.

## Styles

Every icon comes in four styles. Each style is a directory in every package:

- Outline: 24x24, 1.5 px stroke, `24/outline`. Use at 24 px (Tailwind `size-6`).
- Solid: 24x24, solid fill, `24/solid`. Use at 24 px (`size-6`).
- Mini: 20x20, solid fill, `20/solid`. Use at 20 px (`size-5`), for buttons and inputs.
- Micro: 16x16, solid fill, `16/solid`. Use at 16 px (`size-4`), for badges and small text.

Component names are the icon name in PascalCase followed by `Icon`: `crown` is `CrownIcon`, `arrow-path-clock` is `ArrowPathClockIcon`.

## Using the icons

### React

Heroicons and Sidekickicons are separate packages with the same API:

```bash
npm install @heroicons/react @sidekickicons/react
```

```jsx
import { ChartBarIcon } from "@heroicons/react/24/outline";
import { CrownIcon } from "@sidekickicons/react/24/outline";

<CrownIcon className="size-6 text-slate-500" />
```

### Vue

```bash
npm install @heroicons/vue @sidekickicons/vue
```

```vue
<script setup>
import { ChartBarIcon } from "@heroicons/vue/24/outline";
import { CrownIcon } from "@sidekickicons/vue/24/outline";
</script>

<template>
  <CrownIcon class="size-6 text-slate-500" />
</template>
```

### Svelte

Heroicons has no official Svelte package, so `@sidekickicons/svelte` includes both Heroicons and Sidekickicons. It needs Svelte 5.19 or later. The components already have their default size.

```bash
npm install @sidekickicons/svelte
```

```svelte
<script>
  import { ChartBarIcon, CrownIcon } from "@sidekickicons/svelte/24/outline";
</script>

<CrownIcon class="text-slate-500" />
```

### React Native

Heroicons has no official React Native package either, so `@sidekickicons/react-native` includes both. It draws icons with react-native-svg (in Expo, install it with `npx expo install react-native-svg`).

```bash
npm install @sidekickicons/react-native react-native-svg
```

```jsx
import { ChartBarIcon, CrownIcon } from "@sidekickicons/react-native/24/outline";

<CrownIcon size={24} color="#64748b" />
```

### Plain SVG

Every icon is available as an SVG file at `https://sidekickicons.com/svg/{style directory}/{icon name}.svg`, for example https://sidekickicons.com/svg/24/outline/crown.svg. The SVGs use `currentColor`, so they take the surrounding text color.

## Icons

- [Full icon list](https://sidekickicons.com/llms-full.txt): every icon with its component name, keywords and description
- [icons.json](https://sidekickicons.com/icons.json): the same as machine-readable JSON, with links to each icon's SVG files
- [All icons](https://sidekickicons.com/icons): a page for every icon, with code and examples
- [Icons missing from Heroicons](https://sidekickicons.com/missing-heroicons): every Sidekickicon, grouped by use

## Optional

- [Sidekickicons on GitHub](https://github.com/ndri/sidekickicons): source, changelog and roadmap
- [Suggest an icon](https://github.com/ndri/sidekickicons/discussions/new?category=icon-suggestions)
- [Heroicons](https://heroicons.com): the official Heroicons site