Hack Club’s iconset, a superset of spectrum-icons
npm install @hackclub/icons@hackclub/iconsHack Club’s icons are a superset of Spectrum’s incredible collection (also published as spectrum-icons). Designed for use with our Design System.
``sh`
npm i @hackclub/icons
`js
import React from 'react'
import Icon from '@hackclub/icons'
export default () => (
$3
https://icons.hackclub.com/api/icons/:color/:glyph
- :glyph - A glyph from icons.hackclub.com.
- :color - Any valid HTML color or Hack Club Theme color prefixed with hackclub-. Replace # with 0x when using a hexadecimal color.All responses are SVGs with the MIME type
image/svg+xml. You can optionally include the .svg file extension.Examples:
`html



`$3
Copy and paste the Hack Club Icon component from the Figma file: figma.com/file/u8evOObGA4HCzUKlrVra1q/Hack-Club-Icon-Component
Choose the icon you'd like by modifying the
Glyph.Development Setup
1. Clone & enter the repo.
`sh
$ git clone https://github.com/hackclub/icons.git
$ cd icons
`2. Install dependencies.
`sh
$ yarn
`3. Build library.
`sh
yarn run prepare
`4. Run docs locally.
`sh
yarn run dev
`Adding an icon
If you’d like to add an icon, the Figma file is Hack Club Icons. 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
, then in the Icon source file, add a new one (alphabetically), using a wrapping if you have several After publishing, remember to update the package dependency on the docs site so it’s showing the latest iconset.