Hack Club Brand

Download HQ’s logos and preview our brand colors & font.

Logos

Flag Orpheus Top
Orpheus Flag – Top
SVGPNGPDF
Flag Orpheus Left
Orpheus Flag – Left
Flag Standalone
Flag Standalone
Flag Orpheus Top Bw
Orpheus Flag – Top (B/W)
Flag Orpheus Left Bw
Orpheus Flag – Left (B/W)
Flag Standalone Bw
Flag Standalone (B/W)
Flag Standalone Wtransparent
Flag Standalone Wtransparent
Icon Rounded
Icon Rounded
Icon Square
Icon Square
Icon Progress Rounded
Icon Progress Rounded
Icon Progress Square
Icon Progress Square
Download all →

HCB Logos

Hcb Light
HCB Light
Hcb Dark
HCB Dark
See all HCB logos →

HTML banners

PreviewHTML code
Flag Orpheus Top
<a href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 256px; z-index: 999;" src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club"/></a>
Flag Orpheus Left
<a href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 256px; z-index: 999;" src="https://assets.hackclub.com/flag-orpheus-left.svg" alt="Hack Club"/></a>
Banners 2024
<a href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 256px; z-index: 999;" src="https://assets.hackclub.com/banners/2024.svg" alt="Hack Club"/></a>
React component →

Colors

red#ec3750
orange#ff8c37
yellow#f1c40f
green#33d6a6
cyan#5bc0de
blue#338eda
purple#a633d6
muted#8492a6

Fonts

Phantom Sansis our brand font.
Webfont CSS (for HQ sites only)
@font-face {
  font-family: 'Phantom Sans';
  src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff')
      format('woff'),
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2')
      format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Phantom Sans';
  src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff')
      format('woff'),
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff2')
      format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Phantom Sans';
  src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff')
      format('woff'),
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2')
      format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

Icons

We have a custom iconset, published as @hackclub/icons.

Explore Hack Club Icons →

UI components

Want to make a Hack Club themed site? Use our pre-made CSS and UI components to hackify your site.

Explore Hack Club Theme →Theme Starter on GitHub →CSS Theme on GitHub →