Cubing icons Basic use Use from npm SVG Icon catalog
On GitHub ↗️

It's time for cubing icons!

Cubing icons can be used for any cubing project under a free license. Use them for your web site or web app today!

Use cubing icons in your web project

The simplest way to use cubing icons in your project is as follows:

<!-- Include the following line once on your page: -->
 <link rel="stylesheet" href="https://cdn.cubing.net/v0/css/@cubing/icons/css">

<!-- Add any number of icons like this: -->
 <ul>
  <li><span class="cubing-icon event-333"></span> 3×3×3</li>
  <li><span class="cubing-icon event-clock"></span> Clock</li>
  <li><span class="cubing-icon unofficial-fto"></span> FTO</li>
</ul>

This is how it looks:

  • 3×3×3
  • Clock
  • FTO

For a list of available icons, consult the catalog.

Using the npm package

Cubing icons are published as @cubing/icons on npm. If you are more comfortable using npm for your project dependencies, you should be able to install this package and use it with a bundler of your choice in one of these ways:

page.html <link rel="stylesheet" href="@cubing/icons/css">

style.css @import "@cubing/icons/css";

app.js import { CubingIcons } from "@cubing/icons/js";

// Work with a list of available icons
console.log(Object.values(CubingIcons));

SVG files

You can find .svg files of the icons by looking in the src/svg folder of the project repository.

Icon catalog

Icons are listed here with their CSS class names.

WCA events (current and former)

Unofficial events

Penalties