{"id":37485142,"url":"https://github.com/ndri/sidekickicons","last_synced_at":"2026-01-16T07:31:48.622Z","repository":{"id":261567747,"uuid":"879711139","full_name":"ndri/sidekickicons","owner":"ndri","description":"Fanmade icons to complement Heroicons","archived":false,"fork":false,"pushed_at":"2026-01-13T17:58:22.000Z","size":3308,"stargazers_count":39,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-13T19:24:30.250Z","etag":null,"topics":["heroicons","icons","react","svg","vue"],"latest_commit_sha":null,"homepage":"https://sidekickicons.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ndri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-28T12:18:51.000Z","updated_at":"2026-01-13T17:58:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"f97f7749-8f48-4377-b192-1017982b7985","html_url":"https://github.com/ndri/sidekickicons","commit_stats":null,"previous_names":["ndri/sidekickicons"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/ndri/sidekickicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndri%2Fsidekickicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndri%2Fsidekickicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndri%2Fsidekickicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndri%2Fsidekickicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndri","download_url":"https://codeload.github.com/ndri/sidekickicons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndri%2Fsidekickicons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["heroicons","icons","react","svg","vue"],"created_at":"2026-01-16T07:31:48.504Z","updated_at":"2026-01-16T07:31:48.612Z","avatar_url":"https://github.com/ndri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\".github/logo-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\".github/logo-light.svg\"\u003e\n    \u003cimg alt=\"Sidekickicons\" width=\"315\" height=\"117\" style=\"max-width: 100%\" src=\".github/logo-light.svg\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\nFanmade icons to complement [Heroicons](https://github.com/tailwindlabs/heroicons).\n\nHeroicons 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.\n\nUnfortunately, I can't contribute these icons to the Heroicons repository. From the README:\n\n\u003e We're not accepting contributions for new icons [...]. Instead we encourage you to release your own icons in your own library [...].\n\nSo I am sharing these icons in my own library as a Sidekick to the Hero.\n\nBrowse them at [sidekickicons.com](https://sidekickicons.com/).\n\n## Examples of new icons\n\n| Outline                                                      | Solid                                                      | Mini                                                       | Micro                                                      | Code             | Class               | Usage                      |\n| ------------------------------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------- | ------------------- | -------------------------- |\n| ![mask.svg](src/24/outline/mask.svg)                         | ![mask.svg](src/24/solid/mask.svg)                         | ![mask.svg](src/20/solid/mask.svg)                         | ![mask.svg](src/16/solid/mask.svg)                         | mask             | MaskIcon            | privacy, security          |\n| ![floppy-disk.svg](src/24/outline/floppy-disk.svg)           | ![floppy-disk.svg](src/24/solid/floppy-disk.svg)           | ![floppy-disk.svg](src/20/solid/floppy-disk.svg)           | ![floppy-disk.svg](src/16/solid/floppy-disk.svg)           | floppy-disk      | FloppyDiskIcon      | save                       |\n| ![microphone-slash.svg](src/24/outline/microphone-slash.svg) | ![microphone-slash.svg](src/24/solid/microphone-slash.svg) | ![microphone-slash.svg](src/20/solid/microphone-slash.svg) | ![microphone-slash.svg](src/16/solid/microphone-slash.svg) | microphone-slash | MicrophoneSlashIcon | mute                       |\n| ![arc-third.svg](src/24/outline/arc-third.svg)               | ![arc-third.svg](src/24/solid/arc-third.svg)               | ![arc-third.svg](src/20/solid/arc-third.svg)               | ![arc-third.svg](src/16/solid/arc-third.svg)               | arc-third        | ArcThirdIcon        | loading, spinner           |\n| ![chevron-down-up.svg](src/24/outline/chevron-down-up.svg)   | ![chevron-down-up.svg](src/24/solid/chevron-down-up.svg)   | ![chevron-down-up.svg](src/20/solid/chevron-down-up.svg)   | ![chevron-down-up.svg](src/16/solid/chevron-down-up.svg)   | chevron-down-up  | ChevronDownUpIcon   | collapse                   |\n| ![robot.svg](src/24/outline/robot.svg)                       | ![robot.svg](src/24/solid/robot.svg)                       | ![robot.svg](src/20/solid/robot.svg)                       | ![robot.svg](src/16/solid/robot.svg)                       | robot            | RobotIcon           | bot, automation, system    |\n| ![arrow-path-clock.svg](src/24/outline/arrow-path-clock.svg) | ![arrow-path-clock.svg](src/24/solid/arrow-path-clock.svg) | ![arrow-path-clock.svg](src/20/solid/arrow-path-clock.svg) | ![arrow-path-clock.svg](src/16/solid/arrow-path-clock.svg) | arrow-path-clock | ArrowPathClockIcon  | history                    |\n| ![quotation-mark.svg](src/24/outline/quotation-mark.svg)     | ![quotation-mark.svg](src/24/solid/quotation-mark.svg)     | ![quotation-mark.svg](src/20/solid/quotation-mark.svg)     | ![quotation-mark.svg](src/16/solid/quotation-mark.svg)     | quotation-mark   | QuotationMarkIcon   | quote                      |\n| ![cookie.svg](src/24/outline/cookie.svg)                     | ![cookie.svg](src/24/solid/cookie.svg)                     | ![cookie.svg](src/20/solid/cookie.svg)                     | ![cookie.svg](src/16/solid/cookie.svg)                     | cookie           | CookieIcon          | privacy, consent, tracking |\n| ![computer-laptop.svg](src/24/outline/computer-laptop.svg)   | ![computer-laptop.svg](src/24/solid/computer-laptop.svg)   | ![computer-laptop.svg](src/20/solid/computer-laptop.svg)   | ![computer-laptop.svg](src/16/solid/computer-laptop.svg)   | computer-laptop  | ComputerLaptopIcon  | device, desktop            |\n| ![pin.svg](src/24/outline/pin.svg)                           | ![pin.svg](src/24/solid/pin.svg)                           | ![pin.svg](src/20/solid/pin.svg)                           | ![pin.svg](src/16/solid/pin.svg)                           | pin              | PinIcon             | pin, focus, keep           |\n| ![headphones.svg](src/24/outline/headphones.svg)             | ![headphones.svg](src/24/solid/headphones.svg)             | ![headphones.svg](src/20/solid/headphones.svg)             | ![headphones.svg](src/16/solid/headphones.svg)             | headphones       | HeadphonesIcon      | listen, undeafen           |\n\nSee the full list of new icons at https://sidekickicons.com/?iconset=Sidekickicons.\n\n## Usage\n\nThese 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:\n\n```html\n\u003csvg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n  data-slot=\"icon\"\n  class=\"size-6 text-gray-500\"\n\u003e\n  \u003cpath\n    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\"\n  /\u003e\n\u003c/svg\u003e\n```\n\nIf 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.\n\nOtherwise, you need to use CSS or set the `width` and `height` attributes for the size and change the `color` attribute for the color.\n\n### React\n\nFirst, install `@sidekickicons/react` from npm:\n\n```sh\nnpm install @sidekickicons/react\n```\n\nNow each icon can be used alongside Heroicons and imported individually as a React component:\n\n```js\nimport { CrownIcon } from '@sidekickicons/react/24/solid'\nimport { BeakerIcon } from '@heroicons/react/24/solid'\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cCrownIcon className=\"size-6 text-blue-500\" /\u003e\n      \u003cBeakerIcon className=\"size-6 text-green-500\" /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nImport the icons from their respective directory:\n\n- 24x24 outline: `@sidekickicons/react/24/outline`\n- 24x24 solid: `@sidekickicons/react/24/solid`\n- 20x20 solid: `@sidekickicons/react/20/solid`\n- 16x16 solid: `@sidekickicons/react/16/solid`\n\nIcons use an upper camel case naming convention and are always suffixed with the word `Icon`.\n\n[Browse the full list of icon names on UNPKG \u0026rarr;](https://unpkg.com/browse/@sidekickicons/react/24/outline/)\n\n### Vue\n\nFirst, install `@sidekickicons/vue` from npm:\n\n```sh\nnpm install @sidekickicons/vue\n```\n\nNow each icon can be used alongside Heroicons and imported individually as a Vue component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cCrownIcon class=\"size-6 text-blue-500\" /\u003e\n    \u003cBeakerIcon class=\"size-6 text-green-500\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { CrownIcon } from '@sidekickicons/vue/24/solid'\nimport { BeakerIcon } from '@heroicons/vue/24/solid'\n\u003c/script\u003e\n```\n\nImport the icons from their respective directory:\n\n- 24x24 outline: `@sidekickicons/vue/24/outline`\n- 24x24 solid: `@sidekickicons/vue/24/solid`\n- 20x20 solid: `@sidekickicons/vue/20/solid`\n- 16x16 solid: `@sidekickicons/vue/16/solid`\n\nIcons use an upper camel case naming convention and are always suffixed with the word `Icon`.\n\n[Browse the full list of icon names on UNPKG \u0026rarr;](https://unpkg.com/browse/@sidekickicons/vue/24/outline/)\n\n### Svelte\n\nFirst, install [`@sidekickicons/svelte`](https://github.com/ndri/sidekickicons-svelte) from npm:\n\n```bash\npnpm install @sidekickicons/svelte\n```\n\nNow 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.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { CrownIcon, BeakerIcon } from '@sidekickicons/svelte/24/solid'\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  \u003cCrownIcon class=\"text-blue-500\" /\u003e\n  \u003cBeakerIcon class=\"text-green-500\" /\u003e\n\u003c/div\u003e\n```\n\nImport the icons from their respective directory:\n\n- 24x24 outline: `@sidekickicons/svelte/24/outline`\n- 24x24 solid: `@sidekickicons/svelte/24/solid`\n- 20x20 solid: `@sidekickicons/svelte/20/solid`\n- 16x16 solid: `@sidekickicons/svelte/16/solid`\n\nIcons use an upper camel case naming convention and are always suffixed with the word `Icon`.\n\n[Browse the full list of icon names on UNPKG \u0026rarr;](https://unpkg.com/browse/@sidekickicons/dist/svelte/24/outline/)\n\nThe 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.\n\n### Rails\n\nIn Rails, you can use Heroicons and Sidekickicons using [Rails Icons](https://github.com/Rails-Designer/rails_icons).\n\nFirst, add the gem:\n\n```bash\nbundle add rails_icons\n```\n\nThen, install the icons:\n\n```bash\nrails generate rails_icons:install --libraries=heroicons\nrails generate rails_icons:install --libraries=sidekickicons\n```\n\nNow 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`.\n\n```ruby\n# Heroicons beaker icon, outline 24px\nicon \"beaker\"\n# Heroicons beaker icon, solid 24px\nicon \"beaker\", variant: \"solid\"\n# Sidekickicons crown icon, outline 24px\nicon \"crown\", library: \"sidekickicons\"\n# Sidekickicons crown icon, mini 20px\nicon \"crown\", library: \"sidekickicons\", variant: \"mini\"\n```\n\n## Contributing\n\nFeel free to suggest icons in an issue or create a pull request with your own icons.\n\nI will create a better contribution guide in the future.\n\n## License\n\nThis library is MIT licensed.\n\nThe 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.\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndri%2Fsidekickicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndri%2Fsidekickicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndri%2Fsidekickicons/lists"}