Hack Club’s icons are a superset of Spectrum’s incredible collection (also published as spectrum-icons). Designed for use with our Design System.

See them all

npm i @hackclub/icons

import React from 'react'
import Icon from '@hackclub/icons'

export default () => (
  <div style={{ color: 'cyan' }}>
    <Icon glyph="clubs" size={128} />
    <Icon glyph="bank-circle" size={64} />
    <Icon glyph="leaders" size={32} />
  </div>
)

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:

<img src="https://icons.hackclub.com/api/icons/red/clubs">
<img src="https://icons.hackclub.com/api/icons/hackclub-green/battery-bolt">
<img src="https://icons.hackclub.com/api/icons/0xc78ad4/sam.svg">

1. Clone & enter the repo.

$ git clone https://github.com/hackclub/icons.git
$ cd icons

2. Install dependencies.

$ yarn

3. Build library.

yarn run prepare

4. Run docs locally.

yarn run dev