G2 Icon Studio

A tiny, single-file browser tool for making the 24×24 monochrome icon that the Even Hub developer console asks for when you submit a G2 app — because hand-drawing that icon pixel-by-pixel in the built-in editor is painful.

▶ Live demo: https://naotake.github.io/g2-icon-studio/  ·  or open index.html in any browser — no build, no install, no upload, everything runs locally.

⚠️ Unofficial community tool. Not affiliated with, endorsed by, or connected to Even Realities. "Even Realities", "Even Hub" and "Even G2" are trademarks of their respective owner and are used here only descriptively. Always verify against the official documentation; specs can change.

Why

The Even Hub submission form lets you draw a 24×24, two-tone (black/white) icon on a small grid. That's fine for simple shapes but tedious for anything real, and there's no way to start from an existing logo. This tool adds an image importer, a comfortable editor, glasses-scale previews, and exports in the exact form the Hub accepts.

Features

1. Image → 1-bit

• Drop a PNG / JPG / SVG (or paste from clipboard, or re-open an existing icon.png)
• Live threshold / brightness / contrast
• Dithering: none · auto threshold (Otsu) · Floyd–Steinberg · Atkinson · Bayer 4×4
• Fit: contain / cover / stretch · invert · treat transparency as background

2. Pixel editor

• Pen / eraser / fill / line / rectangle
• Undo · redo (⌘Z / ⌘⇧Z), invert, horizontal/vertical symmetrize, arrow-key nudge, frame
• Live mirror drawing (draw half of a symmetric icon)

3. Preview & design guides

• Simultaneous previews: on white · on black · G2 (green) · actual 1×
• Guides: 1px grid · 2px units · center lines · 2px safe margin
• Reject-avoidance checks: ink coverage (aim ~12–55%), stray pixels, edge bleed

4. Export

• icon.png at 24×24. Presets: Even Hub standard (white-on-black) / black-on-transparent / white-on-transparent / black-on-white / custom colors. Rounded-corner mask, scaled preview.
• Save / load project (.json), automatic in-browser autosave.

Bilingual UI — English / 日本語 toggle (top-right), auto-detected from your browser.

The spec it targets

From the official App Submission & QA Guidelines:

• 24×24 px
• Monochrome / grayscale only (color is rejected)
• Both foreground and background required
• Legible — "no 'black scribble' or noisy patterns"

The "Even Hub standard" export matches the accepted form: a 24×24, grayscale-valued, white-foreground-on-dark-background PNG.

Usage

# Simplest: just open the file
open index.html

# Or serve it locally (needed if you want the clipboard "Copy" button):
python3 -m http.server 8777
#   → http://localhost:8777/

Or use the hosted version via GitHub Pages: https://naotake.github.io/g2-icon-studio/

Tip: append ?demo to the URL (e.g. …/g2-icon-studio/?demo) to load a sample icon to play with.

Note on grayscale colorspace

Exports are grayscale-valued RGBA PNGs (R=G=B), which satisfy the "monochrome / grayscale" requirement. If the Hub ever insists on a true Gray colorspace, convert afterwards:

# macOS
sips -s format png \
  --matchTo "/System/Library/ColorSync/Profiles/Generic Gray Profile.icc" icon.png

Privacy

100% client-side. Your images never leave the browser — there is no server, no upload, no analytics, and no tracking.

License

MIT. This repository bundles no Even Realities assets; it only references the public spec.