Cube Icons

Eleven looks, one option

look: "flat" | "soft" | "clay" | "candy" | "paper" | "outline" | "pixel" | "glass" | "neon" | "wire" | "holo", plus glow, tint and float to taste. Fifteen ready presets in the playground.

What's inside

• 61 icons, plus pixel text for any word, and icons with their own colours
• 11 looks: flat, soft, clay, candy, paper, outline, pixel, glass, neon, wire, holo, and 15 presets in the playground
• Smooth motion: clock-timed flights with an expo ease-out curve, spin, colour blending and stagger, the same on every screen
• Interactions: hover menus, scroll-built sections, explode, magnet, morph sequences, loaders, a burst transition, and loose cubes that drift and gather
• Glow and float: bloom around the cubes, and gentle idle motion
• An editor that turns images into icons in your browser, and saves, downloads or exports them
• A Claude skill, so Claude can draw icons and wire them into your pages
• About 9 KB gzipped for the engine. A plain 2D canvas, no WebGL. Respects reduced motion.

Install

Add the two scripts before </body>, from the CDN:

<script src="https://cdn.jsdelivr.net/gh/atwalabs/[email protected]/icons.js"></script>
<script src="https://cdn.jsdelivr.net/gh/atwalabs/[email protected]/cubes.js"></script>

Or download icons.js and cubes.js and serve them yourself.

Quick start

<canvas id="hero-icon" style="width:360px;height:280px" role="img" aria-label="A rocket"></canvas>

<script>
  const stage = CubeIcons.stage(document.getElementById("hero-icon"), { look: "soft" });
  stage.show("rocket");
</script>

The canvas needs a CSS width and height; the icon scales to fit. Shape everything else in the playground, whose code box gives you the matching line to paste.

Common uses

// a menu: build on hover, fly apart on leave
link.addEventListener("pointerenter", () => stage.show("briefcase"));
menu.addEventListener("pointerleave", () => stage.clear());

// build as the section scrolls into view
CubeIcons.scroll(stage, "rocket");

// progress, bottom row first, then a tick
stage.build("rocket", progress);

// a word
stage.show(CubeIcons.text("Hello"));

The recipes have twenty-eight working examples. The docs cover React, Next.js, Vue, Svelte, Framer, Webflow and WordPress, every option, and the full API.

Your own icons

An icon is rows of palette keys; . is empty:

stage.show([
  ".RR...RR.",
  "RRRR.RRRR",
  "RRRRRRRRR",
  ".RRRRRRR.",
  "..RRRRR..",
  "...RRR...",
  "....R....",
]);

Draw them in the editor, or drop an image on it to convert. Keep them in My icons (in your browser), or download a PNG, a .js file or JSON; or copy an icons.js entry or a complete drop-in snippet. Icons can carry their own colours: { colors: { a: "#eb234f" }, rows: ["aa.."] }.

Use with Claude

Cube Icons comes with an Agent Skill that teaches Claude and other AI coding assistants to add cube icons to a page and draw new ones.

Claude Code, as a plugin:

/plugin marketplace add atwalabs/cube-icons
/plugin install cube-icons@cube-icons

Cursor, Codex, Gemini CLI, opencode and other agents, with the skills CLI:

npx skills add atwalabs/cube-icons

Claude apps: zip the skill/cube-icons folder and upload it under Settings → Capabilities → Skills.

Then ask for things like "add a cube icon menu to my landing page" or "draw a coffee cup icon for the empty state". AI tools that read websites can use llms.txt and llms-full.txt.

Browser support

Current Chrome, Edge, Firefox and Safari. The neon glow uses canvas filters and falls back to plain bright edges where they aren't supported.

Licence and credits

Made by Mohamed Atwa. MIT: free for personal and commercial use. See LICENSE.

The idea of a cube swarm that builds an object per menu item was inspired by the menu on sparkk.fr. Cube Icons is an independent, dependency-free take that builds its shapes from pixel art. Related work: heerich.js, claude-pxl.

Cube Icons Pro is coming, with 300+ icons, ready-made sections, framework components and export, for a one-time payment. Preview it.