{"id":19030836,"url":"https://github.com/hackclub/icons","last_synced_at":"2026-05-03T03:30:17.279Z","repository":{"id":33042785,"uuid":"146635219","full_name":"hackclub/icons","owner":"hackclub","description":"Hack Club’s iconset, a superset of spectrum-icons","archived":false,"fork":false,"pushed_at":"2024-12-17T15:10:26.000Z","size":1398,"stargazers_count":41,"open_issues_count":12,"forks_count":15,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-02-14T05:10:06.198Z","etag":null,"topics":["hackclub","icons"],"latest_commit_sha":null,"homepage":"https://icons.hackclub.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hackclub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2018-08-29T17:29:44.000Z","updated_at":"2025-02-07T02:39:00.000Z","dependencies_parsed_at":"2024-06-18T18:12:24.001Z","dependency_job_id":"0f7873d4-85e0-4e86-9957-777708cb3fa8","html_url":"https://github.com/hackclub/icons","commit_stats":{"total_commits":93,"total_committers":14,"mean_commits":6.642857142857143,"dds":0.6989247311827957,"last_synced_commit":"50c4c48f8d5dda203994d92f83122d2953d36f31"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackclub","download_url":"https://codeload.github.com/hackclub/icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240080526,"owners_count":19744878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hackclub","icons"],"created_at":"2024-11-08T21:19:46.856Z","updated_at":"2026-05-03T03:30:17.226Z","avatar_url":"https://github.com/hackclub.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@hackclub/icons`\n\nHack Club’s icons are a superset of [Spectrum](https://github.com/withspectrum/spectrum)’s incredible collection (also published as [`supercons`](https://supercons.vercel.app/)). Designed for use with our [Design System](https://github.com/hackclub/design-system).\n\n[See them all](https://hackclub-icons.now.sh)\n\n## Usage\n\n### With React\n\n```sh\nnpm i @hackclub/icons\n```\n\n```js\nimport React from 'react'\nimport Icon from '@hackclub/icons'\n\nexport default () =\u003e (\n  \u003cdiv style={{ color: 'cyan' }}\u003e\n    \u003cIcon glyph=\"clubs\" size={128} /\u003e\n    \u003cIcon glyph=\"bank-circle\" size={64} /\u003e\n    \u003cIcon glyph=\"leaders\" size={32} /\u003e\n  \u003c/div\u003e\n)\n```\n\n### With the API\n\n`https://icons.hackclub.com/api/icons/:color/:glyph`\n - `:glyph` - A glyph from [icons.hackclub.com](https://icons.hackclub.com).\n - `:color` - Any valid HTML color or [Hack Club Theme](https://theme.hackclub.com) color prefixed with `hackclub-`. Replace `#` with `0x` when using a hexadecimal color.\n\nAll responses are SVGs with the MIME type `image/svg+xml`. You can optionally include the .svg file extension.\n\nExamples:\n\n```html\n\u003cimg src=\"https://icons.hackclub.com/api/icons/red/clubs\"\u003e\n\u003cimg src=\"https://icons.hackclub.com/api/icons/hackclub-green/battery-bolt\"\u003e\n\u003cimg src=\"https://icons.hackclub.com/api/icons/0xc78ad4/sam.svg\"\u003e\n```\n\n### In Figma\n\nCopy and paste the Hack Club Icon component from the Figma file: [figma.com/file/u8evOObGA4HCzUKlrVra1q/Hack-Club-Icon-Component](https://www.figma.com/file/u8evOObGA4HCzUKlrVra1q/Hack-Club-Icon-Component)\n\nChoose the icon you'd like by modifying the `Glyph`.\n\n## Development Setup\n\n1. Clone \u0026 enter the repo.\n\n```sh\n$ git clone https://github.com/hackclub/icons.git\n$ cd icons\n```\n\n2. Install dependencies.\n\n```sh\n$ yarn\n```\n\n3. Build library.\n\n```sh\nyarn run prepare\n```\n\n4. Run docs locally.\n\n```sh\nyarn run dev\n```\n\n## Adding an icon\n\nIf you’d like to add an icon, the Figma file is [Hack Club Icons](https://www.figma.com/file/H2wiriGOtV3txSx6fwVTwsPz/Hack-Club-icons?node-id=0%3A1\u0026t=m5yDilUsUNQxrUUu-1). Try to design the icon only out of components of other icons, to keep consistency high, with those small square canvas sizes. When you’re done, clone your new icon, flatten all the layers into one shape for the simplest/smallest code/rendering, then export as an SVG with no background. Open the file, copy the `\u003cpath\u003e`, then in the Icon source file, add a new one (alphabetically), using a wrapping `\u003cg\u003e` if you have several `\u003cpath\u003e`s. Make sure to remove the fill attribute from all paths, \u0026 ensure you’re formatting props correctly as JSX (replacing hyphens with camelCase).\n\nAfter publishing, remember to update the package dependency on the docs site so it’s showing the latest iconset.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackclub%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackclub%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackclub%2Ficons/lists"}